Help:CSS Classes

Classes

On this Wiki various 'classes' are set up in the CSS which allow standard types of coloured boxes etc to be created by calling the class instead of giving full information to make a table cell. The display effect and text required is shown below. Please note that these change according to which skin you are using. The default skin is TWC (default) which is a coloured version of monobook, Anisa currently uses beige/brown background colours to match the forum, DarkVector is 'dark', the other skins are mainly grey text on white background.

If you are designing anything complicated please check design in at least the TWC (default) skin, Anisa, DarkVector and one of the white/grey skins.

Classes for coloured backgrounds for portals etc

The appearance of classes with gradient backgrounds will vary slightly with the depth of the content, so are shown with a long paragraph in the example.

TWCportal_1

<div class="TWCportal_1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

gives:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

TWCportal_2

Used as above gives:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

TWCportal_3

Used as above gives:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

class="frontpage-wikinews"

{|
|-
| class="frontpage-wikinews" |
TEXT HERE
|}

TEXT HERE

class="frontpage-generalmodding"

{|
|-
| class="frontpage-generalmodding" |
TEXT HERE
|}

TEXT HERE

class="frontpage-m2tw"

{|
|-
| class="frontpage-m2tw" |
TEXT HERE
|}

TEXT HERE

div class="section"

Nice simple one this for standard TWC looking boxes.

<div class="section">
Text Here
</div>

Text Here

class=".infobox"

Info boxes appear to require a style section as well, "infobox bordered" will give internal cell division lines whereas "infobox" doesn't. (need to add section on positioning these correctly)

{| class="infobox bordered" style="margin:0.5em auto; "
|-
|-
|TEXT HERE
|- 
|more text
|}
|}

TEXT HERE

more text

{| class="infobox" style="margin:0.5em; "
|-
|TEXT HERE
|- 
|more text
|}

TEXT HERE

more text