maincss.css file, part 2

[Adrian Crum]

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;
}

[Jacques Le Roux]

Adrian,

Impressing, I will add some comments for dealing with pixels in IE (from Zeldman's book)

Thanks for your work !

Jacques

----- Original Message -----
From: "Adrian Crum" <[hidden email]>
To: <[hidden email]>
Sent: Tuesday, January 16, 2007 7:54 PM
Subject: maincss.css file, part 2

> 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;
> }
>
>

[Jacques Le Roux]

Adrian,

As promised :

Problems : IE does not allow to resize fonts formatted in pixels. This causes problems in number of cases depending of screen
resolution, visual deficiency, etc.
http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
http://www.thenoodleincident.com/tutorials/box_lesson/font/ (a pretty complete abstract !)

Facts : IE has a 80% of market share. Micro$oft does not consider the problem above a bug (ie does not wan to fix it)

Solution :
In a first attemps I looked at http://www.dyn-web.com/dhtml/sizefont/index.php#examples which seemed a good solution (notes the + -
R blue buttons at left) but this a commercial package.
After I found this solution which seems to work well without bothering with specific zoom tool (smart, clear, concise :o) :
http://www.webmasterworld.com/forum83/8396.htm

Adrian would you mind create a Jira issue for this topic with your explanation and patch and this fix ?

TIA

Jacques

> Adrian,
>
> Impressing, I will add some comments for dealing with pixels in IE (from Zeldman's book)
>
> Thanks for your work !
>
> Jacques
>
> ----- Original Message -----
> From: "Adrian Crum" <[hidden email]>
> To: <[hidden email]>
> Sent: Tuesday, January 16, 2007 7:54 PM
> Subject: maincss.css file, part 2
>
>
> > 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;
> > }
> >
> >

[Adrian Crum]

Jacques,

Thank you very much for the research and links! As I mentioned in the original
email, we're not at the Jira patch stage yet. Right now I'm asking for
suggestions for CSS coding guidelines. Once those are established, THEN we will
approach the Jira patch issue.

So, based on your research another CSS coding guideline would be:

Avoid specifying font sizes in pixels. Doing so will cause resizing problems in
some browsers.

-Adrian

Jacques Le Roux wrote:

> Adrian,
>
> As promised :
>
> Problems : IE does not allow to resize fonts formatted in pixels. This causes problems in number of cases depending of screen
> resolution, visual deficiency, etc.
> http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
> http://www.thenoodleincident.com/tutorials/box_lesson/font/ (a pretty complete abstract !)
>
> Facts : IE has a 80% of market share. Micro$oft does not consider the problem above a bug (ie does not wan to fix it)
>
> Solution :
> In a first attemps I looked at http://www.dyn-web.com/dhtml/sizefont/index.php#examples which seemed a good solution (notes the + -
> R blue buttons at left) but this a commercial package.
> After I found this solution which seems to work well without bothering with specific zoom tool (smart, clear, concise :o) :
> http://www.webmasterworld.com/forum83/8396.htm
>
> Adrian would you mind create a Jira issue for this topic with your explanation and patch and this fix ?
>
> TIA
>
> Jacques

[Jacques Le Roux]

Adrian,

Did you read me ? ;o)

Actually AFAIK at this day there are *2 solutions* to fonts resize problem.

1. Todd Fahrner's : http://www.alistapart.com/stories/sizematters/ (btw this link was in
http://www.thenoodleincident.com/tutorials/box_lesson/font/ a pretty complete abstract ! ;o)
2. The one I proposed based on Pixel http://www.webmasterworld.com/forum83/8396.htm
Personnaly I prefer the 2d because it's smart, clear and  concise :o)

But you cant avoid font resize problem, even without using pixels...

An interesting book to read : http://www.zeldman.com/dwws/ (I only read the 1st edition in french it's a bit verbose but there are
plenty of ideas and tricks)

Remember : accessibility  concerns 15% of persons in a way or another... Who is not interested by 15% of market share ? And there
are more and more countries that edict law about that, for instance :
http://www.quirksmode.org/blog/archives/2007/01/new_dutch_acces.html
http://www.webstandards.org/2007/01/15/the-dutch-embrace-web-standards/

Jacques


From: "Adrian Crum" <[hidden email]>

> Jacques,
>
> Thank you very much for the research and links! As I mentioned in the original
> email, we're not at the Jira patch stage yet. Right now I'm asking for
> suggestions for CSS coding guidelines. Once those are established, THEN we will
> approach the Jira patch issue.
>
> So, based on your research another CSS coding guideline would be:
>
> Avoid specifying font sizes in pixels. Doing so will cause resizing problems in
> some browsers.
>
> -Adrian
>
> Jacques Le Roux wrote:
> > Adrian,
> >
> > As promised :
> >
> > Problems : IE does not allow to resize fonts formatted in pixels. This causes problems in number of cases depending of screen
> > resolution, visual deficiency, etc.
> > http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
> > http://www.thenoodleincident.com/tutorials/box_lesson/font/ (a pretty complete abstract !)
> >
> > Facts : IE has a 80% of market share. Micro$oft does not consider the problem above a bug (ie does not wan to fix it)
> >
> > Solution :
> > In a first attemps I looked at http://www.dyn-web.com/dhtml/sizefont/index.php#examples which seemed a good solution (notes the

+ -
> > R blue buttons at left) but this a commercial package.
> > After I found this solution which seems to work well without bothering with specific zoom tool (smart, clear, concise :o) :
> > http://www.webmasterworld.com/forum83/8396.htm
> >
> > Adrian would you mind create a Jira issue for this topic with your explanation and patch and this fix ?
> >
> > TIA
> >
> > Jacques

[Adrian Crum]

Yes, I read the articles. Chris's modified maincss.css file converted font sizes
to ems. I wanted to try it out, but you removed it from Jira before I could
download it.


Jacques Le Roux wrote:

> Adrian,
>
> Did you read me ? ;o)
>
> Actually AFAIK at this day there are *2 solutions* to fonts resize problem.
>
> 1. Todd Fahrner's : http://www.alistapart.com/stories/sizematters/ (btw this link was in
> http://www.thenoodleincident.com/tutorials/box_lesson/font/ a pretty complete abstract ! ;o)
> 2. The one I proposed based on Pixel http://www.webmasterworld.com/forum83/8396.htm
> Personnaly I prefer the 2d because it's smart, clear and  concise :o)
>
> But you cant avoid font resize problem, even without using pixels...
>
> An interesting book to read : http://www.zeldman.com/dwws/ (I only read the 1st edition in french it's a bit verbose but there are
> plenty of ideas and tricks)
>
> Remember : accessibility  concerns 15% of persons in a way or another... Who is not interested by 15% of market share ? And there
> are more and more countries that edict law about that, for instance :
> http://www.quirksmode.org/blog/archives/2007/01/new_dutch_acces.html
> http://www.webstandards.org/2007/01/15/the-dutch-embrace-web-standards/
>
> Jacques
>
>
> From: "Adrian Crum" <[hidden email]>
>
>>Jacques,
>>
>>Thank you very much for the research and links! As I mentioned in the original
>>email, we're not at the Jira patch stage yet. Right now I'm asking for
>>suggestions for CSS coding guidelines. Once those are established, THEN we will
>>approach the Jira patch issue.
>>
>>So, based on your research another CSS coding guideline would be:
>>
>>Avoid specifying font sizes in pixels. Doing so will cause resizing problems in
>>some browsers.
>>
>>-Adrian
>>
>>Jacques Le Roux wrote:
>>
>>>Adrian,
>>>
>>>As promised :
>>>
>>>Problems : IE does not allow to resize fonts formatted in pixels. This causes problems in number of cases depending of screen
>>>resolution, visual deficiency, etc.
>>>http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
>>>http://www.thenoodleincident.com/tutorials/box_lesson/font/ (a pretty complete abstract !)
>>>
>>>Facts : IE has a 80% of market share. Micro$oft does not consider the problem above a bug (ie does not wan to fix it)
>>>
>>>Solution :
>>>In a first attemps I looked at http://www.dyn-web.com/dhtml/sizefont/index.php#examples which seemed a good solution (notes the
>
> + -
>
>>>R blue buttons at left) but this a commercial package.
>>>After I found this solution which seems to work well without bothering with specific zoom tool (smart, clear, concise :o) :
>>>http://www.webmasterworld.com/forum83/8396.htm
>>>
>>>Adrian would you mind create a Jira issue for this topic with your explanation and patch and this fix ?
>>>
>>>TIA
>>>
>>>Jacques
>
>
>

[Adrian Crum]

I got my CSS books yesterday and I stayed up all night reading them. *yawn*
*blink blink*

I ended up getting CSS Mastery by Andy Budd, and Transcending CSS by Andy
Clarke. Both books received a lot of good reviews from readers and they turned
out to be excellent choices. After reading them, I concluded that we were pretty
much on the right track with the CSS coding guideline suggestions made so far.
There were a couple of concepts introduced in the books that I would like to add
to the list.

Now that I feel adequately educated, I'm ready to help move the CSS effort
along. For starters, I really, REALLY need a committer to look at Jira issue
OFBIZ-605 (https://issues.apache.org/jira/browse/OFBIZ-605) and get it
committed. Mailing list members who objected to the idea of a single stylesheet
will have their "day in court" again in the future. I'd like to see another
discussion of splitting the styles up once the consolidated style sheet is
refined and complete.

Chris Howe put the "drastically changed" maincss.css file into a new Jira issue
(https://issues.apache.org/jira/browse/OFBIZ-633). That Jira issue is being used
as a type of sandbox to try out CSS ideas. Once the techniques in that issue are
proven project-worthy, we can then go back to the existing code and make
incremental changes to OFBiz to get those techniques implemented in the main
project. To restate: OFBIZ-633 is experimental - it is NOT intended to be
included in the project as-is.

I noticed there has been some activity along these lines in Jira. Some of it is
pretty old. The CSS effort as a whole seems to be floundering because of lack of
direction or cohesion. There are plenty of contributors taking a stab at this,
but some of the work is incomplete or incorrectly implemented. So, I'd like to
volunteer as a coordinator. I can set up an umbrella Jira issue that links to
the existing and future sub-tasks. I'd like to set up a web page of CSS coding
guidelines (that we've all agreed on) so that the contributors are all working
toward the same goal.

Speaking of CSS coding guidelines, Transcending CSS recommends keeping layout
details out of CSS class names and IDs. I like that idea. Class names/IDs like
"TopLeftColumn" or "BottomRightTabbar" imply layout. Names/IDs should describe
the content they style - not where they will be placed.

So, if there are no objections, I'd like to start down this path:

1. Put a CSS coding guidelines RFC on the dev mailing list. Wait a few days for
comments.
2. Put the agreed-upon guidelines on a web page (umbrella Jira issue or Wiki page).
3. Create the umbrella CSS effort Jira issue. Link to existing CSS issues as
sub-tasks. Create new sub tasks.
4. Monitor progress, keep things moving in the right direction.
5. Coordinate with committers to get tested code back into the project.

I'm committed to seeing this through until it is done.

Let me know what you think.

-Adrian

[cjhowe]

Just to toss one more potential "standard" for id and
class for OFBiz, every screen that is called from the
controller should have a unique id for the body tag.
This will make it easy to uniquely identify elements
for specific pages, as necessary.  I came across that
the other day somewhere and it seemed so simply
obvious that I was surprised I hadn't come across it
before.


--- Adrian Crum <[hidden email]> wrote:

> I got my CSS books yesterday and I stayed up all
> night reading them. *yawn*
> *blink blink*
>
> I ended up getting CSS Mastery by Andy Budd, and
> Transcending CSS by Andy
> Clarke. Both books received a lot of good reviews
> from readers and they turned
> out to be excellent choices. After reading them, I
> concluded that we were pretty
> much on the right track with the CSS coding
> guideline suggestions made so far.
> There were a couple of concepts introduced in the
> books that I would like to add
> to the list.
>
> Now that I feel adequately educated, I'm ready to
> help move the CSS effort
> along. For starters, I really, REALLY need a
> committer to look at Jira issue
> OFBIZ-605
> (https://issues.apache.org/jira/browse/OFBIZ-605)
> and get it
> committed. Mailing list members who objected to the
> idea of a single stylesheet
> will have their "day in court" again in the future.
> I'd like to see another
> discussion of splitting the styles up once the
> consolidated style sheet is
> refined and complete.
>
> Chris Howe put the "drastically changed" maincss.css
> file into a new Jira issue
> (https://issues.apache.org/jira/browse/OFBIZ-633).
> That Jira issue is being used
> as a type of sandbox to try out CSS ideas. Once the
> techniques in that issue are
> proven project-worthy, we can then go back to the
> existing code and make
> incremental changes to OFBiz to get those techniques
> implemented in the main
> project. To restate: OFBIZ-633 is experimental - it
> is NOT intended to be
> included in the project as-is.
>
> I noticed there has been some activity along these
> lines in Jira. Some of it is
> pretty old. The CSS effort as a whole seems to be
> floundering because of lack of
> direction or cohesion. There are plenty of
> contributors taking a stab at this,
> but some of the work is incomplete or incorrectly
> implemented. So, I'd like to
> volunteer as a coordinator. I can set up an umbrella
> Jira issue that links to
> the existing and future sub-tasks. I'd like to set
> up a web page of CSS coding
> guidelines (that we've all agreed on) so that the
> contributors are all working
> toward the same goal.
>
> Speaking of CSS coding guidelines, Transcending CSS
> recommends keeping layout
> details out of CSS class names and IDs. I like that
> idea. Class names/IDs like
> "TopLeftColumn" or "BottomRightTabbar" imply layout.
> Names/IDs should describe
> the content they style - not where they will be
> placed.
>
> So, if there are no objections, I'd like to start
> down this path:
>
> 1. Put a CSS coding guidelines RFC on the dev
> mailing list. Wait a few days for
> comments.
> 2. Put the agreed-upon guidelines on a web page
> (umbrella Jira issue or Wiki page).
> 3. Create the umbrella CSS effort Jira issue. Link
> to existing CSS issues as
> sub-tasks. Create new sub tasks.
> 4. Monitor progress, keep things moving in the right
> direction.
> 5. Coordinate with committers to get tested code
> back into the project.
>
> I'm committed to seeing this through until it is
> done.
>
> Let me know what you think.
>
> -Adrian
>

[Guido Amarilla]

This css should be tested in different languages. I found that there
are layout problems in some languages probably because English is a
language with very short words, compared to other languages, like
italian, french or spanish (I think german is the one with the longest
words). These last three languages are between the most completes in
languages properties files.
I use OFBiz in spanish, and probably will find this kind of issues in
my language. I am doing my best to find shorter words whith similar
meanings when that is a problem.

Guido



2007/1/18, Chris Howe <[hidden email]>:

> Just to toss one more potential "standard" for id and
> class for OFBiz, every screen that is called from the
> controller should have a unique id for the body tag.
> This will make it easy to uniquely identify elements
> for specific pages, as necessary.  I came across that
> the other day somewhere and it seemed so simply
> obvious that I was surprised I hadn't come across it
> before.
>
>
> --- Adrian Crum <[hidden email]> wrote:
>
> > I got my CSS books yesterday and I stayed up all
> > night reading them. *yawn*
> > *blink blink*
> >
> > I ended up getting CSS Mastery by Andy Budd, and
> > Transcending CSS by Andy
> > Clarke. Both books received a lot of good reviews
> > from readers and they turned
> > out to be excellent choices. After reading them, I
> > concluded that we were pretty
> > much on the right track with the CSS coding
> > guideline suggestions made so far.
> > There were a couple of concepts introduced in the
> > books that I would like to add
> > to the list.
> >
> > Now that I feel adequately educated, I'm ready to
> > help move the CSS effort
> > along. For starters, I really, REALLY need a
> > committer to look at Jira issue
> > OFBIZ-605
> > (https://issues.apache.org/jira/browse/OFBIZ-605)
> > and get it
> > committed. Mailing list members who objected to the
> > idea of a single stylesheet
> > will have their "day in court" again in the future.
> > I'd like to see another
> > discussion of splitting the styles up once the
> > consolidated style sheet is
> > refined and complete.
> >
> > Chris Howe put the "drastically changed" maincss.css
> > file into a new Jira issue
> > (https://issues.apache.org/jira/browse/OFBIZ-633).
> > That Jira issue is being used
> > as a type of sandbox to try out CSS ideas. Once the
> > techniques in that issue are
> > proven project-worthy, we can then go back to the
> > existing code and make
> > incremental changes to OFBiz to get those techniques
> > implemented in the main
> > project. To restate: OFBIZ-633 is experimental - it
> > is NOT intended to be
> > included in the project as-is.
> >
> > I noticed there has been some activity along these
> > lines in Jira. Some of it is
> > pretty old. The CSS effort as a whole seems to be
> > floundering because of lack of
> > direction or cohesion. There are plenty of
> > contributors taking a stab at this,
> > but some of the work is incomplete or incorrectly
> > implemented. So, I'd like to
> > volunteer as a coordinator. I can set up an umbrella
> > Jira issue that links to
> > the existing and future sub-tasks. I'd like to set
> > up a web page of CSS coding
> > guidelines (that we've all agreed on) so that the
> > contributors are all working
> > toward the same goal.
> >
> > Speaking of CSS coding guidelines, Transcending CSS
> > recommends keeping layout
> > details out of CSS class names and IDs. I like that
> > idea. Class names/IDs like
> > "TopLeftColumn" or "BottomRightTabbar" imply layout.
> > Names/IDs should describe
> > the content they style - not where they will be
> > placed.
> >
> > So, if there are no objections, I'd like to start
> > down this path:
> >
> > 1. Put a CSS coding guidelines RFC on the dev
> > mailing list. Wait a few days for
> > comments.
> > 2. Put the agreed-upon guidelines on a web page
> > (umbrella Jira issue or Wiki page).
> > 3. Create the umbrella CSS effort Jira issue. Link
> > to existing CSS issues as
> > sub-tasks. Create new sub tasks.
> > 4. Monitor progress, keep things moving in the right
> > direction.
> > 5. Coordinate with committers to get tested code
> > back into the project.
> >
> > I'm committed to seeing this through until it is
> > done.
> >
> > Let me know what you think.
> >
> > -Adrian
> >
>
>

--
Guido Amarilla

[David E Jones]

On Jan 18, 2007, at 10:07 AM, Adrian Crum wrote:

> I got my CSS books yesterday and I stayed up all night reading  
> them. *yawn* *blink blink*
>
> I ended up getting CSS Mastery by Andy Budd, and Transcending CSS  
> by Andy Clarke. Both books received a lot of good reviews from  
> readers and they turned out to be excellent choices. After reading  
> them, I concluded that we were pretty much on the right track with  
> the CSS coding guideline suggestions made so far. There were a  
> couple of concepts introduced in the books that I would like to add  
> to the list.
>
> Now that I feel adequately educated, I'm ready to help move the CSS  
> effort along. For starters, I really, REALLY need a committer to  
> look at Jira issue OFBIZ-605 (https://issues.apache.org/jira/browse/ 
> OFBIZ-605) and get it committed. Mailing list members who objected  
> to the idea of a single stylesheet will have their "day in court"  
> again in the future. I'd like to see another discussion of  
> splitting the styles up once the consolidated style sheet is  
> refined and complete.

I just took a peak at this again and it's looks fine, so it is now in  
SVN.

I'd love to commit to helping out, and I think it's great that you're  
asking for this support from someone. Unfortunately I just can't do  
it right now... my low billable hours are starting to get noticed by  
my partners... ;) I'll certainly keep an eye on this and help out  
where I can. If things calm down for us a bit at Hotwax I and other  
will definitely get involved, we've been talking about doing  
something with this for a couple of months now, and Tim Ruppert is  
especially enthusiastic about getting this done.

As a reasonable expectation: let's see what we can do to establish a  
direction starting right away, and then see how far we get, and then  
at the developers conference try to knock out some good stuff. There  
are already some really talented front-end people with good HTML and  
CSS experience that have "registered" for the conference.

At the dev conference we'd like to have one "champion" for each  
objective. Would you be interested in playing that role for this? The  
stuff you're describing below is actually a pretty good description  
of what a champion would do for this sort of thing (according to my  
imagination... ;) ).

> Chris Howe put the "drastically changed" maincss.css file into a  
> new Jira issue (https://issues.apache.org/jira/browse/OFBIZ-633).  
> That Jira issue is being used as a type of sandbox to try out CSS  
> ideas. Once the techniques in that issue are proven project-worthy,  
> we can then go back to the existing code and make incremental  
> changes to OFBiz to get those techniques implemented in the main  
> project. To restate: OFBIZ-633 is experimental - it is NOT intended  
> to be included in the project as-is.
>
> I noticed there has been some activity along these lines in Jira.  
> Some of it is pretty old. The CSS effort as a whole seems to be  
> floundering because of lack of direction or cohesion. There are  
> plenty of contributors taking a stab at this, but some of the work  
> is incomplete or incorrectly implemented. So, I'd like to volunteer  
> as a coordinator. I can set up an umbrella Jira issue that links to  
> the existing and future sub-tasks. I'd like to set up a web page of  
> CSS coding guidelines (that we've all agreed on) so that the  
> contributors are all working toward the same goal.
>
> Speaking of CSS coding guidelines, Transcending CSS recommends  
> keeping layout details out of CSS class names and IDs. I like that  
> idea. Class names/IDs like "TopLeftColumn" or "BottomRightTabbar"  
> imply layout. Names/IDs should describe the content they style -  
> not where they will be placed.
>
> So, if there are no objections, I'd like to start down this path:
>
> 1. Put a CSS coding guidelines RFC on the dev mailing list. Wait a  
> few days for comments.
> 2. Put the agreed-upon guidelines on a web page (umbrella Jira  
> issue or Wiki page).
> 3. Create the umbrella CSS effort Jira issue. Link to existing CSS  
> issues as sub-tasks. Create new sub tasks.
> 4. Monitor progress, keep things moving in the right direction.
> 5. Coordinate with committers to get tested code back into the  
> project.
>
> I'm committed to seeing this through until it is done.
>
> Let me know what you think.

A CSS/HTML best practices document would be a great resource and I  
agree this would help a lot. This approach to create it sounds good.  
If you could throw out a draft to this mailing list I'm guessing  
various people will review and respond. It might be good to actually  
start with a page on the docs.ofbiz.org wiki space (OFBIZ space), and  
then people can feedback there and we'll have a revision history and  
such. Once that settles down and we want to "canonize" it, I or  
someone else with permissions there can move the page to the  
"OFBADMIN" space where all of the other best practices and such  
documents live.

-David

[Adrian Crum]

David E. Jones wrote:
> I just took a peak at this again and it's looks fine, so it is now in  SVN.

Thank you very much!

> I'd love to commit to helping out, and I think it's great that you're  
> asking for this support from someone. Unfortunately I just can't do  it
> right now... my low billable hours are starting to get noticed by  my
> partners... ;) I'll certainly keep an eye on this and help out  where I
> can. If things calm down for us a bit at Hotwax I and other  will
> definitely get involved, we've been talking about doing  something with
> this for a couple of months now, and Tim Ruppert is  especially
> enthusiastic about getting this done.

Understood. I looked through the related Jira issues and it seems there are
quite a few committers interested in this kind of work, so I'm sure there will
be enough people to get it done. Having you "peek in" from time to time would be
helpful.

> As a reasonable expectation: let's see what we can do to establish a  
> direction starting right away, and then see how far we get, and then  at
> the developers conference try to knock out some good stuff. There  are
> already some really talented front-end people with good HTML and  CSS
> experience that have "registered" for the conference.

Actually, that was my motivation to push hard on this now. I thought it would be
helpful to have some groundwork laid before the conference.

> At the dev conference we'd like to have one "champion" for each  
> objective. Would you be interested in playing that role for this? The  
> stuff you're describing below is actually a pretty good description  of
> what a champion would do for this sort of thing (according to my  
> imagination... ;) ).

Yeah, sure. That would be great.

> A CSS/HTML best practices document would be a great resource and I  
> agree this would help a lot. This approach to create it sounds good.  If
> you could throw out a draft to this mailing list I'm guessing  various
> people will review and respond. It might be good to actually  start with
> a page on the docs.ofbiz.org wiki space (OFBIZ space), and  then people
> can feedback there and we'll have a revision history and  such. Once
> that settles down and we want to "canonize" it, I or  someone else with
> permissions there can move the page to the  "OFBADMIN" space where all
> of the other best practices and such  documents live.

I'll work on a draft and get it on the list this weekend.