You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by ap...@apache.org on 2009/06/05 22:04:16 UTC
svn commit: r782120 - in /ofbiz/trunk:
framework/images/webapp/images/ecommain.css
framework/images/webapp/images/forms.css
specialpurpose/ecommerce/webapp/ecommerce/customer/newcustomer.ftl
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='<@o...@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="<@o...@ofbizUrl>" class="reset">${uiLabelMap.CommonBack}</a>
+ <a href="javascript:document.newuserform.submit()" class="button">${uiLabelMap.CommonSave}</a>
+ <a href="<@o...@ofbizUrl>" class="button reset">${uiLabelMap.CommonBack}</a>
</div>
<script language="JavaScript" type="text/javascript">
hideShowUsaStates();
-</script>
+</script>
\ No newline at end of file