CSS Classes

Divs

Syntax: [[div class="classname"]]


class="mothercontainer"

Actual CSS code: width: 100%;max-width:1000px;float: left;vertical-align: top;text-align: left;

The base container so that the text will not be cut off because if the Sidebar Div. Only need this if you plan to use DIV in your content layout. Thus uncessary for just text/list inputs.


class="upperleftimgcontainer"

Actual CSS code: width: 175px; float: left; text-align:center;

This is the DIV for the Portrait Image. The layout schema of the actual page is split into 3 sections

[Side Bar][Portrait][ Content/Descriptions ]

This div is the Portrait Chunk of the webpage. It is 175 pixels wide, able to Fit the 150 (Default) portrait image.

You only use this DIV and the ContentContainer DIV if you want to split the layout. Otherwise you do not need to use it.


class="upperrightimgcontainer"

Actual CSS code: width: 175px; float: right; text-align:center;

This is the DIV for the Portrait Image. The layout schema of the actual page is split into 3 sections

[Side Bar][ Content/Descriptions ][Portrait]

This div is the Portrait Chunk of the webpage. It is 175 pixels wide, able to Fit the 150 (Default) portrait image.

You only use this DIV and the ContentContainer DIV if you want to split the layout. Otherwise you do not need to use it.


class="contentcontainer"

Actual CSS code: max-width: 675px; min-width:300px; width: 100%; float: left;

This is the DIV for the main content of any page that has a portrait. The layout schema of the actual page is split into 3 sections

[Side Bar][ Content/Descriptions ][Portrait]

This div is the Content Chunk of the webpage.

This DIV can be used with or without the UpperLeftImageContainer DIV. Since this DIV's main function is to maintain a maximum width of 675 pxs (so text are close together instead of trailing all the way across a widescreen monitor) and min of 300px (So you don't get these hugely crunched up text if the screen is too small.)


class="fullwidthcontainer"

Actual CSS code: width:100%;

This DIV is obsoelete and does not need to be used. I included it because I am too lazy to change it.


class="tab0"

Actual CSS code: margin-left:22px;

As the name of the DIV suggests, it is meant to simulate Tabs. Mainly to keep chunks of text/pictures aligned with things in a list. Keep in mind you cannot use this in the middle of a list without having the side-effect of resetting the list levels.

"tab0" DIV


Normal Text
  • List Lvl 1
    • List Lvl 2
      • List Lvl 3

class="tab1"

Actual CSS code: margin-left:40px;

As the name of the DIV suggests, it is meant to simulate Tabs. Mainly to keep chunks of text/pictures aligned with things in a list. Keep in mind you cannot use this in the middle of a list without having the side-effect of resetting the list levels.

"tab1" DIV


Normal Text
  • List Lvl 1
    • List Lvl 2
      • List Lvl 3

class="tab2"

Actual CSS code: margin-left:80px;

As the name of the DIV suggests, it is meant to simulate Tabs. Mainly to keep chunks of text/pictures aligned with things in a list. Keep in mind you cannot use this in the middle of a list without having the side-effect of resetting the list levels.

"tab2" DIV


Normal Text
  • List Lvl 1
    • List Lvl 2
      • List Lvl 3

class="tab3"

Actual CSS code: margin-left:120px;

As the name of the DIV suggests, it is meant to simulate Tabs. Mainly to keep chunks of text/pictures aligned with things in a list. Keep in mind you cannot use this in the middle of a list without having the side-effect of resetting the list levels.

"tab3" DIV


Normal Text
  • List Lvl 1
    • List Lvl 2
      • List Lvl 3

class="spoiler"

Actual CSS code: color: #333333; background-color: #333333;

Use for spoilers could be SPAN or DIV. Have to highlight to read.

Sample Spoiler


class="leftjustifiedtable"

Actual CSS code: float:left;

Used to left justify tables. Remember must use "~~~~" (clear DIV Float) after the Div. Or the section following will just pile on to the right of the table.

Normal Table
Table encleased in "leftjustifiedtable" div

Colors

Syntax: [[span class="xxxx"]]Text to be Colored[[/span]] can be used for anyting, DIV, Tables, etc.

Colors: red | blue | green | teal | pink | purple | brown