How To Wiki

How to customize Wikia's Quartz skin

1,795pages on
this wiki
Add New Page
Add New Page Talk0

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 skinEdit

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



Wiki wide

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 namespaceEdit

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 boxEdit

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 fileEdit

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 filesEdit

Full content wikicss files



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

Header sectionEdit

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 sectionEdit

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 sectionEdit

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


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

Article boxEdit

#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 boxEdit

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

#WidgetTopContent_1_wg {
       display: none;

Wikia spotlights boxEdit

The following sets the spotlights boxes background color.

#spotlights {
     background-color: #0e2422;

FooterEdit be added...

See AlsoEdit


From HowTo Wiki, a Wikia wiki.

Also on Fandom

Random Wiki