I've spent the last few days going through the maincss.css file. I have attached
the final result to this email. Here are some of the steps performed on the file:
1. Consolidated maincss.css and tabstyles.css into one file.
2. Used CSS inheritance and contextual selectors to reduce CSS code.
3. Changed mixed font-size assignments to a consistent format - pixels.
(Chris's idea of using em for font sizes is a great idea, and I wanted to do
that, but I ran out of time.)
4. Changed color assignments to a consistent format - hex notation.
5. Re-organized CSS classes into some general categories.
6. Added helpful comments.
My objective was to simplify and streamline the existing file, without causing a
severe impact on OFBiz's existing look and feel.
Anyone who wants to try out this file can simply drop it into an existing OFBiz
installation, then rename the existing tabstyles.css file so it won't get used.
The UI will still look very much the same, with only trivial differences that
are probably due to the font-size changes.
This file is NOT intended to be included in the project. As was mentioned in the
previous thread, it is too drastic of a change to include it as-is. I'm NOT
putting it out there to overwhelm or frustrate the committers. My motivation is
purely to inspire and provoke discussion about OFBiz's style sheets.
My hope is that we can come up with some CSS guidelines/patterns/best practices
to use on style sheets, then start making incremental changes to the style
sheets to follow those guidelines.
With that in mind, I'd like to toss out a few of my own suggestions for CSS
guidelines:
1. Make better use of CSS inheritance. This has two advantages: less CSS code,
and easier to make style changes. In the attached maincss.css file, you can
change the font-family line in the BODY class and it will affect the entire
website. In the existing version, you would have to make dozens of changes to
accomplish the same thing.
2. Make better use of CSS contextual selectors. Advantages: reduced HTML and
more intuitive style changes.
Reduced HTML example: in the attached maincss.css file, find the comments about
unnecessary style(s). If those CSS classes aren't needed, then their
corresponding HTML "class=" declarations aren't needed either.
Style change example: let's say I don't like the look of the yellow submenu text
in the title bars of the screenlets. So, I change the color properties of the
submenutext CSS classes to make the text light blue. Cool - now the title bar
submenus look much better. Oh wait. Oops - that changed other elements too.
That's not what I intended. It would be better if the submenutext classes were
defined within the context of the title bar, so that changes made to them only
affect the submenutext elements WITHIN the title bar.
(Btw, I really don't like the bold yellow text on a blue background. It looks
tacky.)
3. Be consistent with properties. Font sizes should all be expressed the same,
colors should all be expressed the same, etc. That makes style changes easier by
utilizing editor search & replace functions.
4. Don't assume the whole world reads left-to-right. To demonstrate: in the
attached maincss.css file, in the BODY class, change
direction: ltr;
to
direction: rtl;
then see what happens. I have some ideas on coding standards that would take
care of that. I'd like to see us get to the point where a section of the
maincss.css file can be uncommented to switch the entire UI from ltr to rtl.
Okay, that's it for now. I'm going to hop off of this crusade for a few days so
I can go fix some patches I submitted to Jira.
Comments are encouraged and welcome.
-Adrian
/*
* Copyright 2001-2007 The Apache Software Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*/
/* This CSS file is used for all OFBiz applications EXCEPT ecommerce. */
/* See the "ecommain.css" file for ecommerce. */
/* ======================== */
/* ===== Color Scheme ===== */
/* ======================== */
/*
#000000 black
#FFFFFF white
#333333 dark gray/charcoal
#666666 dark greenish-gray
#999999 medium gray
#B4B0AA medium gray
#CCCCCC light gray
#dddddd light gray
#D4D0C8 silver
#000099 blue
#ff0000 red
#99CCFF light blue
#9999CC purple/violet
#1E3C66 dark blue
#ffff00 yellow
#5886C6 light blue
#003333 dark green
*/
/* =================================== */
/* ===== Default styles for ========== */
/* ===== unclassed HTML elements ===== */
/* =================================== */
A {
text-decoration: none;
}
A:hover {
text-decoration: underline;
}
BODY {
background: #D4D0C8;
direction: ltr;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 0px;
text-align: left;
text-decoration: none;
}
DIV {
border: none;
margin: 0;
padding: 0;
}
FORM {
margin: 0px;
}
INPUT {
background: #FFFFFF;
border: #999999 solid 1px;
font-size: 10px;
margin: 2px;
}
/* The "smallSubmit" class can be used to decorate links (A elements) and make them similar to form's buttons. */
INPUT[type="submit"], .smallSubmit {
background: #FFFFFF;
border: #999999 solid 1px;
color: #000099;
font-size: 10px;
font-weight: bold;
margin: 2px;
}
INPUT[type="submit"]:hover, .smallSubmit:hover {
color: #ff0000;
text-decoration: underline;
}
SELECT {
background: #FFFFFF;
border: #999999 solid 1px;
font-size: 10px;
margin: 2px;
}
UL {
margin-bottom: 0;
margin-top: 0;
}
H1 {
color: #000099;
font-size: 16px;
font-weight: bold;
margin: 0px;
}
H2 {
color: #000000;
font-size: 14px;
font-weight: bold;
margin: 0px;
}
H3 {
color: #000000;
font-size: 11px;
font-weight: bold;
margin: 0px;
}
TH, .tableheadtext {
color: #000000;
font-weight: bold;
}
/* ===================================== */
/* ===== <H> styles that can be ======== */
/* ===== applied to other elements ===== */
/* ===================================== */
.head1 {
color: #000099;
font-size: 16px;
font-weight: bold;
margin: 0px;
}
.head2 {
color: #000000;
font-size: 14px;
font-weight: bold;
margin: 0px;
}
.head3 {
color: #000000;
font-size: 11px;
font-weight: bold;
margin: 0px;
}
/* ============================== */
/* ===== Header Styles ========== */
/* ============================== */
.headerboxoutside {
background: #FFFFFF;
padding: 0;
}
.headerboxtop {
background: #FFFFFF;
border-color: #FFFFFF;
border-style: solid;
border-width: 1px 1px 0px 1px;
padding: 4px;
}
.headerboxbottom {
background: #FFFFFF;
border-color: #FFFFFF;
border-style: solid;
border-width: 0px 1px 1px 1px;
padding: 0;
}
.insideHeaderText {
color: #000000;
font-weight: bold;
}
A.insideHeaderLink {
color: #000099;
font-weight: bold;
}
A.insideHeaderLink:hover {
color: #000000;
}
.insideHeaderDisabled {
color: #666666;
font-weight: bold;
}
.headerCenter {
background: #B4B0AA;
color: #000000;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
}
A.headerCenter {
background: #D4D0C8;
color: #000099;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
}
A.headerCenter:hover {
background: #D4D0C8;
color: #000000;
}
.headerCenterSelected {
background: #D4D0C8;
color: #000000;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
}
.headerCompanyName {
color: #000099;
font-size: 16px;
font-weight: bold;
margin: 0px;
white-space: nowrap;
}
.headerCompanySubtitle {
color: #330099;
font-size: xx-small;
margin: 0px;
white-space: nowrap;
}
.headersmalltext {
color: #000000;
font-weight: bold;
}
A.headersmalllink {
color: #000099;
font-weight: bold;
}
A.headersmalllink:hover {
color: #ff0000;
}
HR.sepbar {
background: #999999;
border-width: 0px;
font-size: xx-small;
height: 1px;
width: 100%;
}
/* ================== */
/* Main appbar styles */
/* ================== */
.appbarleft {
/* the appbar container */
}
.mainblock {
/* selected tab */
background-color: #D4D0C8;
color: #000099;
font-size: 11px;
font-weight: bold;
text-align: center;
vertical-align: top;
}
.mainblock A {
color: #000099;
text-decoration: none;
}
.mainblock A:hover {
color: #000000;
}
.tabdownblock {
/* unselected tab */
background-color: #B4B0AA;
color: #000000;
font-size: 11px;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
.tabdownblock A {
color: #000000;
text-decoration: none;
}
.tabdownblock A:hover {
color: #000099;
}
.tabdowncenter {
background-image: url(/images/tabs/tab_down_fill.gif);
}
.tabdownleft {
background-image: url(/images/tabs/tab_down_left.gif);
}
.tabdownright {
background-image: url(/images/tabs/tab_down_right.gif);
}
.tabupcenter {
background-image: url(/images/tabs/tab_up_fill.gif);
}
.tabupleft {
background-image: url(/images/tabs/tab_up_left.gif);
}
.tabupright {
background-image: url(/images/tabs/tab_up_right.gif);
}
A.tablink, A.tablink:hover, A.tablinkselected, A.tablinkselected:hover {
/* unnecessary styles - should be deprecated */
}
A.tablink:hover, A.tablink:active, A.tablinkselected {
/* unnecessary styles - should be deprecated */
}
/* ====================================== */
/* ===== Outermost Container styles ===== */
/* ====================================== */
DIV.centerarea {
/* contains the app header and contentarea */
margin: 10px 10px 0px 10px;
}
DIV.contentarea {
/* the "work area" container */
background-color: #FFFFFF;
border: solid #000000 1px;
margin-top: 10px;
padding: 10px;
}
/* ===================================== */
/* ===== Application header styles ===== */
/* ===================================== */
.centerarea .row .col A, .centerarea .row .col-right A {
/* temporary hack - should use appheaderbtn class declared below */
color: #000099;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
}
.centerarea .row .col A:hover, .centerarea .row .col-right A:hover {
/* temporary hack - should use appheaderbtn class declared below */
background: #D4D0C8;
color: #000000;
}
.appheaderbtn A {
color: #000099;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
}
.appheaderbtn A:hover {
background: #D4D0C8;
color: #000000;
}
.headerButtonLeft, .headerButtonLeftSelected {
border-right: solid #ffffff 1px;
}
.headerButtonLeftSelected {
background: #D4D0C8;
}
.headerButtonRight, .headerButtonRightSelected {
border-left: solid #ffffff 1px;
}
.headerButtonRightSelected {
background: #D4D0C8;
}
.headerButtonLeft:hover {
/* unnecessary style - should be deprecated */
}
.headerButtonRight:hover {
/* unnecessary style - should be deprecated */
}
/* ================================== */
/* ===== Inner Container styles ===== */
/* ================================== */
DIV.screenlet {
background-color: #FFFFFF;
border: 1px solid #999999;
height: auto !important;
height: 1%
margin-bottom: 10px;
}
DIV.screenlet-header {
background-color: #000099;
height: auto !important;
height: 1%
padding: 1px 4px 3px 4px;
}
DIV.screenlet-body {
background-color: #FFFFFF;
height: auto !important;
height: 1%
padding: 4px;
}
.boxhead {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
margin: 0px;
}
.boxlink {
float:right;
}
DIV.boxtop {
background: #000099;
border: 0px solid #999999;
margin: 0 auto 0 auto;
padding-top: 1px 4px 1px 4px;
text-align: center;
}
DIV.boxhead-left {
color: #FFFFFF;
float: left;
font-weight: bold;
width: auto;
}
DIV.boxhead-fill {
color: #FFFFFF;
font-weight: bold;
text-align: center;
width: 0;
}
DIV.boxhead-right {
color: #FFFFFF;
float: right;
font-weight: bold;
width: auto;
}
.boxoutside {
background: #FFFFFF;
border: 1px solid #999999;
padding: 0px;
}
.boxtop {
background: #000099;
border: none;
margin: 0px;
padding: 1px 4px 1px 4px;
}
.boxbottom {
background: #FFFFFF;
border-color: #999999;
border-style: solid;
border-width: 0px 0px 0px 0px;
padding: 4px;
}
#column-container {
background-color: #FFFFFF;
margin: auto;
position: relative;
width: 100%;
}
#column-container .left {
float: left;
margin-right: 10px;
/* alt: position: absolute; top: 0px; left: 0px; */
width: 220px;
}
#column-container .right {
float: right;
margin-left: 10px;
width: 220px;
}
#column-container .leftonly {
margin-left: 230px;
width: auto;
}
#column-container .rightonly {
margin-right: 230px;
width: auto;
}
#column-container .center {
margin-left: 230px;
margin-right: 230px;
width: auto;
}
#column-container .nocolumns {
width: auto;
}
DIV.column-left-wide {
background-color: #CCCCCC;
border: black solid 2px;
float: left;
overflow: auto;
width: 300px;
}
/* ================================== */
/* ===== Small Container styles ===== */
/* ================================== */
DIV.row {
background-color: #B4B0AA;
margin: 0 auto 0 auto;
text-align: center;
}
DIV.col {
float: left;
width: auto;
}
DIV.col-fill {
font-weight: bold;
background-color: #B4B0AA;
color: #000099;
text-align: center;
width: 0;
}
DIV.col-right {
float: right;
width: auto;
}
DIV.endcolumns {
clear: both;
}
DIV.simple-right-small {
float: right;
width: 20px;
text-align: right;
}
DIV.simple-right-half {
float: right;
width: 50%;
text-align: right;
}
/* ======================== */
/* ===== Table styles ===== */
/* ======================== */
DIV.tabletexthidden {
visibility: hidden;
}
A.tabletext, DIV.tabletext, SPAN.tabletext, P.tabletext, .tabletext {
/* inherits default font properties */
}
A.tabletext:hover {
/* inherits default anchor properties */
}
.tabletext SPAN .buttontext, .buttontextdisabled {
background: #ffffff;
border: #999999 solid 1px;
font-size: 9px;
font-weight: bold;
margin: 1px;
padding: 1px 4px 1px 4px;
}
.tabletextright {
text-align: right;
}
.tabletextcenter {
text-align: center;
}
.tablebuttontext {
color: #1E3C66;
}
A.tableheadbutton {
color: #000000;
font-weight: bold;
}
A.tableheadbutton:hover {
color: #ff0000;
}
.viewOneTR1 {
background: #B4B0AA;
}
.viewOneTR2 {
background: #D4D0C8;
}
.viewManyHeaderTR {
background: #99CCFF;
}
.viewManyTR1 {
background: #D4D0C8;
}
.viewManyTR1 TD {
height: 15px;
valign: middle;
}
.viewManyTR2 {
background: #FFFFFF;
}
.viewManyTR2 TD {
height: 15px;
valign: middle;
}
/* ================================= */
/* ===== Tab/Button Bar Styles ===== */
/* ================================= */
.tabContainer {
background: #FFFFFF;
padding-top: 4px;
margin-bottom: 10px;
}
.tabContainer A {
border: solid #000099 1px;
font-weight: bold;
padding: 1px 5px 1px 5px;
text-decoration: none;
white-space: nowrap;
}
.tabContainer A:hover {
color: #FFFFFF;
}
.tabButton {
color: #000099;
background: #D4D0C8;
}
.tabButton:hover {
background: #000099;
}
.tabButtonSelected {
color: #FFFFFF;
background: #000099;
}
.tabButtonSelected:hover {
}
/* =================================================== */
/* Form layout styles to simulate a table-style layout */
/* =================================================== */
.formTableBordered {
/* Style For Form Widgets */
border: 1px solid #999999;
width: 100%;
}
.form-row {
clear: both;
padding-top: 2px;
}
.form-label {
float: left;
padding-top: 5px;
text-align: right;
width: 180px;
}
.form-field {
float: left;
margin-left: 10px;
text-align: left;
}
/* ============================== */
/* ===== Link/Button Styles ===== */
/* ============================== */
A.boxheadbutton {
color: #FFFFFF;
font-weight: bold;
margin: 0px;
}
A.boxheadbutton:hover {
color: #ff0000;
font-weight: bold;
}
.button {
background: #dddddd;
border: 2px outset #9999CC;
padding-left: 5px;
padding-right: 5px;
}
A.buttontext, .buttontextdisabled {
background: #ffffff;
border: 1px solid #999999;
font-weight: bold;
margin: 2px;
padding: 1px 4px 1px 4px;
}
A.buttontext {
color: #000099;
}
A.buttontext:hover {
color: #ff0000;
}
A.linktext {
color: #000099;
font-weight: bold;
}
A.linktext:hover {
color: #ff0000;
}
.buttontextdisabled {
color: #333333;
}
A.headerbuttontext {
color: #000099;
font-weight: bold;
}
A.headerbuttontext:hover {
color: #000000;
}
.submenutextinfo {
border-right: 1px solid #5886C6;
color: #ffffff;
font-size: 9px;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
}
.submenutext, A.submenutext, A.submenutext:visited {
border-right: 1px solid #5886C6;
color: #ffff00;
font-size: 9px;
font-weight: bold;
padding-left: 2px;
padding-right: 5px;
}
A.submenutext:hover {
color: #ffff00;
}
.submenutextdisabled, A.submenutextdisabled {
border-right: 1px solid #5886C6;
color: #CCCCCC;
font-size: 9px;
font-weight: bold;
padding-left: 2px;
padding-right: 5px;
}
A.submenutextdisabled:hover {
color: #ffff00;
font-weight: bold;
}
.submenutextinforight {
color: #ffffff;
font-size: 9px;
font-weight: bold;
padding-left: 2px;
}
.submenutextright, A.submenutextright {
color: #ffff00;
font-size: 9px;
font-weight: bold;
padding-left: 2px;
}
A.submenutextright:hover {
color: #ffff00;
}
.submenutextrightdisabled, A.submenutextrightdisabled {
color: #CCCCCC;
font-weight: bold;
padding-left: 2px;
}
A.submenutextrightdisabled:hover {
color: #ffff00;
}
A.lightbuttontext {
border: none;
color: #ffff00;
font-weight: bold;
}
A.lightbuttontext:hover {
color: #ffff00;
}
A.lightbuttontextsmall {
border: none;
color: #ffff00;
font-size: 8px;
font-weight: bold;
}
A.lightbuttontextsmall:hover {
color: #ffff00;
}
.lightbuttontextdisabled {
color: #CCCCCC;
font-weight: bold;
}
A.buttontextbig, .buttontextbigdisabled {
background: white;
border: #999999 solid 1px;
font-size: 15px;
font-weight: bold;
margin: 2px 2px 2px 2px;
padding: 1px 4px 1px 4px;
}
A.buttontextbig {
color: #000099;
}
.buttontextbigdisabled {
color: #CCCCCC;
}
A.buttontextbig:hover {
color: #ff0000;
}
.mediumSubmit, .largeSubmit, .loginButton {
background: white;
border: 1px solid #999999;
color: #000099;
font-size: 12px;
font-weight: bold;
margin: 2px;
}
.mediumSubmit:hover, .largeSubmit:hover, .loginButton:hover {
color: #ff0000;
}
.smallAltSubmit, .mediumAltSubmit, .largeAltSubmit {
/* inherits default font properties */
}
/* =============================== */
/* ===== Misc Content Styles ===== */
/* =============================== */
.endcolumns {
clear: both;
height: 0px;
visibility: hidden;
}
.info {
color: #000000;
margin: 0px;
}
DIV.graybox {
background: #CCCCCC;
border: 1px solid #000000;
font-weight: bold;
margin: 2px auto;
padding: 4px;
text-align: center;
width: auto;
}
.contenttext {
/* inherits default font properties */
}
A IMG.imageborder {
border: 1px solid #999999;
}
.errorMessage {
color: #ff0000;
font-weight: bold;
margin: 0px;
}
.eventMessage {
color: #000099;
font-weight: bold;
margin: 0px;
}
.ontab {
background: #000000;
border-style: inset;
border-width: 3px;
padding: 2px;
}
A.onlnk {
color: #FFFFFF;
font-weight: bold;
padding: 2px;
}
.offtab {
background: #CCCCCC;
border-style: outset;
border-width: 3px;
padding: 2px;
}
A.offlnk {
color: #000099;
font-weight: bold;
padding: 2px;
}
A.offlnk:hover {
color: #ff0000;
}
.areaheader {
background: #000000;
color: #FFFFFF;
font-weight: bold;
padding: 2px;
width: 100%;
}
.edittable {
border-color: #000000 #000000 #003333;
border-style: solid;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin
}
.editInputBox {
background: #FFFFFF;
border: 1px solid #999999;
margin: 2px;
}
.inputBox {
background: #FFFFFF;
border: #999999 solid 1px;
margin: 2px;
}
.selectBox {
background: #FFFFFF;
border: #999999 solid 1px;
margin: 2px;
}
.textAreaBox {
background: #FFFFFF;
border: #999999 solid 1px;
margin: 2px;
}
.radioButton {
background: #FFFFFF;
}
.checkBox {
background: #FFFFFF;
}
.basePrice {
color: #000000;
}
.normalPrice {
color: #00ff00;
}
.salePrice {
color: #ff0000;
}
.browsecategorytext {
color: #000099;
font-weight: bold;
text-indent: -10px;
}
A.browsecategorybutton {
color: #000099;
font-weight: bold;
}
A.browsecategorybutton:hover {
color: #000099;
}
.browsecategorybuttondisabled {
color: #333333;
font-weight: bold;
}
/* ===== Product Summary Styles ===== */
.product-prevnext {
text-align: right;
}
.productsummary-container {
border-top: #999 solid 1px;
margin-bottom: 5px;
margin-top: 5px;
}
.productsummary {
border-bottom: #999 solid 1px;
/* using min-height as an alternative to clear: both; because that, in some browsers, will clear the top-level columns and not just in this div (Mozilla based, namely) */
min-height: 60px;
overflow: auto;
padding: 5px;
position: relative;
}
.productsummary .smallimage {
float: left;
/* position: absolute; top: 5px; left: 5px; */
margin: 0px 5px 5px 0px;
}
.productsummary .smallimage img {
border: 1px solid #CCC;
height: 50px;
}
.productsummary .productbuy {
float: right;
margin: 5px;
text-align: right;
width: 130px;
}
.productsummary .productinfo {
/* margin-left: 60px; */
text-align: left;
}
/* ===== Product Detail Styles ===== */
#productdetail #long-description {
border-top: #999 solid 1px;
margin-top: 10px;
padding-top: 5px;
}
#productdetail #reviews {
border-top: #999 solid 1px;
margin-top: 10px;
padding-top: 5px;
}
#productdetail #associated-products {
border-top: #999 solid 1px;
margin-top: 10px;
padding-top: 5px;
}
.treeWrapper {
color: #000000;
background: #ffffff;
font-size: 16px;
font-weight: normal;
text-align: left;
margin-left: 12px;
margin-top: 2px;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
}
.lefthalf{
left: 0;
width: 49%;
height: 1%;
margin: 0% 1% 1% 0%;
float: left;
}
.righthalf {
float: right;
height: 1%;
width: 49%;
right: 0;
margin: 0 0 1% 1%;
}
.leftclear{
height:1%;
clear: left;
}
.bothclear{
height:1%;
clear: both;
}
.treewrapper {
margin-left: 10px;
}
.treeitem {
color: #0000ff;
font-size: 12px;
font-weight: bold;
border: #888888 solid 1px;
}
.whitearea {
background-color: #FFFFFF;
}
.blackarea {
background-color: #000000;
}
.apptitle {
background-color: #000099;
line-height: 2;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
display: block;
width: 100%;
}
/* ================================ */
/* ==== Styles For The Html Log === */
/* ================================ */
.DEBUG {
color: gray;
}
.WARN {
font-weight: bold;
color: blue;
}
.INFO{
color:green;
}
.ERROR {
font-weight: bold;
color: red;
border: 2px solid red;
}
