Here we're going to discuss the various CSS classes used on DKPSystem.com. While we're going to try to be exhaustive, we may miss a few here and there. This section is not to teach you CSS, but just to briefly discuss each class in the system.

Note: you'll see in here occasionally, styles that refer to the "default layout." This is the site without the Advanced Layout Options, and without using a Drop-In Template.



.quote: The body of the quote box when [quote] tags are used.

.quoteheader: The header of the quote box when [quote] tags are used.

.GuideTitle: This is used with [title] BBCode tags

.GuideSubTitle: used with [subtitle] BBCode tags




.list: Most of the tables on the site use this class.

.listlabel: This is the header bar of most tables, and in particular, the ones for lists

.list1: Used with almost every list of some sort. This is one of the alternating rows.

.l1: A short-hand version of .list1

.list2: Just like .list1, but this is the other alternating row style.

.newlist1: Just like .list1 above, but designed to stand out a little bit. Used primarily for unread threads on the forum.

.newl1: Short-hand for .newlist1

.newlist2: The other unread thread notification row (by analogy, .newlist2 is to .newlist1, as .list2 is to .list1)

.newl2: shorthand for .newlist2

.listred: used commonly, is for rows that want to "Get Your attention" in a table (ie, Missing Raids on your member profile.) This is meant to stand out in a big way.

.lr: shorthand for .listred

a.inred: for any list rows that must show up to get the user's attention, this is the link for them




table.Subject: Used in the default base as the Title table. Even with custom layouts, it's used in the Add/Edit Post and other popups that have a title

.subject: This is the row for the Subject table. Used in popup windows and on the default layout.

.SubSubject: This is the row for the "Description" or "Subtitle" of the Subject table.

.Menu: The tables used on the menus on the default layout use this. If you are customizing your own Menu then you don't really need to worry about this.

.MenuCat: The header used in the Menus in the default layout

.MenuChoice: The part of the menus on the default layout that list the items and show the content of the menus (for example, if it's a Ventrilo Status menu)

.CountDown: in the default layout, this is the style associated with the Count Down: "x minutes until the next raid"

.Event: In the Default Layout, Is essentially the background information for the Next Event.

.EventName: In the default layout, this is the style of the Next Event Name at the top

.EventTime: same as above, only for the Date/Time

.TopStats: In the default layout, is the style of the statistics section.

.copyright: The copyright notice




.StatCount: In the Statistics, this is the color of the number in the statistic

.StatAlert: In the Statistics, this is the "notification" span, designed to get the users attention. In particular the color of the "last poster" name if that poster is not you




table.error: This is the box used for error notification.

.errorlistlabel: This is the title part of the error table

td.error: This is the body part of the error box

div.error: In a few places, we'll display an error in a div, rather than the table (such as the "Invalid Login" notification if you enter the wrong username or password).



(These may get phased out)

.plain: used in a few places to just define a normal place to put simple kinda-small text

.xsmall: to define small text in various places

.shoutbox: The div that the shoutbox appears in. Generally, this is just to define a max hight and enable scrollbars

.ventstatus: The div that the vent status box is in. Serves a similar purpose to .shoutbox.

.cp: While rather rarely used, this is the "color picker" popup. SHOULD NOT ever change, that is, unless you really want to change the size of the color picker



This is the calendar that's typically found on the menu

.calcurrent: "Today" on the calendar.

.calday: Any day on the calendar. Primarily for defining the width of the calendar, as the calendar width SHOULD be (width of .calday) * 7

.calheader: The header rows on the Calendar - the ones that show the month, the month changer links, and the day headers ("S M T W R F S").

.calsomething: If there is something scheduled on this day, this is one of the classes that cell will receive. Typically, this is unused because of Event Categories.

.calbody: The primary body of the calendar.




.PostText: This is the body text of each post.

.PostInfo: This is the section of each post that shows the poster, the poster's avatar, etc. This is also the little bits that float around the post, with the "Reply" links, Attachments, and post date.

.ThreadHeader: On the forum, this is the little blurb at the top that gives statistic info "Total Posts" "Total Threads" "Deepest Thread"

.MakeAPost: The style associated with the "Add a Post to this thread" link on the forum


Most of these you'll never want to change, but the few that you can are notated.

div.tabrow{float:left;width:100%;padding-top:5px;}
ul.tabrow, ul.tabrow li{list-style-type:none;margin:0;padding:0}
ul.tabrow{margin-left:10px;}
ul.tabrow li{list-style-image:none;float:left;margin-right: 3px;text-align:center;font-size:inherit}
ul.tabrow a{float:left;width:8em;padding: 5px 0;background-color:#0F105A}
ul.tabrow a:hover {background-color:#0F1052;}
ul.tabrow li.selected a,ul.tabrow li.selected a:hover {background-color:#1F3578}

ul.tabrow a: This is for the tabs that are not selected.

ul.tabrow a:hover: This is the tab that the mouse is currently hovering over

ul.tabrow li.selected: This is the currently selected tab

ul.tabrow li.selected a:hover: This is the currently selected tab if the mouse is hovering over it



.bigcal: This is the big calendar table itself

.bigcalheader: This is the header of the calendar, displaying the month and year, and the links to the next months

.bigcalheader a: The actual arrows to the next and previous months

.bigcaldayheader: Day Labels (ie, "Sunday" "Monday")

.bigcalday: This is the class for each day

.bigcalday_hover: If the mouse is hovering over a day, this is the class. Note that it's _hover and not :hover. Due to Internet Explorer's lack of support for ":hover" on random elements, we are forced to use javascript to change the class so that it's cross-platform compatible.

.bigcallabel:: This is a class that is displayed on the events themselves (ie, 8:00pm - Gruul's Lair)

.bigcaldaylabel: This is the number of the day each month (1 - 31)

.bigcalcurrent: Today on the big calendar

.bigcalsomething: If something is scheduled on this day, this is what to do. Typically unnecessary as the events themselves typically stand out pretty obviously.

.bigcalplus: This is the plus sign for "quick add"

.bigcalblank: A day that's not in the current month (at the beginning and end of the calendar display)

Incoming Guide Links CSS

Outgoing Guide Links CSS Menu File

Easy Link BBCode Link: [guide=CompleteCSS]Complete DKPSystem.com CSS Classes[/guide] URL: http://www.dkpsystem.com/guide/CompleteCSS

BBCode Guide