I've spent the last two days consolidating the two main css files and cleaning
up the target file. There were a lot of duplicate and unnecessary assignments. I
also found font sizes expressed in points AND pixels, so I changed them all to
pixels. I also changed color names to color values - so that a simple global
replacement of color values will change the look of the site.
So far, the new maincss.css file renders almost exactly the same. The only
difference seems to be in INPUT box widths.
I have attached what I've done so far - if you'd like to take a look at it.
Thanks for the book recommendation, btw. I'll definitely pick up a book or two.
So far I've been able to answer all of my questions with online CSS references.
David E. Jones wrote:
Adrian,
I see, no problem. Yeah, it was a project started and never finished!
You'll probably also notice that there is still some table-based
formatting on the productdetail page that is a bit evil (well, and
ugly!) and needs to be converted to a CSS-based layout like much of the
other stuff was.
-David
On Jan 12, 2007, at 2:56 PM, Adrian Crum wrote:
David,
Thanks for the reply! I understand completely what the ID attribute
is for. I was questioning why it was done differently than the rest
of the file.
David E. Jones wrote:
This was part of the experimentation with the Zen CSS Garden way of
doing CSS. Using id attributes to mark regions and styling
implicitly is the way we want to go in the future. If you're
planning on working on CSS stuff and you haven't read through The
Zen of CSS Design, I highly recommend it. Really cool stuff. There
is a link to the book on the Docs & Books page on ofbiz.apache.org.
-David
On Jan 12, 2007, at 2:42 PM, Adrian Crum wrote:
In the maincss.css file, Just below the comment
/* ===== Product Detail Styles ===== */
are six css classes defined using IDs instead of class names. Is
there a reason for that?
/*
* Copyright 2001-2006 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. */
/* ===== General Styles ===== */
BODY {
font-size: 10px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #D4D0C8;
margin: 0px;
}
FORM {
margin: 0px;
}
INPUT {
background: #FFFFFF;
font-size: 10px;
border: #999999 solid 1px;
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 {
font-size: 10px;
font-weight: bold;
color: #000099;
background: #FFFFFF;
border: #999999 solid 1px;
margin: 2px;
}
INPUT[type="submit"]:hover, .smallSubmit:hover {
color: #ff0000;
text-decoration: underline;
}
SELECT {
background: #FFFFFF;
font-size: 10px;
border: #999999 solid 1px;
margin: 2px;
}
UL {
margin-top: 0;
margin-bottom: 0;
}
H1 {
margin: 0px;
font-size: 16px;
font-weight: bold;
color: #000099;
}
H2 {
margin: 0px;
font-size: 14px;
font-weight: bold;
color: #000000;
}
H3 {
margin: 0px;
font-size: 11px;
font-weight: bold;
color: #000000;
}
TH, .tableheadtext {
font-weight: bold;
color: #000000;
}
A {
text-decoration: none;
}
A:hover {
text-decoration: underline;
}
.endcolumns {
clear: both;
height: 0px;
visibility: hidden;
}
.head1 {
margin: 0px;
font-size: 16px;
font-weight: bold;
color: #000099;
}
.head2 {
margin: 0px;
font-size: 14px;
font-weight: bold;
color: #000000;
}
.head3 {
margin: 0px;
font-size: 11px;
font-weight: bold;
color: #000000;
}
.info {
margin: 0px;
color: #000000;
}
DIV.graybox {
font-weight: bold;
background: #CCCCCC;
border: 1px solid #000000;
text-align: center;
margin: 2px auto;
width: auto;
padding: 4px;
}
DIV.tabletexthidden {
visibility: hidden;
}
A.tabletext, DIV.tabletext, SPAN.tabletext, P.tabletext, .tabletext {
/* inherits default font properties */
}
A.tabletext:hover {
text-decoration: underline;
}
.tabletextright {
text-align: right;
}
.tabletextcenter {
text-align: center;
}
.tablebuttontext {
color: #1E3C66;
}
.contenttext {
}
.headerboxoutside {
background: #FFFFFF;
padding: 0;
}
.headerboxtop {
background: #FFFFFF;
padding: 4px;
border-color: #FFFFFF;
border-style: solid;
border-width: 1px 1px 0px 1px;
}
.headerboxbottom {
background: #FFFFFF;
padding: 0;
border-color: #FFFFFF;
border-style: solid;
border-width: 0px 1px 1px 1px;
}
.boxhead {
margin: 0px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
.boxlink {
float:right;
}
DIV.boxtop {
margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
padding: 0; text-align: center;
background: #000099;
padding-top: 1px;
padding-bottom: 1px;
padding-right: 4px;
padding-left: 4px;
border-color: #999999;
border-style: solid;
border-width: 0px 0px 0px 0px;
}
DIV.boxhead-left {
border: none; float: left; margin: 0; padding: 0; width: auto;
font-weight: bold;
color: #FFFFFF;
}
DIV.boxhead-fill {
margin: 0; padding: 0; border: none; text-align: center; width: 0;
font-weight: bold;
color: #FFFFFF;
}
DIV.boxhead-right {
border: none; float: right; margin: 0; padding: 0; width: auto;
font-weight: bold;
color: #FFFFFF;
}
A.boxheadbutton {
margin: 0px;
font-weight: bold;
color: #FFFFFF;
}
A.boxheadbutton:hover {
font-weight: bold;
color: #ff0000;
}
.boxoutside {
background: #FFFFFF;
padding: 0px;
border-color: #999999;
border-style: solid;
border-width: 1px 1px 1px 1px;
}
.boxtop {
background: #000099;
padding-top: 1px;
padding-bottom: 1px;
padding-right: 4px;
padding-left: 4px;
border-color: #999999;
border-style: solid;
border-width: 0px 0px 0px 0px;
}
.boxbottom {
background: #FFFFFF;
padding: 4px;
border-color: #999999;
border-style: solid;
border-width: 0px 0px 0px 0px;
}
.button {
border-style: outset; border-color: #9999CC; border-width: 2px;
background: #dddddd;
padding-right: 5px; padding-left: 5px;
}
/* ===== Tab/Button Bar Styles ===== */
.tabContainer {
background: #FFFFFF;
padding-top: 4px;
margin-bottom: 10px;
}
A.tabButton {
font-weight: bold;
color: #000099;
background: #D4D0C8;
padding-right: 5px;
padding-left: 5px;
padding-top: 1px;
padding-bottom: 1px;
white-space: nowrap;
border: solid #000099 1px;
}
A.tabButton:hover {
color: #FFFFFF;
background: #000099;
border: solid #000099 1px;
}
A.tabButtonSelected {
font-weight: bold;
color: #FFFFFF;
background: #000099;
padding-right: 5px;
padding-left: 5px;
padding-top: 1px;
padding-bottom: 1px;
white-space: nowrap;
border: solid #000099 1px;
}
A.tabButtonSelected:hover {
color: #FFFFFF;
border: solid #000099 1px;
}
A.tableheadbutton {
font-weight: bold;
color: #000000;
}
A.tableheadbutton:hover {
font-weight: bold;
text-decoration: underline;
color: #ff0000;
}
.browsecategorytext {
font-weight: bold;
color: #000099;
text-indent: -10px;
}
A.browsecategorybutton {
font-weight: bold;
color: #000099;
}
A.browsecategorybutton:hover {
color: #000099;
text-decoration: underline;
}
.browsecategorybuttondisabled {
font-weight: bold;
color: #333333;
}
A.buttontext, .buttontextdisabled {
font-weight: bold;
background: white;
border: #999999 solid 1px;
margin: 2px 2px 2px 2px;
padding: 1px 4px 1px 4px;
}
A.buttontext {
color: #000099;
}
A.buttontext:hover {
color: #ff0000;
text-decoration: underline;
}
A.linktext {
font-weight: bold;
color: #000099;
}
A.linktext:hover {
color: #ff0000;
text-decoration: underline;
}
.buttontextdisabled {
color: #333333;
}
A.headerbuttontext {
font-weight: bold;
color: #000099;
}
A.headerbuttontext:hover {
color: #000000;
text-decoration: underline;
}
.submenutextinfo {
font-weight: bold;
color: #ffffff;
padding-left: 5px;
padding-right: 5px;
border-right: 1px solid #5886C6
}
.submenutext, A.submenutext, A.submenutext:visited {
font-weight: bold;
color: yellow;
padding-left: 2px;
padding-right: 5px;
border-right: 1px solid #5886C6
}
A.submenutext:hover {
color: yellow;
text-decoration: underline;
}
.submenutextdisabled, A.submenutextdisabled {
font-weight: bold;
color: #CCCCCC;
padding-left: 2px;
padding-right: 5px;
border-right: 1px solid #5886C6
}
A.submenutextdisabled:hover {
font-weight: bold;
text-decoration: underline;
color: yellow;
}
.submenutextinforight {
font-weight: bold;
color: #ffffff;
padding-left: 2px;
}
.submenutextright, A.submenutextright {
font-weight: bold;
color: yellow;
padding-left: 2px;
}
A.submenutextright:hover {
color: yellow;
text-decoration: underline;
}
.submenutextrightdisabled, A.submenutextrightdisabled {
font-weight: bold;
color: #CCCCCC;
padding-left: 2px;
}
A.submenutextrightdisabled:hover {
text-decoration: underline;
color: yellow;
}
A.lightbuttontext {
font-weight: bold;
color: yellow;
border: none;
}
A.lightbuttontext:hover {
color: yellow;
text-decoration: underline;
}
A.lightbuttontextsmall {
font-size: 8px;
font-weight: bold;
color: yellow;
border: none;
}
A.lightbuttontextsmall:hover {
color: yellow;
text-decoration: underline;
}
.lightbuttontextdisabled {
font-weight: bold;
color: #CCCCCC;
}
A.buttontextbig, .buttontextbigdisabled {
font-size: 15px;
font-weight: bold;
background: white;
border: #999999 solid 1px;
margin: 2px 2px 2px 2px;
padding: 1px 4px 1px 4px;
}
A.buttontextbig {
color: #000099;
}
.buttontextbigdisabled {
color: #CCCCCC;
}
A.buttontextbig:hover {
color: #ff0000;
text-decoration: underline;
}
A IMG.imageborder {
border-style: solid;
border-width: 1px;
border-color: #999999;
}
.headerButtonLeft {
font-weight: bold;
color: #000099;
background: #B4B0AA;
border-right: solid white 1px;
padding-right: 10px;
padding-left: 10px;
}
.headerButtonLeft:hover {
background: #D4D0C8;
color: #000000;
text-decoration: underline;
}
.headerButtonLeftSelected {
font-weight: bold;
color: #000099;
background: #D4D0C8;
border-right: solid white 1px;
padding-right: 10px;
padding-left: 10px;
}
.headerButtonRight {
font-weight: bold;
color: #000099;
background: #B4B0AA;
border-left: solid white 1px;
padding-right: 10px;
padding-left: 10px;
text-align: right;
}
.headerButtonRight:hover {
background: #D4D0C8;
color: #000000;
text-decoration: underline;
}
.headerButtonRightSelected {
font-weight: bold;
color: #000099;
background: #D4D0C8;
border-left: solid white 1px;
padding-right: 10px;
padding-left: 10px;
}
.headerCenter {
background: #B4B0AA;
padding-right: 10px;
padding-left: 10px;
font-weight: bold;
color: #000000;
}
A.headerCenter {
font-weight: bold;
color: #000099;
background: #D4D0C8;
padding-right: 10px;
padding-left: 10px;
}
A.headerCenter:hover {
background: #D4D0C8;
color: #000000;
text-decoration: underline;
}
.headerCenterSelected {
background: #D4D0C8;
padding-right: 10px;
padding-left: 10px;
font-weight: bold;
color: #000000;
}
.headerCompanyName {
margin: 0px;
font-size: 16px;
font-weight: bold;
color: #000099;
white-space: nowrap;
}
.headerCompanySubtitle {
margin: 0px;
font-size: xx-small;
color: #330099;
white-space: nowrap;
}
.insideHeaderText {
font-weight: bold;
color: #000000;
}
A.insideHeaderLink {
font-weight: bold;
color: #000099;
}
A.insideHeaderLink:hover {
color: #000000;
text-decoration: underline;
}
.insideHeaderDisabled {
font-weight: bold;
color: #666666;
}
.headersmalltext {
font-weight: bold;
color: #000000;
}
a.headersmalllink {
font-weight: bold;
color: #000099;
}
a.headersmalllink:hover {
color: #ff0000;
}
HR.sepbar {
font-size: xx-small;
width: 100%;
height: 1px;
background: #999999;
border-width: 0px;
}
.errorMessage {
margin: 0px;
font-weight: bold;
color: #ff0000;
}
.eventMessage {
margin: 0px;
font-weight: bold;
color: #000099;
}
.ontab {
background: black;
padding: 2px;
border-style: inset;
border-width: 3px;
}
a.onlnk {
font-weight: bold;
color: #FFFFFF;
padding: 2px;
}
.offtab {
background: #CCCCCC;
padding: 2px;
border-style: outset;
border-width: 3px;
}
a.offlnk {
font-weight: bold;
color: #000099;
padding: 2px;
}
a.offlnk:hover {
color: #ff0000;
}
.areaheader {
font-weight: bold;
color: #FFFFFF;
width: 100%;
background: black;
padding: 2px;
}
.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
}
.viewOneTR1 {
background: #B4B0AA;
}
.viewOneTR2 {
background: #D4D0C8;
}
.viewManyHeaderTR {
background: #99CCFF;
}
.viewManyTR1 {
background: #D4D0C8;
}
.viewManyTR2 {
background: #FFFFFF;
}
.editInputBox {
background: #FFFFFF;
border: #999999 solid 1px;
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;
}
.mediumSubmit,.largeSubmit,.loginButton {
font-size: 12px;
font-weight: bold;
color: #000099;
background: white;
border: #999999 solid 1px;
margin: 2px;
}
.mediumSubmit:hover,.largeSubmit:hover,.loginButton:hover {
color: #ff0000;
text-decoration: underline;
}
.smallAltSubmit,.mediumAltSubmit,.largeAltSubmit {
/* inherits default font properties */
}
.basePrice {
color: #000000;
}
.normalPrice {
color: green;
}
.salePrice {
color: #ff0000;
}
/* Form layout styles to simulate a table-style layout */
.form-row {
clear: both;
padding-top: 2px;
}
.form-label {
float: left;
width: 180px;
text-align: right;
padding-top: 5px;
}
.form-field {
float: left;
margin-left: 10px;
text-align: left;
}
/* ===== Product Summary Styles ===== */
.product-prevnext {
text-align: right;
}
.productsummary-container {
margin-top: 5px;
margin-bottom: 5px;
border-top: #999 solid 1px;
}
.productsummary {
position: relative;
padding: 5px;
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;
}
.productsummary .smallimage {
float: left;
/* position: absolute; top: 5px; left: 5px; */
margin: 0px 5px 5px 0px;
}
.productsummary .smallimage img {
border: #CCC solid 1px;
height: 50px;
}
.productsummary .productbuy {
float: right;
width: 130px;
margin: 5px;
text-align: right;
}
.productsummary .productinfo {
/* margin-left: 60px; */
text-align: left;
}
/* ===== Product Detail Styles ===== */
#productdetail #long-description {
margin-top: 10px;
padding-top: 5px;
border-top: #999 solid 1px;
}
#productdetail #reviews {
margin-top: 10px;
padding-top: 5px;
border-top: #999 solid 1px;
}
#productdetail #associated-products {
margin-top: 10px;
padding-top: 5px;
border-top: #999 solid 1px;
}
.treeWrapper {
color: #000000;
background: #ffffff;
font-size: 16px;
font-weight: normal;
text-align: left;
margin-left: 12px;
margin-top: 2px;
border-top: 1px solid black;
border-left: 1px solid black;
}
.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;
}
/* ==== Styles For Form Widgets === */
.formTableBordered {
width: 100%;
border: 1px solid #999999;
}
/* ==== 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;
}
/* ==== Styles copied from tabstyles.css === */
.treewrapper {
margin-left: 10px;
}
.treeitem {
color: #0000ff;
font-size: 12px;
font-weight: bold;
border: #888888 solid 1px;
}
DIV.centerarea {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
}
.whitearea {
background-color: #FFFFFF;
}
.blackarea {
background-color: #000000;
}
.mainblock {
background-color: #D4D0C8;
vertical-align: top;
}
.tabdownblock {
background-color: #B4B0AA;
}
.tabdowncenter {
background-image: url(/images/tabs/tab_down_fill.gif);
background-color: #B4B0AA;
font-size: 18px;
text-align: center;
vertical-align: middle;
color: #000000;
}
.tabdownleft {
background-image: url(/images/tabs/tab_down_left.gif);
background-color: #B4B0AA;
}
.tabdownright {
background-image: url(/images/tabs/tab_down_right.gif);
background-color: #B4B0AA;
}
.tabupcenter {
background-image: url(/images/tabs/tab_up_fill.gif);
background-color: #D4D0C8;
font-size: 18px;
text-align: center;
vertical-align: middle;
color: #000000;
}
.tabupleft {
background-image: url(/images/tabs/tab_up_left.gif);
background-color: #D4D0C8;
border-width: 0px;
padding: 0px;
}
.tabupright {
background-image: url(/images/tabs/tab_up_right.gif);
background-color: #D4D0C8;
}
A.tablink,A.tablink:hover,A.tablinkselected,A.tablinkselected:hover {
font-size: 11px;
font-weight: bold;
text-align: center;
color: #000000;
}
A.tablink:hover,A.tablink:active,A.tablinkselected {
color: #000099;
}
.apptitle {
background-color: #000099;
line-height: 2;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
display: block;
width: 100%;
}
DIV.row {
background-color: #B4B0AA;
margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
padding: 0; text-align: center;
}
DIV.col {
border: none; float: left; margin: 0; padding: 0; width: auto;
}
DIV.col-fill {
font-weight: bold;
background-color: #B4B0AA; color: #000099;
margin: 0; padding: 0; border: none; text-align: center; width: 0;
}
DIV.col-right {
border: none; float: right; margin: 0; padding: 0; width: auto;
}
DIV.contentarea {
background-color: #FFFFFF;
border: solid black 1px;
margin-top: 10px;
padding: 10px;
}
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;
}
DIV.screenlet {
background-color: #FFFFFF;
border: 1px solid #999999;
margin-bottom: 10px;
height: auto !important;
height: 1%
}
DIV.screenlet-header {
background-color: #000099;
padding-top: 1px;
padding-bottom: 3px;
padding-right: 4px;
padding-left: 4px;
height:auto !important;
height: 1%
}
DIV.screenlet-body {
background-color: #FFFFFF;
padding: 4px;
height:auto !important;
height: 1%
}
#column-container {
position: relative;
background-color: #FFFFFF;
margin: auto;
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 {
float: left;
width: 300px;
background-color: #CCCCCC;
border: black solid 2px;
overflow: auto;
}
