REQUIRES SOURCE MODE
Here we will talk about some useful page elements users may or may not be familiar with, including CSS stuff and templates.
There is some CSS and HTML that allows for custom elements on this wiki. There are a few in particular to talk about, and they are:
- Collapsing Text
Tabbers are not "custom" in any sense, but the design is custom for this wiki. Tabbers can be a great way to shrink page size, while keeping headers and all the info available. Here is how to use one:
<tabber> |-|Title1=Text1 |-|Title2=Text2 </tabber>
You can put as many tabs as you want, but be wary that tabs will overlay each other if there is no extra space. Also be warned that infoboxes and other similar things will overlay tabbers and the content (including the headers). This should only be used on larger pages, or for aesthetics on appropriate pages (such as the main page or a blog).
Cards allow someone to show small bits of info about something. They are like a page-preview. To use cards do the following:
<div class="card"> <div class="card-image"></div> <div class="card-content"> <div class="card-title"></div> <div class="card-text"></div> <div class="card-link"></div> </div></div>
Images are applied like a usual image would be: [[File:Image.extension]], and the rest is self explanatory. With content, you can add an extra piece of info within the line to get different sized cards. Card-xl, Card-Lg, Card-md, Card-xs, will give you the sizes. Example of a Card:
<div class="card"> <div class="card-image">[[File:Gee Galaxy.png]]</div> <div class="card-content Card-xs"> <div class="card-title">United 'Gees Galaxy</div> <div class="card-text">The UGG is where Weegees reside and Weegee rules over.</div> <div class="card-link">[[United 'Gees Galaxy|Learn More]]</div> </div></div>
That will produce this:
Note that image by default will be 20% of its full size. Specifying a size using [[File:Image.ext|250px]] (or whatever width you want) will force the card to use that size. This can sometimes break the card, but not always. Also be wary about using too much text, because the scroll piece protrudes in, not out. Aligning the cards will use the text-align html, and can be centered, sent left, or sent right. Currently, text breaks, not wraps, and there is no known way to fix that.
Collapsing text can be used to make buttons that hide answers, or as an alternative to tabbers, with the difference being you can have multiple texts expanded at once.
To collapse text, simply input this:
<div class="mw-collapsible"> THE TEXT </div>
This will give you text, and a button that can be pressed to collapse or expand the text. There are many customization options:
<div class="mw-collapsible mw-collapsed"> This text is collapsed by default </div>
This text is collapsed by default
This gives you text that's collapsed by default.
<div class="mw-collapsible" data-expandtext="Illuminate" data-collapsetext="Deluminate"> TEXT </div>
This changes what the buttons say. You can also combine a bunch of these like so:
<div class="mw-collapsible mw-collapsed" data-expandtext="Show Answers" data-collapsetext="Hide Answers"> Answers </div>
Be wary that this doesn't work for mobile users, unless they're using the wikia skin.
Infoboxes are like a card in the format of a table. They summarize some info for you off to the side, but it displays like a table with headers, separation, and text areas. Pictures can also be placed on most infoboxes.
There are a couple of character infoboxes for use. One of them allows you to change the color on a specific page (see the page link for more info), and one of them is specifically for gods:
The pages themselves show how to use the infoboxes, as well as examples.
Other infoboxes exist for various purposes:
These pages also show how to use them and have examples.