ZetaBoards CSS Class Guide

Within this documentation you'll find annotated visual aids showing the whereabouts of particular CSS classes, which class is assigned to a particular area, and details on any table classes or ID's used on the particular page.

#board is now known as #main

Table Class(s):

• Green outlines show the main sections of the forum. This stays the same for each page. The #wrap contains the entire board, minus the #logo and #submenu.
• Board categories are within a div classed category.
• Category tables are classed forums. This does not contain the h2.
• Statistics is wrapped in an ID'd div called #stats.

Notes:

• The blue and orange borders around the H2 and H2.special are controlled with this snippet about a third of the way into the CSS:

.cat_head td {
border-color:#5a70b3;
padding:0;
}
 
#stats .cat_head td {
border-color:#e77700;
}

Table Class(s): .posts (main content)
.category and .forums around subforum areas, as seen on the Index

Notes:

• Standard row1 and row2 rows are alternating. Announcement and pinned topics are also alternating.
• #announcement_head and #pinned_head are not currently in the default CSS, and therefore must be added in order to be used.

Table Class(s): .posting

Table Class(s):

• .poll (Shown at top of visual aid)
  
• .topic (Main content)

Notes:

• Ignored posts are classed as th.ignored
• Signatures not in use are classed as td.c_nosig.

Table Class(s):

• .poll

Table Class(s): .calendar
Notes:

• .calendar td div is used for both used and unused cells in the calendar.
  
• The border around the active date cell will only show at a thickness of 2px or more.

Table classes or ID's identified are for the main content of the page, and have nothing to do with the meta-menus at the top of the page.

Table Class(s): .ucp
Notes:

• Cells containing information are styled by the TD class in the CSS.

Table Class(s): .ucp
Notes:

• Cells containing information are styled by the TD class in the CSS.

Table Class(s): .pm
Notes:

• .row1 and .row2 rows are alternating.
• The 'Quick Compose' table does not have a class.

This section shows the search results, because the search page itself uses generic classes you'll have used in other areas of the CSS.

Table Class(s): None. Instead the page displays a list (ul) classed as #search_results.
Notes:

• #search_results li:hover appears when the cursor hovers over a search result.
• Quotes use the same CSS as the topic view.

Table Class(s): None. Main portal structures are #portal_main, #portal_l, #portal_news, #portal_r and #portal_foot.

Notes:

• Posts created are within a <Blockquote>, therefore to style the quotes within blog entries you'll need to use .blog_entry blockquote blockquote and so forth.
  
• Corners are automatic and will adjust to your styling accordingly.