Editing Battlestar Wiki:CSS

{{Project|CSS|shortcut=BW:CSS}}

To help you understand how to use the new "Styles" that have been installed, this reference article has been created to tell you the most basic options on how to create "cross-compatible" elements with all the styles. This happens because each style has there own CSS file and their own colors. So no matter how you look at the elements, they always show up the same way. These are the major ones so that's why they are here.

== Creating Infoboxs ==

=== Example ===
{| class="infobox"
|- class="infoboxheader"
| colspan="2" style="text-align: center;" | class="infoboxheader"
|-
| style="white-space: nowrap;"| '''Overall Class:'''
| class="infobox"
|}
* '''infobox''': Always pushes table to the right
* '''infoboxheader''': Highlight a row or cell.
=== Code ===
<pre>
{| class="infobox"
|- class="infoboxheader"
| colspan="2" style="text-align: center;" | class="infoboxheader"
|-
| style="white-space: nowrap;"| '''Overall Class:'''
| class="infobox"
|}
</pre>
== Creating Message Box ==

=== Example ===
{{message box
|heading= Heading
|message= Message goes here<br/>Message can span multiple lines, but make sure to use <nowiki><br/></nowiki> to separate them.
|id= messagebox1
|image= BSG_WIKI_Project.png
|shortcut= BW:CSS
}}
* Heading: Will appear in bold on top of the message box.
* Message: The content of the message box
* ID: ID of the message box. If set, you can jump to the messagebox with PAGENAME#ID
* Image: The image that should be shown in the left column, without the Image: prefix.
* Shortcut: Contents of the shortcut box. If unset, the shortcut box will be hidden.
=== Code ===
<pre>
{{message box
|heading= Heading
|message= Message goes here<br/>Message can span multiple lines, but make sure to use <nowiki><nowiki><br/></nowiki></nowiki> to separate them.
|id= messagebox1
|image= BSG_WIKI_Project.png
|shortcut= BW:CSS
}}
</pre>

== Creating Content Boxes ==

=== Example ===
{| id="joe" class="contentbox" width="100%" cellpadding="2" cellspacing="5"
! class="contentbox-th" |  <!-- Nothing ever goes here -->
{| class="contentbox-header"
| {{Click|image=BSG WIKI Joe.png|link=#joe|width=25px|height=25px}}
| class="contentbox-header"
|}
|-
| class="contentbox"
|-
|}
* '''contentbox''': Used on the overall table
* '''contentbox-th''': If you are going to have a table caption, you need this.
* '''contentbox-header''': Used on internal table that is inside "contentbox"

=== Code ===
<pre>
{| class="contentbox" width="100%" cellpadding="2" cellspacing="5"
! class="contentbox-th" |  <!-- Nothing ever goes here -->
{| class="contentbox-header"
| {{Click|image=BSG WIKI Joe.png|link=#Intro|width=25px|height=25px}}
| class="contentbox-header"
|}
|-
| class="contentbox"
|-
|}
</pre>

== Creating collapsible tables ==
=== Example ===
{| class="navbox collapsible collapsed" width="100%"
! class="infoboxheader" colspan="2" align="left" | Heading
|-
| Content goes here
|}

* Collapsed: If ''collapsed'' is set, the table will be collapsed initially. If you want the table to be expanded initially, omit collapsed.
* Autocollapse: If ''autocollapse'' is set, the table will only be expanded initially if it's the only collapsible table on the page. If there are more, it'll be collapsed initially.

Note: You can make any table collapsible, not just navboxes. Simply add <code>class="collapsible"</code>.

=== Code ===
<pre>
{| class="navbox collapsible collapsed" width="100%"
! class="infoboxheader" colspan="2" align="left" | Heading
|-
| Content goes here
|}
</pre>

== Creating sortable tables ==
=== Example ===
{| class="messagebox sortable"
! Name !! Address !! ZIP code
|- 
| John Doe || 1239 Figueroa Ave || 1234hx
|-
| Bill Example || 260 Park Ave || 1234HX
|-
| Jane Doe || 148 13th St. || 123456
|}
*Note that:
**The tables sort alphabetically, not numerically. This might cause unexpected results when you sort by Address in this example.
**Numbers are sorted above letters. Captial letters are sorted the same as their lowercase equivalents. Sort by the ZIP Code field in this example to see for yourself.
**In the same fashion, the Name field will by sorted by first name, not by last name. If you want to sort by last names, make a separate field for last names.
**Any table can be made sortable just by adding <code>sortable</code> to the <code>class=</code> list.
=== Code ===
<pre>
{| class="messagebox sortable"
! Name !! Address !! ZIP code
|- 
| John Doe || 1239 Figueroa Ave || 1234hx
|-
| Bill Example || 260 Park Ave || 1234HX
|-
| Jane Doe || 148 13th St. || 123456
|}
</pre>