webeng: template team: syndication buckets and CSS: samples

Next, go through the template and replace all occurances of class="body" with class="contentarea". Also look for any content-area <TD> tags without a class="contentarea" parameter. Additionally, keep an eye out for any stray <FONT> tags and accompanying text which are not contained within an included component--these could be problem areas, requiring special tweaking.

Once you've completed converting the top-level template, you're reading to start modifing the included components. Compare an unchanged version of your webpage (either from the production servers, or from Eminem) with the bucket-types page of this document, to determine which type of bucket most-closely matches the component in question. (If you can't make a match, this component might require a new bucket-type classification!).

Once you've figured out which bucket-type to convert your component over to, go through and begin modifying the component's code. Usually, it helps to set all table borders to a value of ten, so you can clearly see the table structure(s) and the various cells within (each).

Each bucket type has a "main" CSS class, intended to control the main-content area of the bucket. This class has the same name as the bucket-type (e.g., primary). Other "sub-classes" control various sub-entities within the bucket: _header controls the header background color and font parameters; _border controls the outer border-table background-color; etc. Each bucket sub-section additionally usually has a smaller- and larger-than-normal font size, specified by _sm and _lrg. Text requiring these settings should be wrapped in <FONT CLASS="xxx_sm"></FONT> tags to special-case it from the default style (normally you wouldn't need to use font tags at all). Links don't need any class assignment, since they're automatically taken care of by the CSS.

So, generally, to convert a component, you'd set the outer border table's class to _border, the table-cell containing the header text to _header, the inner table's class should be set to the "main" class name, as well as any content-cells within that table. Larger, smaller, or special-case text should then be inclosed in <FONT> tags WITHIN EACH TABLE CELL, to offset this non-standard font, since these classes do not set their own background colors--they must inherit from the "main" bucket class (e.g., .primary or .feature).

Finally, note that font-control parameters do NOT "trickle-down" inside a table, so it is not sufficient to assign a class to the <TABLE> tag alone--EACH <TD> tag should, in general, have some sort of class assignment added to it!