How To Wiki

Quartz is an older default skin for Wikia wikis.


There are seven available themes for the Quartz skin.

  • Quartz-sapphire
  • Quartz-slate
  • Quartz-smoke
  • Quartz-sappier
  • Quartz-beach
  • Quartz-brick
  • Quartz-gamer
  • Quartz-custom

Setting default skin

To set your wiki's default skin

  • Edit Mediawiki:AdminSkin and enter the skins name in all lowercase
  • Set it in your User -- preferences -- skin -- Admin Options -- Set the default theme for this wiki:

Example of Wikihowto's: Mediawiki:AdminSkin


Wikihowto's wide logo

The new logo file for the logo/icon in the left top corner is named Wiki_wide.png. The maximum allowed size of this logo is 266x75 pixels.


This is the icon that is shown in the location bar of your browser. Have the image to 'Favicon.ico'. It should be 16px x 16px icon file (this is not a bitmap renamed with the extension .ico). It can be b/w, 16 color, or 256 color.

MediaWiki namespace

The MediaWiki namespace is the location for admins to edit menus, standard pages, warnings, etc. The files are named MediaWiki:xxxxx. Some of these apply to all skins while others are specific to Wikia's Quartz skins. There are dozens of configurations that can be made here.

A list of Wikihowto's MediaWiki configs can be found here, and Wikia's can be found Here

Sidebar box

The sidebar is the box that contains links to the main page, help page, and other basic links. Links in the sidebar are set on the MediaWiki:Sidebar page. Wikihowto has the following configuration, which appears as the box on the left.

* main
** mainpage|mainpage
** Wikihowto:About|About Wikihowto
** recentchanges-url|recentchanges
** helppage|help
* navigation
** Portal:Main|Howto Portal
** Help:Find|Find a Howto
** Help:Create|Make a Howto
** randompage-url|randompage
*page lists
**Help:Guide List|Guides

Some of these are variables with default settings. For example helppage is set to link to Help:Contents. You can set these variables yourself by altering other MediaWiki pages, such as MediaWiki:helppage See: Howto customize your MediaWiki site's appearance and functionality using the Mediawiki namespace for more details. Wikihowto's file can be found here.


The toolbox is similar to the sidebar. The configuration file is MediaWiki:Toolbox, however the only the editable in it is the header.



There are a column of links near the top center of the page that list by default:

  • Home
  • Forum
  • Random page
  • Create a new article

They are called NavLinks and can be altered in the MediaWiki:Navlinks file. Up to two columns can be added.

  • Example code
....tobe finished.....

Configuration file

Installing CSS Viewer for Firefox helps editing and debugging the CSS code.

  • The main configuration for the QuartzSlate skin is MediaWiki:Quartzslate.css, and MediaWiki:Quartzsmoke.css for Quartzsmoke. Any settings written in these file will override the default setting for the respective skin. MediaWiki:common.css overrides all other configurations for all skins. These file is written in CSS code.

Quartz CSS files

Full content wikicss files

  • main.css
  • Full css code from all loaded css files: this is useful when you are trying to match a html tags, id or class with the default css parameters
  • Wikihowto's file: MediaWiki:Quartzslate.css


These configurations are made in both the css files and MediaWiki namespace.

Header section

The header section consists of a number of sections, the user, search....

table#navLinksWikia a {
       color: #0e2422;
       background-image: url(;
#header, ul#wikia, ul#wikia li {
       background-image: url(;
#header a {
       color: #dddddd;
#header a:hover {
       color: #bbbbbb;
#header {
       color: #ffffff;

User section

ul#welcome li.user {
     color: #e7b24e;
     background-image: url(;
.roundedDiv div.r_boxContent, .roundedDiv b.xb2, .roundedDiv b.xb3, .roundedDiv b.xb4, #userMenu{
     background-color: #0e2422;

#userMenu a {
     color: #FFF !important;

#userMenu a:hover {
     color: #FFF;
     background-color: #0e2422;

Search section

#search div {
       background-image: url(;
#search input {
       border-color: #e7b24e;


body {
     background-position: top right;
     background-repeat: repeat-x;
     background-color: #b5c2be;

Article box

#article {
        position: relative;
.articleBar, .articleBar div {
        background-image: url(;
#article {
	background: #FFF;
	font-size: 127%;
	line-height: 1.5em;
	padding: 15px;
	min-height: 300px;
        border-width: 1px;
        border-style: solid;
        border-color: #9b753f;

Top content box

The following hides the Top content box (this no longer works)

#WidgetTopContent_1_wg {
       display: none;

Wikia spotlights box

The following sets the spotlights boxes background color.

#spotlights {
     background-color: #0e2422;

Footer be added...

See Also


From HowTo Wiki, a Wikia wiki.