Classes and ID's are added to HTML elements to give them properties that are defined in CSS files. Here is an example:
<div class="class-name">contents</div>
Note: The quotation marks are not there just for readability. They are required for the code to work. Also, unlike style properties, there should be no semi-colon after the class name.
Classes, ID's, and styling can be defined in the same element. This example element has a class and some styling:
<span class="text-border-black" style="color: red; font-size: 150%;">Text</span>
Result:
Text
An element can also have multiple classes. Class names are separated by spaces in the class attribute. In this example, the element has the banner-theme-blackguard class as well as the mini-banner class.
<div class="banner-theme-blackguard mini-banner">Text</div>
Result:
On the wiki, our CSS files are located in the MediaWiki namespace which is only editable by administrators. The main one is MediaWiki:Wikia.css.
ID's are defined in a similar way, but they are only used for specific things, so you do not need to worry about them, but it is important to note that the same ID should NOT be used more than once on the same page.
The following are classes that are set up here on the wiki.
| Class | Example Code | Example Result |
|---|---|---|
| clickable-div | <center><div class="clickable-div" style="display: inline-block; position: relative; width: 80px; height: 60px; border: 4px firebrick solid; background-color: red; text-align: center;"> Go to my user page [[File:Blank.png|link=User:King Dragonhoff]] </div></center> | Go to my user page
|
| banner-main | <div class="banner-main" style="width: 180px;">Text</div> | |
| banner-sidebar | <div class="banner-sidebar" style="width: 160px;">Text</div> | |
| banner-button (used with the clickable-div class to make buttons) |
<div class="banner-button" style="width: 150px;"></div> | |
| table-back (typically placed around Wikitables) |
<div class="table-back" style="width: 200px;"></div> | |
| versionhistory (Used to format the text on the Version History page) |
<p class="versionhistory"> Text </p> | Text |
| text-bangers-header | <p class="text-bangers-header"> Text </p> | Text |
| text-border-black | <p class="text-border-black" style="color: white;">Text</p> | Text |
| hidden (Any elements with this class will be hidden on the wiki's mobile skin.) |
<p class="hidden">If you can see this, you are not on the mobile skin.</p> | If you can see this, you are not on the mobile skin. |
Themed Banners The banners above are meant for main namespace pages. If you would like to use a banner on your user page or blog post, please use one of the banners shown on this table. Click "Expand" to view them. | ||
|---|---|---|
| banner-theme-ice | <div class="banner-theme-ice">Text</div> | |
| banner-theme-lavarock | <div class="banner-theme-lavarock">Text</div> | |
| banner-theme-blackguard | <div class="banner-theme-blackguard">Text</div> | |
| banner-theme-terror | <div class="banner-theme-terror">Text</div> | |
| banner-theme-fiery | <div class="banner-theme-fiery">Text</div> | |
| banner-theme-electric | <div class="banner-theme-electric">Text</div> | |
| banner-theme-steel | <div class="banner-theme-steel">Text</div> | |
| banner-theme-gold | <div class="banner-theme-gold">Text</div> | |
| banner-theme-sunrise | <div class="banner-theme-sunrise">Text</div> | |
| banner-theme-moonlight | <div class="banner-theme-moonlight">Text</div> | |
| banner-theme-sky | <div class="banner-theme-sky">Text</div> | |
| banner-theme-caution | <div class="banner-theme-caution">Text</div> | |
| banner-theme-explosion | <div class="banner-theme-explosion">Text</div> | |
| mini-banner (used to make banners smaller) |
<div class="banner-theme-ice mini-banner">Text</div> | |
Icon Fonts[]
We currently have two icon fonts installed on the wiki, Ionicons and Font Awesome. You add an icon by adding a class to an element. Span elements are typically the best tag to use so that the icon renders in-line with regular text. Here is an example that uses an icon from Ionicons:
Text <span class="ion-flag"></span> Text
Result:
Text Text
Both Ionicons and Font Awesome icons can have style added to them like normal text as well. Example:
Text <span class="ion-flag" style="font-size: 140%; color: red;"></span> Text
Result:
Text Text
Visit the Ionicon cheatsheet or the Font Awesome cheatsheet to see the icons and the class name for each icon. For Font Awesome, remember to add the "fa" class before the icon's class. All the Font Awesome icons follow this syntax:
<span class="fa fa-NAME"></span>
All of the Ionicons follow this syntax:
<span class="ion-NAME"></span>
| Back |
| Return to Editing Guide List |
| Next |