Author: apatel
Date: Fri Jun 5 20:04:16 2009 New Revision: 782120 URL: http://svn.apache.org/viewvc?rev=782120&view=rev Log: more improvements to forms styling in ecommerce component. Modified: ofbiz/trunk/framework/images/webapp/images/ecommain.css ofbiz/trunk/framework/images/webapp/images/forms.css ofbiz/trunk/specialpurpose/ecommerce/webapp/ecommerce/customer/newcustomer.ftl Modified: ofbiz/trunk/framework/images/webapp/images/ecommain.css URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/ecommain.css?rev=782120&r1=782119&r2=782120&view=diff ============================================================================== --- ofbiz/trunk/framework/images/webapp/images/ecommain.css (original) +++ ofbiz/trunk/framework/images/webapp/images/ecommain.css Fri Jun 5 20:04:16 2009 @@ -20,55 +20,97 @@ @import url("reset.css"); @import url("forms.css"); -a,address,body,caption,cite,code,dfn,em,strong,th,var { -font-style:normal; -font-weight:400; -text-decoration:none; +/*********************************************** +General Styles +***********************************************/ +body { +background: #fff; +color: #333; +font-family: Arial, Helvetica, sans-serif; +font-size:.75em; +line-height:1.5em; +text-align:center; } -body,caption,th { -text-align:left; -} +img {display: inline-block; vertical-align: bottom;} -h1,h2,h3,h4,h5,h6 { -font-size:100%; -} +h1,h2,h3,h4,h5,h6,strong,b,dt,th {font-weight: 700;} +address,cite,em,i,caption,dfn,var {font-style: italic;} + +h1 {margin: 0 0 0.75em; font-size: 2em; color:#1F2948;} +h2 {margin: 0 0 1em; font-size: 1.5em;} +h3 {margin: 0 0 .5em; font-size: 1.167em; color:#1F2948;} +h4 {margin: 0 0 1.5em; font-size: 1em;} +h5 {margin: 0 0 1.8em; font-size: .834em;} +h6 {margin: 0 0 2em; font-size: .75em;} h1 span,h2 span,h3 span ,h4 span ,h5 span,h6 span {font-size:75%} -ol,ul { -list-style:none; -} +p,ul,ol,dl,blockquote,pre {margin: 0 0 1.5em;} -a,a:visited { -color:#1C334D; -font-weight:700; -} +blockquote {padding: 0 1.5em;} -a:hover,a:active { -text-decoration:underline; +li ul,li ol {margin: 0;} +ul {list-style: none;} +ol {list-style: outside decimal;} +li {margin: 0;} + +dl { margin: 0 0 1.5em 0; } +dl dt { font-weight: bold; } +dd { margin-left: 1.5em;} + +a, a:link, a:visited {text-decoration: none; color:#1C334D; font-weight:700;} +a:hover {text-decoration: none; color:#111;} +abbr,acronym {border-bottom: 1px dotted; cursor: help;} +del {text-decoration: line-through;} +ins {text-decoration: overline;} +sub {font-size: .834em; line-height: 1em; vertical-align: sub;} +sup {font-size: .834em; line-height: 1em; vertical-align: super;} +strong { font-weight: bold; } +em, dfn { font-style: italic; } + +tt,code,kbd,samp,pre {font-size: 1em; font-family: "Courier New", Courier, monospace;} + +/*********************************************** +Tables +***********************************************/ +table {border-collapse: collapse; border-spacing: 0; margin: 0 0 1.5em;} +caption {text-align: left;} +th, td {padding: .25em .5em;} +tbody td, tbody th {} + +col.colC {width:8em;} + +th, td {padding:.2em 1em;text-align:left;} + +thead th { +border-bottom:2px solid #888; +background:#bbb; +padding:.4em 1em .2em; +} +thead th.table-head { +font-size:1em; +font-weight:normal; +text-transform:uppercase; +color:#fff; +background:#555; +border:1px solid #555; } +tbody th, tbody td {border-top:1px solid #bbb;} +tbody tr.odd th, tbody tr.odd td {background:#fff;} + +tfoot th, tfoot td {border-top:2px solid #666;background:#eee;text-align:right} +tfoot tr.total th, tfoot tr.total td {border-top:6px double #666;} + +tfoot tr.total th {text-transform:uppercase;} +th.currency, td.currency {text-align:right;} + .disabled { color:#336; text-decoration:none; } -body { -background-color:#FFF; -color:#000; -font-family:Verdana, Arial, Helvetica, sans-serif; -font-size:10px; -margin:10px; -} - -hr { -background-color:#999; -border:0; -height:1px; -margin:5px 0; -} - input[type=radio],input[type=checkbox] { font-size:8pt; } @@ -92,46 +134,6 @@ font-size:11px; } -h1,.h1 { -color:#1C334D; -font-size:12pt; -font-weight:700; -} - -h2,.h2 { -font-size:10pt; -font-weight:700; -} - -h3,.h3 { -font-size:8pt; -font-weight:700; -} - -table { -font-size:10px; -} - -table input { -border:#999 solid 1px; -} - -textarea { -background:#FFF; -border:#999 solid 1px; -font-size:8pt; -margin:2px; -} - -th,th a { -color:#000; -font-weight:700; -} - -img { -behavior:url(/images/pngbehavior.htc); -} - .endcolumns { clear:both; height:0; @@ -158,16 +160,16 @@ } #ecom-header #left { -left:0; +left:10px; position:absolute; -top:0; +top:20px; width:280px; } #ecom-header #middle { margin-left:290px; margin-right:210px; -padding-top:10px; +padding-top:20px; text-align:center; width:auto; } @@ -176,7 +178,7 @@ margin-top:20px; padding:0; position:absolute; -right:0; +right:20px; text-align:right; top:0; width:290px; @@ -233,7 +235,7 @@ #ecom-header-bar { background:#B4B0AA; -height:14px; +height:18px; overflow:visible; text-align:center; } @@ -245,7 +247,7 @@ } #ecom-header-bar ul li { -height:14px; +height:18px; padding:0 8px; } @@ -275,39 +277,43 @@ margin-top:10px; position:relative; width:100%; +text-align:left; } #ecom-mainarea .left { background:#fff; float:left; -width:150px; +width:180px; +margin:0 0 0 10px; } #ecom-mainarea .right { background:#fff; float:right; -width:200px; +width:240px; +margin:0 10px 0 0; } #ecom-mainarea .center,#ecom-mainarea .leftonly,#ecom-mainarea .rightonly,#ecom-mainarea .nocolumns { background:#fff; text-align:left; vertical-align:top; +margin:0 0 0 10px; } #ecom-mainarea .center { -margin-left:161px; -margin-right:211px; +margin-left:201px; +margin-right:261px; voice-family:inherit; } #ecom-mainarea .leftonly { -margin-left:161px; +margin-left:201px; voice-family:inherit; } #ecom-mainarea .rightonly { -margin-right:211px; +margin-right:261px; voice-family:inherit; } Modified: ofbiz/trunk/framework/images/webapp/images/forms.css URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/forms.css?rev=782120&r1=782119&r2=782120&view=diff ============================================================================== --- ofbiz/trunk/framework/images/webapp/images/forms.css (original) +++ ofbiz/trunk/framework/images/webapp/images/forms.css Fri Jun 5 20:04:16 2009 @@ -33,7 +33,7 @@ *+html legend {margin-left: -7px;} form .form-row, .buttons {clear: both; margin: 0 0 0.8em;} -form .form-row label {display: block; padding-bottom:.34em} +form .form-row label {display: block; padding-bottom:.08em} form ul li {list-style-type: none; margin: 0;} form .inline li, form .inline label {display: inline;} form .inline li {padding: 0 .75em 0 0;} @@ -82,68 +82,68 @@ /*********************************************** Buttons ***********************************************/ -.buttons { font-size:110%; padding:5px 0px 5px 0px; text-align:center;} -.buttons a, .buttons button, .buttons input[type=submit], .buttons input[type=reset]{ -display:block; -float:left; +.buttons { font-size:100%; padding:5px 0px 5px 0px;} +a.button, button.button, input[type=submit].button, input[type=reset].button{ +display:inline; margin:0 7px 0 0; background-color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee; border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; -font-size:110%; -line-height:140%; +font-size:100%; +line-height:130%; text-decoration:none; font-weight:bold; color:#565656; cursor:pointer; padding:5px 10px 6px 7px; /* Links */ } -.buttons button{ +button{ width:auto; overflow:visible; padding:4px 10px 3px 7px; /* IE6 */ } -.buttons button[type]{ +button[type]{ padding:5px 10px 5px 7px; /* Firefox */ line-height:17px; /* Safari */ } *:first-child+html button[type]{ padding:4px 10px 3px 7px; /* IE7 */ } -button:hover, .buttons a:hover{ +button:hover, a.button:hover{ background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; } -.buttons a:active{ +a.button:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff; } -.buttons input[type=submit]:hover { + +input[type=submit].button:hover { background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; } -.buttons a.submit:active{ +a.submit:active{ background-color:#529214; border:1px solid #529214; color:#fff; } -.buttons a.reset, button.reset{color:#d12f19;} -.buttons a.reset:hover, button.reset:hover{ +a.reset, button.reset{color:#d12f19;} +a.reset:hover, button.reset:hover{ background:#fbe3e4; border:1px solid #fbc2c4; color:#d12f19; } -.buttons input[type=reset]:hover, .buttons button[type=reset]:hover { +input[type=reset].button:hover, button[type=reset].button:hover { background:#fbe3e4; border:1px solid #fbc2c4; color:#d12f19; } -.buttons a.reset:active{ +a.reset:active{ background-color:#d12f19; border:1px solid #d12f19; color:#fff; Modified: ofbiz/trunk/specialpurpose/ecommerce/webapp/ecommerce/customer/newcustomer.ftl URL: http://svn.apache.org/viewvc/ofbiz/trunk/specialpurpose/ecommerce/webapp/ecommerce/customer/newcustomer.ftl?rev=782120&r1=782119&r2=782120&view=diff ============================================================================== --- ofbiz/trunk/specialpurpose/ecommerce/webapp/ecommerce/customer/newcustomer.ftl (original) +++ ofbiz/trunk/specialpurpose/ecommerce/webapp/ecommerce/customer/newcustomer.ftl Fri Jun 5 20:04:16 2009 @@ -58,11 +58,12 @@ </script> </#if> -<!-------------------------------------------------------------------------------------------- -NOTE: all page headings should start with an <h2></h2> tag, -(not an H1 tag, as there should generally always only be one <h1></h1> tag on the page and -that will generally always be reserved for the logo at the top of the page. -----------------------------------------------------------------------------------------------> +<!------------------------------------------------------------------------------ +NOTE: all page headings should start with an h2 tag, not an H1 tag, as +there should generally always only be one h1 tag on the page and that +will generally always be reserved for the logo at the top of the page. +-------------------------------------------------------------------------------> + <h2>${uiLabelMap.PartyRequestNewAccount} <span> ${uiLabelMap.PartyAlreadyHaveAccount}, <a href='<@ofbizUrl>checkLogin/main</@ofbizUrl>'>${uiLabelMap.CommonLoginHere}</a> @@ -399,15 +400,17 @@ </form> -<!-------------------------------------------------------------------------------------------- -To create a consistent look and feel for all buttons, input[type=submit], and a tags acting as -submit buttons, all button actions should be enclosed in a div with a class name of "buttons" ----------------------------------------------------------------------------------------------> +<!------------------------------------------------------------------------------ +To create a consistent look and feel for all buttons, input[type=submit], +and a tags acting assubmit buttons, all button actions should have a +class name of "button". No other class names should be used to style +button actions. +-------------------------------------------------------------------------------> <div class="buttons"> - <a href="javascript:document.newuserform.submit()">${uiLabelMap.CommonSave}</a> - <a href="<@ofbizUrl>checkLogin/main</@ofbizUrl>" class="reset">${uiLabelMap.CommonBack}</a> + <a href="javascript:document.newuserform.submit()" class="button">${uiLabelMap.CommonSave}</a> + <a href="<@ofbizUrl>checkLogin/main</@ofbizUrl>" class="button reset">${uiLabelMap.CommonBack}</a> </div> <script language="JavaScript" type="text/javascript"> hideShowUsaStates(); -</script> +</script> \ No newline at end of file |
Free forum by Nabble | Edit this page |