Modify CSS selectors to apply the right style to forms and input by default.

erp5_web depends on erp5_xhtml_style.
Clean up default css.

git-svn-id: https://svn.erp5.org/repos/public/erp5/trunk@10225 20353a03-c40f-0410-a6d1-a30d3c3de9de

bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web/erp5_web_form.css.xml

@@ -61,8 +61,7 @@
 \n
 <tal:block define="dummy python: request.RESPONSE.setHeader(\'Content-Type\', \'text/css;; charset=utf-8\')"/>\n
 \n
-/*____________________________________\n
-\n
+/*========================================================================================\n
   Default ERP5 Web CSS.\n
 \n
   Guidelines (how-to create a good css):\n
@@ -79,10 +78,16 @@
     * Internet Explorer 6 (Layout: OK; Style: not OK)\n
 \n
   TODO: Layout is ok in ie6, now styling should be adapted to support ie6.\n
-____________________________________*/\n
+========================================================================================*/\n
+\n
+\n
+\n
+/*========================================================================================\n
+**  GENERAL STUFF\n
+**========================================================================================*/\n
 \n
 \n
-/* General stuff that are good to include in every website.\n
+/* Good CSS directive to include in every website to reset all browser default style.\n
 ----------------------------------------------- */\n
 \n
 * {\n
@@ -90,13 +95,9 @@ ____________________________________*/\n
   margin: 0;\n
 }\n
 \n
-.clear {\n
-  clear: both;\n
-}\n
+.clear {clear: both}\n
 \n
-img {\n
-  border: 0;\n
-}\n
+img {border: 0}\n
 \n
 a:link, a:visited {text-decoration: none}\n
 a:active, a:hover {text-decoration: underline}\n
@@ -108,38 +109,38 @@ a img, h3 img, button img, li img {\n
   vertical-align: middle;\n
 }\n
 \n
-ul {\n
-  list-style-position: inside;\n
-}\n
+ul {list-style-position: inside}\n
+li {margin-left: 1em}\n
 \n
-li {\n
-  margin-left: 1em;\n
-}\n
+.doNotDisplay {display: none}\n
 \n
 table {\n
   border-collapse: collapse;\n
   border-spacing: 0;\n
 }\n
 \n
-.doNotDisplay {\n
-  display: none;\n
-}\n
-\n
 p {\n
-  margin: 1em 0;\n
+  margin: .6em 0;\n
   text-align: justify;\n
 }\n
 \n
+\n
+\n
+/* Workflow states\n
+----------------------------------------------- */\n
+\n
 span.draft       {color: #be854d}\n
 span.published,\n
 span.validated   {color: #078307}\n
 span.invalidated {color: #ab0303}\n
 span.cancelled   {color: #ccc}\n
 \n
+\n
+\n
 /* Emulate <center> html tag.\n
-** This class is called \'centered\' to not interfer with the \'center\' group\n
-** used in erp5_xhtml_style positionning.\n
-*/\n
+   This class is called \'centered\' to not interfer with the \'center\' group\n
+   used in erp5_xhtml_style rigid positionning mechanism.\n
+----------------------------------------------- */\n
 .centered {\n
   width: 100%;\n
   text-align: center;\n
@@ -152,105 +153,6 @@ span.cancelled   {color: #ccc}\n
 \n
 \n
 \n
-/* Widget default styling\n
------------------------------------------------ */\n
-\n
-/* Default layout for form web widgets */\n
-\n
-form#main_form div.wrapper div.field {\n
-  background: #fff url(erp5-website-field.png) top repeat-x;\n
-  border: 1px solid #ccc;\n
-  color: #666;\n
-  margin: .3em;\n
-  padding: .5em;\n
-}\n
-\n
-form#main_form div.wrapper div.field label {\n
-  font-weight: bold;\n
-}\n
-\n
-\n
-\n
-/* Admin toolbox widget style\n
------------------------------------------------ */\n
-\n
-form#main_form div.wrapper div.adminToolbox {\n
-  position: fixed;\n
-  z-index: 200;\n
-  top: .2em;\n
-  right: .2em;\n
-  margin: 0;\n
-  padding: 0;\n
-  background-color: #fff7cd;\n
-  border: 1px solid #f77;\n
-}\n
-\n
-div.adminToolbox label {\n
-  display: none;\n
-}\n
-\n
-/* admin toolbox sub section title */\n
-div.adminToolbox h3 {\n
-  padding: .5em 0;\n
-  margin-left: -1em;\n
-  font-size: inherit;\n
-}\n
-\n
-/* admin toolbox title */\n
-div.adminToolbox > div > h3 {\n
-  background: #f77;\n
-  padding: .5em;\n
-  margin: 0;\n
-  color: #fff;\n
-  cursor: pointer;\n
-}\n
-\n
-div.adminToolbox > div > h3:hover {\n
-  background: #f00;\n
-}\n
-\n
-div.adminToolbox > div.input > div.adminSection {\n
-  border-bottom: 1px dotted #f77;\n
-  padding: .5em .5em 1em 1.5em;\n
-}\n
-\n
-div.adminToolbox > div.input > div.adminSection:last-child {\n
-  border-bottom: none;\n
-}\n
-\n
-div.adminToolbox ul {\n
-  list-style: none;\n
-}\n
-\n
-div.adminToolbox li {\n
-  margin: 0;\n
-}\n
-\n
-div.adminToolbox li > a {\n
-  text-decoration: none;\n
-}\n
-\n
-div.adminToolbox button,\n
-div.adminToolbox li > a {\n
-  margin: .1em 0;\n
-  padding: .2em;\n
-}\n
-\n
-div.adminToolbox button[type="submit"] {\n
-  display: none;\n
-}\n
-\n
-\n
-\n
-/* Breadcrumb default style\n
------------------------------------------------ */\n
-\n
-div.breadcrumb li a.selected {\n
-  border-bottom: 1px dashed #999;\n
-}\n
-\n
-\n
-\n
 /* Default content styling (apply to everything, site wide);\n
    Typography & colors (fonts, color, background).\n
 ----------------------------------------------- */\n
@@ -273,6 +175,7 @@ body, input, textarea, select, table {\n
 \n
 .code, code {\n
   font-family: "Courier New", Courier, monospace;\n
+  font-size: 120%; /* monospaced font are usually shorter than normal one */\n
 }\n
 \n
 #transition_message, .warning, .error, .important {\n
@@ -293,11 +196,16 @@ blockquote {\n
 \n
 \n
 \n
-/* General form styling\n
-  Form style based on Aleksandar Vaci\xc4\x87\'s work,\n
-  ditributed under Creative Commons Paternity Licence:\n
-    * http://creativecommons.org/licenses/by/2.0/\n
+\n
+/*========================================================================================\n
+**  FORMs & INPUTs\n
+**========================================================================================*/\n
+\n
+/*\n
+  Inspired by Aleksandar Vaci\xc4\x87\'s work,\n
+  distributed under Creative Commons Paternity Licence:\n
     * http://www.aplus.co.yu/css/forms/?css=1\n
+    * http://creativecommons.org/licenses/by/2.0/\n
 ----------------------------------------------- */\n
 \n
 input, textarea {\n
@@ -364,18 +272,251 @@ button:hover {\n
 \n
 \n
 \n
+/* Custom web Listbox styling.\n
+** TODO: change colors to have better integration in default erp5 web theme.\n
+-----------------------------------------------*/\n
+\n
+table.listbox,\n
+table.listbox tr,\n
+table.listbox td,\n
+table.listbox th {\n
+  border: 0;\n
+  color: #000;\n
+  line-height: 1.5em;\n
+  margin: 0;\n
+  padding: 0;\n
+}\n
+\n
+table.listbox {\n
+  margin-bottom: 3em;\n
+  width: 100%;\n
+}\n
+\n
+table.listbox .right {float: right}\n
+table.listbox .left  {float: left}\n
+\n
+table.listbox caption,\n
+div.searchResultHeader {\n
+  border-top: 1px #3366CC solid;\n
+  background-color: #c3e3df;\n
+  padding: .2em;\n
+  color: #000;\n
+}\n
+\n
+table.listbox caption em,\n
+div.searchResultHeader em {\n
+  font-weight: bold;\n
+  font-style: normal;\n
+}\n
+\n
+table.listbox thead th,\n
+table.listbox thead td {\n
+  border-right: 1px #ccc solid;\n
+  text-align: center;\n
+  color: #666;\n
+  background: #ddd;\n
+}\n
+\n
+table.listbox thead th:last-child,\n
+table.listbox thead td:last-child {\n
+  border-right: none;\n
+}\n
+\n
+table.listbox thead th {\n
+  text-transform: capitalize;\n
+  font-variant: small-caps;\n
+}\n
+\n
+table.listbox tbody td.externalLink a,\n
+table.listbox tbody th.externalLink a {\n
+  text-decoration: none;\n
+  background: transparent url(erp5-website-external-link.png) center right no-repeat;\n
+  padding-right: 15px;\n
+  color: #637dc1;\n
+}\n
+\n
+table.listbox tbody td.externalLink a:hover,\n
+table.listbox tbody th.externalLink a:hover {\n
+  text-decoration: underline;\n
+  color: #637dc1;\n
+}\n
+\n
+table.listbox tbody td, table.listbox tbody th {\n
+  border-top: 1px solid #ddd;\n
+}\n
+\n
+table.listbox td, table.listbox th {\n
+  text-align: left;\n
+  padding: .2em .5em;\n
+}\n
+\n
+table.listbox tbody td a,\n
+table.listbox tbody td a:hover,\n
+table.listbox tbody td a:visited {color: #4343D9}\n
+\n
+table.listbox tbody tr:hover {background: #f6f6f6}\n
+\n
+table.listbox tbody span.number, tbody span.date {float: right}\n
+\n
+table.listbox tbody .mainLink {\n
+  font-weight: bold;\n
+  display: block;\n
+}\n
+\n
+table.listbox tfoot th, table.listbox tfoot td {\n
+  border-top: 1px solid #999;\n
+}\n
+\n
+table.listbox tfoot td {\n
+  text-align: right;\n
+}\n
+\n
+table.listbox tfoot .pageNavigation button {\n
+  border: 1px #eee solid;\n
+  background: #fff;\n
+  padding: .2em .4em;\n
+  margin: 0 .1em;\n
+}\n
+\n
+table.listbox tfoot .pageNavigation button:hover {\n
+  border: 1px #999 solid;\n
+  text-decoration: none;\n
+  background: #eee;\n
+}\n
+\n
+\n
+\n
+\n
+/*========================================================================================\n
+**  WEB WIDGET\n
+**========================================================================================*/\n
+\n
+/* Default layout and style of form web widgets.\n
+   All widgets (extracted from layout form) are always inside a wrapper.\n
+----------------------------------------------- */\n
+\n
+div.wrapper div.field {\n
+  background: #fff url(erp5-website-field.png) top repeat-x;\n
+  border: 1px solid #ccc;\n
+  color: #666;\n
+  margin: .3em;\n
+  padding: .5em;\n
+}\n
+\n
+div.wrapper div.field label {\n
+  font-weight: bold;\n
+}\n
+\n
+\n
+\n
+/* Admin toolbox widget style.\n
+   Some properties override default web widget style,\n
+     that\'s why there is "div.wrapper" in some CSS selectors.\n
+----------------------------------------------- */\n
+\n
+div.wrapper div.adminToolbox {\n
+  position: fixed;\n
+  z-index: 200;\n
+  top: 2px;\n
+  right: 2px;\n
+  margin: 0;\n
+  padding: 0;\n
+  background-color: #fff7cd;\n
+  border: 1px solid #f77;\n
+}\n
+\n
+div.adminToolbox label {\n
+  display: none;\n
+}\n
+\n
+/* Sub section title */\n
+div.adminToolbox h3 {\n
+  padding: .5em 0;\n
+  margin-left: -1em;\n
+  font-size: inherit;\n
+}\n
+\n
+/* Title */\n
+div.adminToolbox > div > h3 {\n
+  background: #f77;\n
+  padding: .5em;\n
+  margin: 0;\n
+  color: #fff;\n
+  cursor: pointer;\n
+}\n
+\n
+div.adminToolbox > div > h3:hover {\n
+  background: #f00;\n
+}\n
+\n
+div.adminToolbox > div.input > div.adminSection {\n
+  border-bottom: 1px dotted #f77;\n
+  padding: .5em .5em 1em 1.5em;\n
+}\n
+\n
+div.adminToolbox > div.input > div.adminSection:last-child {\n
+  border-bottom: none;\n
+}\n
+\n
+div.adminToolbox ul {\n
+  list-style: none;\n
+}\n
+\n
+div.adminToolbox li {\n
+  margin: 0;\n
+}\n
+\n
+div.adminToolbox li > a {\n
+  text-decoration: none;\n
+}\n
+\n
+div.adminToolbox button,\n
+div.adminToolbox li > a {\n
+  margin: .1em 0;\n
+  padding: .2em;\n
+}\n
+\n
+div.adminToolbox button[type="submit"] {\n
+  display: none;\n
+}\n
+\n
+/*div.adminToolbox fieldset {\n
+  background: #ff0;\n
+  border-top: none;\n
+}\n
+\n
+div.adminToolbox legend {\n
+  border: none;\n
+}*/\n
+\n
+\n
+\n
+/* Breadcrumb default style\n
+----------------------------------------------- */\n
+\n
+div.breadcrumb li a.selected {\n
+  border-bottom: 1px dashed #999;\n
+}\n
+\n
+\n
+\n
+\n
+/*========================================================================================\n
+**  PAGE LAYOUT\n
+**========================================================================================*/\n
+\n
 /* Content zone form styling (apply for editable mode and read\n
-** only mode within the content zone).\n
-** TODO: Change form rendering to let the field go below the label\n
-**       if there is not enought width to display them inline.\n
-** TODO: Use dtml variables to define dynamiccaly label width.\n
+   only mode within the content zone).\n
+   TODO: Change form rendering to let the field go below the label\n
+         if there is not enought width to display them inline.\n
+   TODO: Use dtml variables to define dynamiccaly label width.\n
 ----------------------------------------------- */\n
 \n
-div.content div.input {\n
+fieldset div.input {\n
   margin-left: 11.5em;   /* = div.content label width + 0.5 of margin */\n
 }\n
 \n
-div.content fieldset {\n
+fieldset {\n
   margin: 1em 0;\n
   padding: .5em;\n
   border-color: #ccc;\n
@@ -383,20 +524,20 @@ div.content fieldset {\n
   border-style: dotted none none;\n
 }\n
 \n
-div.content fieldset > div {\n
+fieldset > div {\n
   clear: both;\n
   margin: .1em 0;\n
   position: relative;\n
 }\n
 \n
-div.content legend {\n
+fieldset legend {\n
   padding: .2em .5em;\n
   font-weight: bold;\n
   color: #666;\n
   text-transform: capitalize;\n
 }\n
 \n
-div.content label {\n
+fieldset label {\n
   margin: 0;\n
   display: block;\n
   width: 11em;\n
@@ -406,23 +547,6 @@ div.content label {\n
 }\n
 \n
 \n
-/* Reset common fieldset styling:\n
-     - no need to let some free space in the left side\n
-     - no need to display label\n
-     - no need to display fieldset legend\n
-   TODO: Because thoses properties are used for generic ".bottom" fieldset\n
-         and webcontent custom forms, we can add a new CSS class with a better\n
-         name to enhance semantics.\n
-*/\n
-div.content fieldset.bottom legend,\n
-div.content fieldset.bottom label {\n
-  display: none;\n
-}\n
-div.content fieldset.bottom div.input {\n
-  margin-left: inherit;\n
-}\n
-\n
-\n
 \n
 /* Edit tabs styling.\n
 ** Edit tabs are another part of admin stuffs and\n
@@ -449,7 +573,8 @@ div.actions ul li  {\n
   padding: 0;\n
 }\n
 \n
-div.actions ul a, div.actions ul li.selected a {\n
+div.actions ul a,\n
+div.actions ul li.selected a {\n
   display: block;\n
   float: left;\n
   padding: 4px 1em;\n
@@ -463,7 +588,8 @@ div.actions ul a {\n
   border: 1px solid #999;\n
 }\n
 \n
-div.actions ul li.selected a, div.actions ul li.selected a:hover {\n
+div.actions ul li.selected a,\n
+div.actions ul li.selected a:hover {\n
   border-bottom: none;\n
   padding-bottom: 6px;\n
   margin-top: 0;\n
@@ -494,112 +620,20 @@ div.actions button {\n
   right: 0;\n
 }\n
 \n
-\n
-\n
-/* Custom web Listbox styling.\n
-** TODO: change colors to have better integration in default erp5 web theme.\n
------------------------------------------------*/\n
-\n
-table.listbox, table.listbox tr, table.listbox td, table.listbox th {\n
-  border: 0;\n
-  color: #000;\n
-  line-height: 1.5em;\n
-  margin: 0;\n
-  padding: 0;\n
-}\n
-\n
-table.listbox {\n
-  margin-bottom: 3em;\n
-  width: 100%;\n
-}\n
-\n
-table.listbox .right {float: right}\n
-table.listbox .left  {float: left}\n
-\n
-table.listbox caption, div.searchResultHeader {\n
-  border-top: 1px #3366CC solid;\n
-  background-color: #c3e3df;\n
-  padding: .2em;\n
-  color: #000;\n
-}\n
-\n
-table.listbox caption em, div.searchResultHeader em {\n
-  font-weight: bold;\n
-  font-style: normal;\n
-}\n
-\n
-table.listbox thead th,\n
-table.listbox thead td {\n
-  border-right: 1px #ccc solid;\n
-  text-align: center;\n
-  color: #666;\n
-  background: #ddd;\n
-}\n
-\n
-table.listbox thead th:last-child,\n
-table.listbox thead td:last-child {\n
-  border-right: none;\n
-}\n
-\n
-table.listbox thead th {\n
-  text-transform: capitalize;\n
-  font-variant: small-caps;\n
-}\n
-\n
-table.listbox tbody td.externalLink a, table.listbox tbody th.externalLink a {\n
-  text-decoration: none;\n
-  background: transparent url(erp5-website-external-link.png) center right no-repeat;\n
-  padding-right: 15px;\n
-  color: #637dc1;\n
-}\n
-\n
-table.listbox tbody td.externalLink a:hover,\n
-table.listbox tbody th.externalLink a:hover {\n
-  text-decoration: underline;\n
-  color: #637dc1;\n
-}\n
-\n
-table.listbox tbody td, table.listbox tbody th {\n
-  border-top: 1px solid #ddd;\n
-}\n
-\n
-table.listbox td, table.listbox th {\n
-  text-align: left;\n
-  padding: .2em .5em;\n
-}\n
-\n
-table.listbox tbody td a,\n
-table.listbox tbody td a:hover,\n
-table.listbox tbody td a:visited {color: #4343D9}\n
-\n
-table.listbox tbody tr:hover {background: #f6f6f6}\n
-\n
-table.listbox tbody span.number, tbody span.date {float: right}\n
-\n
-table.listbox tbody .mainLink {\n
-  font-weight: bold;\n
-  display: block;\n
-}\n
-\n
-table.listbox tfoot th, table.listbox tfoot td {\n
-  border-top: 1px solid #999;\n
-}\n
-\n
-table.listbox tfoot td {\n
-  text-align: right;\n
-}\n
-\n
-table.listbox tfoot .pageNavigation button {\n
-  border: 1px #eee solid;\n
-  background: #fff;\n
-  padding: .2em .4em;\n
-  margin: 0 .1em;\n
+/* Reset common fieldset styling for bottom group in editable mode:\n
+     - no need to let some free space in the left side\n
+     - no need to display label\n
+     - no need to display fieldset legend\n
+   TODO: Because thoses properties are used for generic ".bottom" fieldset\n
+         and webcontent custom forms, we can add a new CSS class with a better\n
+         name to enhance semantics.\n
+*/\n
+div.content fieldset.bottom legend,\n
+div.content fieldset.bottom label {\n
+  display: none;\n
 }\n
-\n
-table.listbox tfoot .pageNavigation button:hover {\n
-  border: 1px #999 solid;\n
-  text-decoration: none;\n
-  background: #eee;\n
+div.content fieldset.bottom div.input {\n
+  margin-left: inherit;\n
 }\n
 \n
 \n
@@ -647,13 +681,8 @@ div.content > fieldset.webcontent span.summary {\n
 /* Login page style\n
 ----------------------------------------------- */\n
 \n
-div.content.login{\n
-  padding: 0 1em;\n
-}\n
-\n
-div.content.login fieldset {\n
-  border: none;\n
-}\n
+div.content.login {padding: 0 1em}\n
+div.content.login fieldset {border: none}\n
 \n
 \n
 \n

bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web_default_theme/WebSite_viewAsWeb/page_summary.xml

@@ -201,7 +201,7 @@
                 </item>
                 <item>
                     <key> <string>default</string> </key>
-                    <value> <string>Current site description.</string> </value>
+                    <value> <string>Current web site description.</string> </value>
                 </item>
                 <item>
                     <key> <string>description</string> </key>

bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web_default_theme/WebSite_viewAsWeb/page_title.xml

@@ -201,7 +201,7 @@
                 </item>
                 <item>
                     <key> <string>default</string> </key>
-                    <value> <string>Current Page Title</string> </value>
+                    <value> <string>Current Web Site Title</string> </value>
                 </item>
                 <item>
                     <key> <string>description</string> </key>

bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web_widget_library/admin_toolbox.xml

@@ -148,7 +148,7 @@
        This part is displayed any document apart Web Site and Web Section.\n
        But if Web Site and Web Section have default page, then it will be displayed anyway.\n
   -->\n
-  <div name="adminSection" class="adminSection content"\n
+  <div name="adminSection" class="adminSection"\n
        tal:condition="python: (portal_type in [\'Web Site\', \'Web Section\'] and here.WebSite_getDefaultWebPageValue()) or not portal_type in [\'Web Site\', \'Web Section\']">\n
 \n
     <form name="tool_create" method="post" action="WebSite_newContent">\n

bt5/erp5_web/bt/change_log

+2006-09-21 Kevin
+* Modify CSS selectors to apply the right style to forms and input by default.
+* erp5_web depends on erp5_xhtml_style.
+* Clean up default css.
+
 2006-09-20 Kevin
 * Admin toolbox style clean-up.
 

bt5/erp5_web/bt/dependency_list

-erp5_view_style
+erp5_xhtml_style
\ No newline at end of file

bt5/erp5_web/bt/description

@@ -5,7 +5,6 @@ Features:
  * Default 3 column layout with ordered content (IE6 should be able to display it).
  * Content edition through custom layout.
  * Custom view based on generic ERP5 forms.
- * Work out of the box.
  * Multi-publication: 1 document can be published in several sections.
  * Collection of generic web widgets (breadcrumb, listbox, admin toolbar, ...).
  * Support FCKeditor for content edition.

bt5/erp5_web/bt/revision

-459
+467
\ No newline at end of file

bt5/erp5_web/bt/short_title

+None
\ No newline at end of file

bt5/erp5_web/bt/version

-0.3.40
+0.3.41
\ No newline at end of file