Skip to content

erp5
erp5
Commit 9173c3bf authored by Kevin Deldycke's avatar Kevin Deldycke
Browse files
Options

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
parent adc61f53
Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 274 deletions
bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web/erp5_web_form.css.xml
View file @ 9173c3bf
......@@ -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
View file @ 9173c3bf
......@@ -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
View file @ 9173c3bf
......@@ -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
View file @ 9173c3bf
......@@ -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
View file @ 9173c3bf
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
View file @ 9173c3bf
erp5_view_style
\ No newline at end of file
erp5_xhtml_style
\ No newline at end of file
bt5/erp5_web/bt/description
View file @ 9173c3bf
......@@ -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
View file @ 9173c3bf
459
\ No newline at end of file
467
\ No newline at end of file
bt5/erp5_web/bt/short_title 0 → 100644
View file @ 9173c3bf
None
\ No newline at end of file
bt5/erp5_web/bt/version
View file @ 9173c3bf
0.3.40
\ No newline at end of file
0.3.41
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7