Welcome to the TWC Wiki! You are not logged in. Please log in to the Wiki to vote in polls, change skin preferences, or edit pages. See HERE for details of how to LOG IN.

Difference between revisions of "Help:CSS Classes"

From TWC Wiki
Jump to navigationJump to search
(add new portal classes)
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
==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.
 
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.
 
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 ===
+
==TOC adjustments by CSS==
 +
Edit to remove the nowiki tags on one at a time to view:
 +
 
 +
<nowiki><div class="nonumbertoc">__TOC__</div></nowiki>
 +
 
 +
<nowiki><div class="toclimit-3">__TOC__</div></nowiki>
 +
 
 +
==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.
 
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====
 
====TWCportal_1====
Line 26: Line 31:
 
</div>
 
</div>
  
−
===class="frontpage-wikinews"===
+
==Classes for column spacing==
 +
===Responsive column layout===
 +
A responsive column layout from http://www.responsivegridsystem.com/  is in use on the portal and main pages - the classes may also be used elsewhere to achieve a two or three column wide layout that stacks into a single column on small screens the code is as follows:
 +
-----
 +
====Two equal columns====
 +
<span style="font-weight:bold; color:brown"><nowiki><div class="TWCRsection TWCRgroup"></nowiki></span>
 +
<span style="font-weight:bold; color:brown"><nowiki><div class="TWCRcol span_1_of_2"></nowiki></span>
 +
''Lorem ipsum etc.''
 +
<span style="font-weight:bold; color:brown"><nowiki></div></nowiki></span>
 +
<span style="font-weight:bold; color:brown"><nowiki><div class="TWCRcol span_1_of_2"></nowiki></span>
 +
''Lorem ipsum etc.''
 +
<span style="font-weight:bold; color:brown"><nowiki></div></nowiki></span>
 +
Gives:
 +
</div>
 +
<div class="TWCRsection TWCRgroup">
 +
<div class="TWCRcol span_1_of_2">
 +
''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>
 +
<div class="TWCRcol span_1_of_2">
 +
''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>
 +
</div>
 +
----
 +
====Two columns split 40/60%====
 +
<span style="font-weight:bold; color:brown"><nowiki><div class="TWCRsection TWCRgroup"></nowiki></span>
 +
<span style="font-weight:bold; color:brown"><nowiki><div class="TWCRcol span_40pct_of_2"></nowiki></span>
 +
''Lorem ipsum etc.''
 +
<span style="font-weight:bold; color:brown"><nowiki></div></nowiki></span>
 +
<span style="font-weight:bold; color:brown"><nowiki><div class="TWCRcol span_60pct_of_2"></nowiki></span>
 +
''Lorem ipsum etc.''
 +
<span style="font-weight:bold; color:brown"><nowiki></div></nowiki></span>
 +
<span style="font-weight:bold; color:brown"><nowiki></div></nowiki></span>
 +
Gives:
 +
<div class="TWCRsection TWCRgroup">
 +
<div class="TWCRcol span_40pct_of_2">
 +
''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>
 +
<div class="TWCRcol span_60pct_of_2">
 +
''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>
 +
</div>
 +
Reverse the order to have the larger column first.
 +
----
 +
====Three columns ====
 +
<span style="font-weight:bold; color:brown"><nowiki><div class="TWCRsection TWCRgroup"></nowiki></span>
 +
<span style="font-weight:bold; color:brown"><nowiki><div class="TWCRcol span_1_of_3"></nowiki></span>
 +
''Lorem ipsum etc.''
 +
<span style="font-weight:bold; color:brown"><nowiki></div></nowiki></span>
 +
<span style="font-weight:bold; color:brown"><nowiki><div class="TWCRcol span_1_of_3"></nowiki></span>
 +
''Lorem ipsum etc.''
 +
<span style="font-weight:bold; color:brown"><nowiki></div></nowiki></span>
 +
<span style="font-weight:bold; color:brown"><nowiki><div class="TWCRcol span_1_of_3"></nowiki></span>
 +
''Lorem ipsum etc.''
 +
<span style="font-weight:bold; color:brown"><nowiki></div></nowiki></span>
 +
<span style="font-weight:bold; color:brown"><nowiki></div></nowiki></span>
 +
Gives:
 +
<div class="TWCRsection TWCRgroup">
 +
<div class="TWCRcol span_1_of_3">
 +
''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>
 +
<div class="TWCRcol span_1_of_3">
 +
''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>
 +
<div class="TWCRcol span_1_of_3">
 +
''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>
 +
</div>
 +
'''.span_2_of_3''' is also available which spans the width of 2 out of 3 columns
 +
'''.span_full''' gives 100% width, but probably isn't necessary as that would be default behaviour without the class
  
−
<span style="font-weight:bold; color:brown"><nowiki>{|</nowiki></span>
+
If you want to try and invent anything for additional layouts it would need to be added to the Common.css to work for everyone viewing pages.
−
<span style="font-weight:bold; color:brown"><nowiki>|-</nowiki></span>
 
−
<span style="font-weight:bold; color:brown"><nowiki>| class="frontpage-wikinews" |</nowiki></span>
 
−
''TEXT HERE''
 
−
<span style="font-weight:bold; color:brown"><nowiki>|}</nowiki></span>
 
  
−
{|  
+
 
 +
==Tables==
 +
Default appearance of a table with no class/styling:
 +
<code><nowiki>
 +
{|  
 +
|-
 +
! HEADING TEXT HERE !! HEADING TWO !! THREE
 +
|-
 +
|more text || some more text || another thing
 +
|-
 +
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 +
|}
 +
</nowiki></code>
 +
 
 +
{|
 +
|-
 +
! HEADING TEXT HERE !! HEADING TWO !! THREE
 
|-
 
|-
−
| class="frontpage-wikinews" |
+
|more text || some more text || another thing
−
''TEXT HERE''
+
|-
 +
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 +
|}
  
−
|}
+
===class; infobox===
 +
Note infobox includes the float:right; clear:right; positioning which makes it suitable for things you want to float right!
  
 +
<code><nowiki>
 +
{| class="infobox"
 +
|-
 +
! HEADING TEXT HERE !! HEADING TWO !! THREE
 +
|-
 +
|more text || some more text || another thing
 +
|-
 +
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 +
|}
 +
</nowiki></code>
  
 +
{| class="infobox"
 +
|-
 +
! HEADING TEXT HERE !! HEADING TWO !! THREE
 +
|-
 +
|more text || some more text || another thing
 +
|-
 +
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 +
|}
  
−
===class="frontpage-generalmodding"===
+
===combined classes; infobox bordered===
  
−
  <span style="font-weight:bold; color:brown"><nowiki>{|</nowiki></span>
+
  <code><nowiki>
−
<span style="font-weight:bold; color:brown"><nowiki>|-</nowiki></span>
+
{| class="infobox bordered"  
−
  <span style="font-weight:bold; color:brown"><nowiki>| class="frontpage-generalmodding" |</nowiki></span>
+
|-
−
  ''TEXT HERE''
+
  ! HEADING TEXT HERE !! HEADING TWO !! THREE
−
  <span style="font-weight:bold; color:brown"><nowiki>|}</nowiki></span>
+
|-
 +
|more text || some more text || another thing
 +
|-
 +
  |Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 +
  |}
 +
</nowiki></code>
  
−
{|  
+
{| class="infobox bordered"
 +
|-
 +
! HEADING TEXT HERE !! HEADING TWO !! THREE
 +
|-
 +
|more text || some more text || another thing
 
|-
 
|-
−
| class="frontpage-generalmodding" |
+
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
−
'''TEXT HERE'''
 
−
 
 
 
|}
 
|}
  
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
----
  
  
−
===class="frontpage-m2tw"===
+
===class; wikitable===
  
−
  <span style="font-weight:bold; color:brown"><nowiki>{|</nowiki></span>
+
  <code><nowiki>
−
<span style="font-weight:bold; color:brown"><nowiki>|-</nowiki></span>
+
{| class="wikitable"  
−
  <span style="font-weight:bold; color:brown"><nowiki>| class="frontpage-m2tw" |</nowiki></span>
+
|-
−
  ''TEXT HERE''
+
  ! HEADING TEXT HERE !! HEADING TWO !! THREE
−
  <span style="font-weight:bold; color:brown"><nowiki>|}</nowiki></span>
+
|-
 +
|more text || some more text || another thing
 +
|-
 +
  |Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 +
  |}
 +
</nowiki></code>
  
−
{|  
+
{| class="wikitable"
 +
|-
 +
! HEADING TEXT HERE !! HEADING TWO !! THREE
 +
|-
 +
|more text || some more text || another thing
 
|-
 
|-
−
| class="frontpage-m2tw" |
+
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
−
'''TEXT HERE'''
+
|}
 +
 
 +
----
  
−
|}
+
===class; mw-collapsible===
 +
The mw-collapsible class is in the [https://www.mediawiki.org/wiki/Manual:Collapsible_elements MediaWiki core] and can be called without needing to be in our Common.css - it provides the show/hide functionality but needs other styling or additional classes to make it look reasonable.  Add mw-collapsed to start with the table contents hidden.
  
 +
<code><nowiki>
 +
{| class="mw-collapsible"
 +
|-
 +
! HEADING TEXT HERE !! HEADING TWO !! THREE
 +
|-
 +
|more text || some more text || another thing
 +
|-
 +
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 +
|}
 +
</nowiki></code>
  
−
===div class="section"===
+
{| class="mw-collapsible"  
−
Nice simple one this for standard TWC looking boxes.
+
|-
 +
! HEADING TEXT HERE !! HEADING TWO !! THREE
 +
|-
 +
|more text || some more text || another thing
 +
|-
 +
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 +
|}
  
−
  <span style="font-weight:bold; color:brown"><nowiki><div class="section"></nowiki></span>
+
Example below adds wikitable:
−
  Text Here
+
  <code><nowiki>
−
  <span style="font-weight:bold; color:brown"><nowiki></div></nowiki></span>
+
{| class="mw-collapsible wikitable"  
 +
  |-
 +
! HEADING TEXT HERE !! HEADING TWO !! THREE
 +
|-
 +
|more text || some more text || another thing
 +
  |-
 +
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 +
|}
 +
</nowiki></code>
  
−
<div class="section">
+
{| class="mw-collapsible wikitable"  
−
Text Here
+
|-
−
</div>
+
! HEADING TEXT HERE !! HEADING TWO !! THREE
 +
|-
 +
|more text || some more text || another thing
 +
|-
 +
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 +
|}
  
  
−
===class=".infobox"===
+
Example below adds '''collapse-custom''' tweak from our [[MediaWiki:Common.css]], Note this only works well with a single top level heading, due to the Show/Hide button moving to the left:
−
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)''
 
  
−
  <span style="font-weight:bold; color:brown"><nowiki>{| class="infobox bordered" style="margin:0.5em auto; "</nowiki></span>
+
  <code><nowiki>
−
<span style="font-weight:bold; color:brown"><nowiki>|-</nowiki></span>
+
{| class="mw-collapsible collapse-custom"  
−
<span style="font-weight:bold; color:brown"><nowiki>|-</nowiki></span>
+
|-
−
<span style="font-weight:bold; color:brown">|</span>''TEXT HERE''
+
! colspan="3" |SINGLE HEADING TEXT HERE  
−
<span style="font-weight:bold; color:brown">|- </span>
+
|-
−
<span style="font-weight:bold; color:brown">|</span>more text
+
|more text || some more text || another thing
−
<span style="font-weight:bold; color:brown"><nowiki>|}</nowiki></span>
+
|-
−
  <span style="font-weight:bold; color:brown"><nowiki>|}</nowiki></span>
+
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 +
|}  
 +
  </nowiki></code>
  
−
{| class="infobox bordered" style="width: 25em; text-align: left; font-size: 90%;"
+
{| class="mw-collapsible collapse-custom"  
 +
|-
 +
! colspan="3" |SINGLE HEADING TEXT HERE
 
|-
 
|-
−
|''TEXT HERE''
+
|more text || some more text || another thing
 
|-
 
|-
−
|more text
+
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
−
|}
+
|}  
  
  
−
<span style="font-weight:bold; color:brown"><nowiki>{| class="infobox" style="margin:0.5em; "</nowiki></span>
 
−
<span style="font-weight:bold; color:brown"><nowiki>|-</nowiki></span>
 
−
<span style="font-weight:bold; color:brown">|</span>''TEXT HERE''
 
−
<span style="font-weight:bold; color:brown">|- </span>
 
−
<span style="font-weight:bold; color:brown">|</span>more text
 
−
<span style="font-weight:bold; color:brown"><nowiki>|}</nowiki></span>
 
  
−
{| class="infobox" style="width: 25em; text-align: left; font-size: 90%;"
+
===Table/div classes for notices===
 +
====info-notice====
 +
{| class="info-notice"
 
|-
 
|-
−
|''TEXT HERE''
+
|colspan="2" |This is a table with class="info-notice" ---- 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.
 
|-
 
|-
−
|more text
+
|I'm another row || I'm another cell in <that row
 
|}
 
|}
 +
 +
<div class="info-notice"> This is a div with class="info-notice"</div>
 +
====strong-notice====
 +
{| class="strong-notice"
 +
|-
 +
|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.
 +
|}
 +
====mild-notice====
 +
{| class="mild-notice"
 +
|-
 +
|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 colouring===
 +
Used in templates called by [[Buildings (TW3K)]]
 +
<div class="required"> This is a div with class="required"</div>
 +
<br>
 +
<div class="unlocked"> This is a div with class="unlocked"</div>
 +
 +
=Headings=
 +
Standard headings including ^that one shown here
 +
==Heading 2==
 +
===Heading 3===
 +
====Heading 4====
 +
=====Heading 5=====
 +
======Heading 6======
 +
  
 
[[Category:Wiki Administration]]
 
[[Category:Wiki Administration]]

Latest revision as of 01:22, 18 April 2020

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.

TOC adjustments by CSS

Edit to remove the nowiki tags on one at a time to view:

<div class="nonumbertoc">__TOC__</div>

<div class="toclimit-3">__TOC__</div>

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.

Classes for column spacing

Responsive column layout

A responsive column layout from http://www.responsivegridsystem.com/ is in use on the portal and main pages - the classes may also be used elsewhere to achieve a two or three column wide layout that stacks into a single column on small screens the code is as follows:

Two equal columns

<div class="TWCRsection TWCRgroup">
<div class="TWCRcol span_1_of_2">
Lorem ipsum etc.
</div>
<div class="TWCRcol span_1_of_2">
Lorem ipsum etc.
</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.

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.

Two columns split 40/60%

<div class="TWCRsection TWCRgroup">
<div class="TWCRcol span_40pct_of_2">
Lorem ipsum etc.
</div>
<div class="TWCRcol span_60pct_of_2">
Lorem ipsum etc.
</div>
</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.

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.

Reverse the order to have the larger column first.

Three columns

<div class="TWCRsection TWCRgroup">
<div class="TWCRcol span_1_of_3">
Lorem ipsum etc.
</div>
<div class="TWCRcol span_1_of_3">
Lorem ipsum etc.
</div>
<div class="TWCRcol span_1_of_3">
Lorem ipsum etc.
</div>
</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.

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.

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.

.span_2_of_3 is also available which spans the width of 2 out of 3 columns .span_full gives 100% width, but probably isn't necessary as that would be default behaviour without the class

If you want to try and invent anything for additional layouts it would need to be added to the Common.css to work for everyone viewing pages.


Tables

Default appearance of a table with no class/styling: 


 {| 
 |-
 ! HEADING TEXT HERE !! HEADING TWO !! THREE
 |-
 |more text || some more text || another thing
 |-
 |Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 |}
HEADING TEXT HERE HEADING TWO THREE
more text some more text another thing
Much more text for length here waffle waffle Waffle waffle waffle waffle Shut up now please!

class; infobox

Note infobox includes the float:right; clear:right; positioning which makes it suitable for things you want to float right! 


 {| class="infobox" 
 |-
 ! HEADING TEXT HERE !! HEADING TWO !! THREE
 |-
 |more text || some more text || another thing
 |-
 |Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 |}
HEADING TEXT HERE HEADING TWO THREE
more text some more text another thing
Much more text for length here waffle waffle Waffle waffle waffle waffle Shut up now please!

combined classes; infobox bordered


 {| class="infobox bordered" 
 |-
 ! HEADING TEXT HERE !! HEADING TWO !! THREE
 |-
 |more text || some more text || another thing
 |-
 |Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 |}
HEADING TEXT HERE HEADING TWO THREE
more text some more text another thing
Much more text for length here waffle waffle Waffle waffle waffle waffle Shut up now please!






class; wikitable


 {| class="wikitable" 
 |-
 ! HEADING TEXT HERE !! HEADING TWO !! THREE
 |-
 |more text || some more text || another thing
 |-
 |Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 |}
HEADING TEXT HERE HEADING TWO THREE
more text some more text another thing
Much more text for length here waffle waffle Waffle waffle waffle waffle Shut up now please!

class; mw-collapsible

The mw-collapsible class is in the MediaWiki core and can be called without needing to be in our Common.css - it provides the show/hide functionality but needs other styling or additional classes to make it look reasonable. Add mw-collapsed to start with the table contents hidden. 


 {| class="mw-collapsible" 
 |-
 ! HEADING TEXT HERE !! HEADING TWO !! THREE
 |-
 |more text || some more text || another thing
 |-
 |Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 |}
HEADING TEXT HERE HEADING TWO THREE
more text some more text another thing
Much more text for length here waffle waffle Waffle waffle waffle waffle Shut up now please!

Example below adds wikitable: 


 {| class="mw-collapsible wikitable" 
 |-
 ! HEADING TEXT HERE !! HEADING TWO !! THREE
 |-
 |more text || some more text || another thing
 |-
 |Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
 |}
HEADING TEXT HERE HEADING TWO THREE
more text some more text another thing
Much more text for length here waffle waffle Waffle waffle waffle waffle Shut up now please!


Example below adds collapse-custom tweak from our MediaWiki:Common.css, Note this only works well with a single top level heading, due to the Show/Hide button moving to the left: 


{| class="mw-collapsible collapse-custom" 
|-
! colspan="3" |SINGLE HEADING TEXT HERE 
|-
|more text || some more text || another thing
|-
|Much more text for length here waffle waffle || Waffle waffle waffle waffle || Shut up now please!
|}
SINGLE HEADING TEXT HERE
more text some more text another thing
Much more text for length here waffle waffle Waffle waffle waffle waffle Shut up now please!


Table/div classes for notices

info-notice

This is a table with class="info-notice" ---- 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.
I'm another row I'm another cell in <that row
This is a div with class="info-notice"

strong-notice

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.

mild-notice

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 colouring

Used in templates called by Buildings (TW3K)

This is a div with class="required"


This is a div with class="unlocked"

Headings

Standard headings including ^that one shown here

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Retrieved from "https://wiki.twcenter.net/index.php?title=Help:CSS_Classes&oldid=81035"