ZetaBoards CSS Class Guide

This documentation applies to ZetaBoards only.

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.

This guide was created during the BETA phase of the Zetaboards' development. Some class and ID names have changed. Please contact an Administrator on the Resource board with any changes so that they may be rectified. Please read the Notes in each section to find the latest information available. - Thank-you.

Some of the classes/ID's shown aren't in the CSS. To use them, they must be added.

Index

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

Forum View

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.

td.c_mark has been updated to td.c_cat-mark

Posting Page

Table Class(s): .posting

#post_re-size has been updated to #c_post-resize

Topic View

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.

  • td.c_postfoot has been updated to .c_postfoot td (only if profile info is shown on the left of posts)
  • td.c_topic-foot has been updated to .c_topicfoot

Voted Poll

Table Class(s):

  • .poll

Calendar

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.

h2 has been updated to .calendar thead tr th

User Controls

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.

UCP / Inbox Home

Table Class(s): .ucp
Notes:

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

Avatar Settings

Table Class(s): .ucp
Notes:

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

Inbox

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.

Portal

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

Blog

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.



themes/zbcssguide.txt ยท Last modified: 2012/07/24 23:07 (external edit)