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? |
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? > > smime.p7s (3K) Download Attachment |
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? >> >> > |
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? >>> >>> |
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; } |
Hi Adrian
This is great, but I think Chris Howe had a great idea a little while back when he talked about defining text in em so browsers can adjust the font size. Thanks Daniel ----- This is a vague recollection of things read/done on css. Instead of setting the font size in pixels, you "should" use em units. The most common approach is the following: BODY { font-size: 62.5%; } This makes 16px = 10px and so now: 0.8 em = 8 px 1 em = 10px 1.2 em = 12 px 1.4 em = 14 px and so forth. em instead of pixels is used because IE/Win doesn't allow the user to resize text that is set in px. This may or may not have been fixed/changed in IE7, but it's a much easier convention to apply consistently than is pixels. ---- On Fri, 2007-01-12 at 14:17 -0800, Adrian Crum wrote: > 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? > >>>> > >>>> > > > > |
Thanks for the reminder Daniel! I was going to get to that next. If you try out
the file I attached, you'll see there are still a few small issues I need to work out. So, it's a work in progress. Daniel Kunkel wrote: > Hi Adrian > > This is great, but I think Chris Howe had a great idea a little while > back when he talked about defining text in em so browsers can adjust the > font size. > > Thanks > > Daniel > > ----- > > This is a vague recollection of things read/done on > css. Instead of setting the font size in pixels, you > "should" use em units. The most common approach is > the following: > > BODY { > font-size: 62.5%; > } > > This makes 16px = 10px and so now: > 0.8 em = 8 px > 1 em = 10px > 1.2 em = 12 px > 1.4 em = 14 px > > and so forth. em instead of pixels is used because > IE/Win doesn't allow the user to resize text that is > set in px. This may or may not have been > fixed/changed in IE7, but it's a much easier > convention to apply consistently than is pixels. > > > > ---- > > On Fri, 2007-01-12 at 14:17 -0800, Adrian Crum wrote: > >>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? >>>>>> >>>>>> >>> >>> > > |
Administrator
|
About this subject and books reading, I think it is worth to take a look at least at the chapter 13 of Designing with Web Standards
from Jeffrey Zeldman http://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0735712018/ref=ed_oe_p/105-6697130-6475607 (I read only the 1st and french edition). This chapter is only 30 pages but there are some interesting tips for this kind of problems. It speaks about pixels, em, etc. Jacques ----- Original Message ----- From: "Adrian Crum" <[hidden email]> To: <[hidden email]> Sent: Saturday, January 13, 2007 12:10 AM Subject: Re: maincss.css question > Thanks for the reminder Daniel! I was going to get to that next. If you try out > the file I attached, you'll see there are still a few small issues I need to > work out. So, it's a work in progress. > > > Daniel Kunkel wrote: > > > Hi Adrian > > > > This is great, but I think Chris Howe had a great idea a little while > > back when he talked about defining text in em so browsers can adjust the > > font size. > > > > Thanks > > > > Daniel > > > > ----- > > > > This is a vague recollection of things read/done on > > css. Instead of setting the font size in pixels, you > > "should" use em units. The most common approach is > > the following: > > > > BODY { > > font-size: 62.5%; > > } > > > > This makes 16px = 10px and so now: > > 0.8 em = 8 px > > 1 em = 10px > > 1.2 em = 12 px > > 1.4 em = 14 px > > > > and so forth. em instead of pixels is used because > > IE/Win doesn't allow the user to resize text that is > > set in px. This may or may not have been > > fixed/changed in IE7, but it's a much easier > > convention to apply consistently than is pixels. > > > > > > > > ---- > > > > On Fri, 2007-01-12 at 14:17 -0800, Adrian Crum wrote: > > > >>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? > >>>>>> > >>>>>> > >>> > >>> > > > > |
In reply to this post by David E Jones
Now that I know that that section of the css file was an experiment, I'd like to
offer my perspective on that particular section. It seems to me that those product detail styles tie style to content too closely. In other words, they are pretty content specific. I see the maincss.css file as being a global "palette" of styles that all components can draw from. If a particular component needs a style that is unavailable from the maincss.css file, then those styles should be kept in a separate style sheet that only that component loads (via layoutSettings.stylesheets[]). Am I on the right track? 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? >>>> >>>> > > |
Actually, the point of this sort of CSS pattern is what you described as the bad side effect, ie having the style tied to the content. If we have anything generic, it should be attached to generic tags, not a messy and confusing and difficult to maintain library of styles like we have now. If we put an id on a div around a product summary block, we don't HAVE to use that in our stock CSS file, but the fact that it is there makes it possible to do something special visually with that section without any change to the FTL file. And _that_ is what we're going for... and that's what the examples and patterns in the CSS Zen Garden stuff are all about. -David On Jan 12, 2007, at 6:36 PM, Adrian Crum wrote: > Now that I know that that section of the css file was an > experiment, I'd like to offer my perspective on that particular > section. > > It seems to me that those product detail styles tie style to > content too closely. In other words, they are pretty content specific. > > I see the maincss.css file as being a global "palette" of styles > that all components can draw from. If a particular component needs > a style that is unavailable from the maincss.css file, then those > styles should be kept in a separate style sheet that only that > component loads (via layoutSettings.stylesheets[]). > > Am I on the right track? > > > 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? >>>>> >>>>> smime.p7s (3K) Download Attachment |
In reply to this post by David E Jones
Believe it or not, in the UK (perhaps other places too) there are laws
against setting text in px, well, not quite, but almost... The DDA (Disability Discrimination Act 1995) was designed to make sure that those with visual impairment were not excluded from accessing websites, in much the same way as it is illegal to run retail premises without disabled access. You can find out more about this from the RNIB (Royal National Institute for the Blind) website.... http://www.rnib.org.uk/xpedio/groups/public/documents/publicwebsite/public_rnib003556.hcsp Or, more formally from the Office of Public Sector Information... http://www.opsi.gov.uk/acts/acts1995/1995050.htm This is particularly pertinent for OfBiz as any company planning to adopt the technology would be legally obliged to ensure it did not disbar visually impaired users. -- Kind Regards Andrew Sykes <[hidden email]> Sykes Development Ltd http://www.sykesdevelopment.com |
In reply to this post by David E Jones
David E. Jones wrote:
> Actually, the point of this sort of CSS pattern is what you described > as the bad side effect, ie having the style tied to the content. > > If we have anything generic, it should be attached to generic tags, not > a messy and confusing and difficult to maintain library of styles like > we have now. I just spent the entire weekend slimming down and organizing the maincss.css file. I'm sure it will help eliminate some of the style confusion. I'll post it soon. > If we put an id on a div around a product summary block, we don't HAVE > to use that in our stock CSS file, but the fact that it is there makes > it possible to do something special visually with that section without > any change to the FTL file. So, you're saying content-specific styles should stay in the main stylesheet? I apologize if I appear dense, I'm just trying to make sure I understand you correctly before I proceed any further. |
On Jan 15, 2007, at 8:39 AM, Adrian Crum wrote: > David E. Jones wrote: >> Actually, the point of this sort of CSS pattern is what you >> described as the bad side effect, ie having the style tied to the >> content. >> If we have anything generic, it should be attached to generic >> tags, not a messy and confusing and difficult to maintain library >> of styles like we have now. > > I just spent the entire weekend slimming down and organizing the > maincss.css file. I'm sure it will help eliminate some of the style > confusion. I'll post it soon. > >> If we put an id on a div around a product summary block, we don't >> HAVE to use that in our stock CSS file, but the fact that it is >> there makes it possible to do something special visually with >> that section without any change to the FTL file. > > So, you're saying content-specific styles should stay in the main > stylesheet? I apologize if I appear dense, I'm just trying to make > sure I understand you correctly before I proceed any further. easier to manage, and makes it easy for the browser to cache. BTW, I plead and beg on my knees Adrian: don't try to make massive changes and submit huge patches! Please! Please! PLEASE! I beg of you! Please try to keep patches more granular and to address a single issue that can be easily reviewed by committers. This is important for smooth progress in the project. I'm rather concerned right now with the approach various people are trying to take to contribute to OFBiz, and the lack of good review on the part of committers. Following the above plea will help significantly with this, and it will get your patches reviewed and committed far more quickly, and the patches from others committed more quickly and without causing so many negative side-effects for what you are trying to do with OFBiz. -David smime.p7s (3K) Download Attachment |
David E. Jones wrote:
> BTW, I plead and beg on my knees Adrian: don't try to make massive > changes and submit huge patches! Please! Please! PLEASE! I beg of you! > Please try to keep patches more granular and to address a single issue > that can be easily reviewed by committers. > > This is important for smooth progress in the project. I'm rather > concerned right now with the approach various people are trying to take > to contribute to OFBiz, and the lack of good review on the part of > committers. Following the above plea will help significantly with this, > and it will get your patches reviewed and committed far more quickly, > and the patches from others committed more quickly and without causing > so many negative side-effects for what you are trying to do with OFBiz. Relax. I wasn't planning on submitting a patch. I was going to attach the modified css file to an upcoming email to get community comments. |
Regardless, what I think that David is asking you to do was take the modifications in small chunks - instead of trying to do everything all at once. That way regardless of whether or not it's a patch or attached to an email - it's easily reviewable by people.
Cheers, Tim -- Tim Ruppert HotWax Media o:801.649.6594 f:801.649.6595 On Jan 15, 2007, at 4:21 PM, Adrian Crum wrote:
smime.p7s (3K) Download Attachment |
Thanks you for the clarification Tim.
In this particular case, even a minor change to the maincss.css file results in many modifications. For instance, setting a default font style removes a ton of code. Same thing with setting default styles for basic HTML elements. If a new design approach results in greatly reduced code, how do you present that approach to the community without presenting the greatly reduced code? -Adrian Tim Ruppert wrote: > Regardless, what I think that David is asking you to do was take the > modifications in small chunks - instead of trying to do everything all > at once. That way regardless of whether or not it's a patch or attached > to an email - it's easily reviewable by people. > > Cheers, > Tim > -- > Tim Ruppert > HotWax Media > http://www.hotwaxmedia.com > > o:801.649.6594 > f:801.649.6595 > > > On Jan 15, 2007, at 4:21 PM, Adrian Crum wrote: > >> David E. Jones wrote: >> >>> BTW, I plead and beg on my knees Adrian: don't try to make massive >>> changes and submit huge patches! Please! Please! PLEASE! I beg of >>> you! Please try to keep patches more granular and to address a >>> single issue that can be easily reviewed by committers. >>> This is important for smooth progress in the project. I'm rather >>> concerned right now with the approach various people are trying to >>> take to contribute to OFBiz, and the lack of good review on the part >>> of committers. Following the above plea will help significantly with >>> this, and it will get your patches reviewed and committed far more >>> quickly, and the patches from others committed more quickly and >>> without causing so many negative side-effects for what you are >>> trying to do with OFBiz. >> >> >> Relax. I wasn't planning on submitting a patch. I was going to attach >> the modified css file to an upcoming email to get community comments. >> >> > |
On Jan 15, 2007, at 4:49 PM, Adrian Crum wrote: > If a new design approach results in greatly reduced code, how do > you present that approach to the community without presenting the > greatly reduced code? Easy. Start with an example, a small localized change that demonstrates your idea. Submit it as a patch, get feedback, and get others to help you apply it more generally. This happens over and over in a project like OFBiz, and has happened many thousands of times. Even the core committers work with each other this way. -David smime.p7s (3K) Download Attachment |
In reply to this post by Adrian Crum
I feel you - especially when talking about something like this. If it were me, I'd probably present a new file - and a particular screen that you did in this style. Once you find adoption, it'll be easy to get people behind it. But just beware of trying to fix too much - I think that's the only warning here :)
Cheers, Tim -- Tim Ruppert HotWax Media o:801.649.6594 f:801.649.6595 On Jan 15, 2007, at 4:49 PM, Adrian Crum wrote:
smime.p7s (3K) Download Attachment |
Understood. I'm still inclined to present the "finished product" and then see
what incremental steps should be taken to get there. Btw, the maincss.css file I have will drop into any OFBiz installation and work. It doesn't need any additional modifications. It doesn't change the L&F in any way. It's just smaller and more efficient. Tim Ruppert wrote: > I feel you - especially when talking about something like this. If it > were me, I'd probably present a new file - and a particular screen that > you did in this style. Once you find adoption, it'll be easy to get > people behind it. But just beware of trying to fix too much - I think > that's the only warning here :) > > Cheers, > Tim > -- > Tim Ruppert > HotWax Media > http://www.hotwaxmedia.com > > o:801.649.6594 > f:801.649.6595 > > > On Jan 15, 2007, at 4:49 PM, Adrian Crum wrote: > >> Thanks you for the clarification Tim. >> >> In this particular case, even a minor change to the maincss.css file >> results in many modifications. For instance, setting a default font >> style removes a ton of code. Same thing with setting default styles >> for basic HTML elements. >> >> If a new design approach results in greatly reduced code, how do you >> present that approach to the community without presenting the greatly >> reduced code? >> >> -Adrian >> >> Tim Ruppert wrote: >> >>> Regardless, what I think that David is asking you to do was take the >>> modifications in small chunks - instead of trying to do everything >>> all at once. That way regardless of whether or not it's a patch or >>> attached to an email - it's easily reviewable by people. >>> Cheers, >>> Tim >>> -- >>> Tim Ruppert >>> HotWax Media >>> http://www.hotwaxmedia.com >>> o:801.649.6594 >>> f:801.649.6595 >>> On Jan 15, 2007, at 4:21 PM, Adrian Crum wrote: >>> >>>> David E. Jones wrote: >>>> >>>>> BTW, I plead and beg on my knees Adrian: don't try to make massive >>>>> changes and submit huge patches! Please! Please! PLEASE! I beg of >>>>> you! Please try to keep patches more granular and to address a >>>>> single issue that can be easily reviewed by committers. >>>>> This is important for smooth progress in the project. I'm rather >>>>> concerned right now with the approach various people are trying to >>>>> take to contribute to OFBiz, and the lack of good review on the >>>>> part of committers. Following the above plea will help >>>>> significantly with this, and it will get your patches reviewed and >>>>> committed far more quickly, and the patches from others committed >>>>> more quickly and without causing so many negative side-effects for >>>>> what you are trying to do with OFBiz. >>>> >>>> >>>> >>>> Relax. I wasn't planning on submitting a patch. I was going to >>>> attach the modified css file to an upcoming email to get community >>>> comments. >>>> >>>> > |
In reply to this post by Tim Ruppert
On Jan 15, 2007, at 4:49 PM, Adrian Crum wrote: > In this particular case, even a minor change to the maincss.css > file results in many modifications. For instance, setting a default > font style removes a ton of code. Same thing with setting default > styles for basic HTML elements. The best thing to do here is again keep the patch as simple as possible. You can make changes to a lot of files, just make SURE those are the only changes in the files, and try to limit it to maybe 2-3 such changes in a patch to make it easier to skim. -David smime.p7s (3K) Download Attachment |
Free forum by Nabble | Edit this page |