How to customize Wikia's Quartz skin

Quartz is an older default skin for Wikia wikis.

Themes
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
 * or

Example of Wikihowto's: Mediawiki:AdminSkin
 * Set it in your User -- preferences -- skin -- Admin Options -- Set the default theme for this wiki:

=Logos=

Main 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.

Favicon.ico
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. 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.
 * 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:Objects_List|Objects
 * Help:Howto_List|Howtos
 * Help:Guide List|Guides

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

NavLinks
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.

....tobe finished.....
 * Example code
 * 1
 * home|home

=Configuration file= Installing CSS Viewer for Firefox helps editing and debugging the CSS code.
 * Download here


 * 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
 * Smoke
 * 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:Quartzsmoke.css


 * Slate
 * http://images.wikia.com/common/skins/wikia/slate/css/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

=Configurations= 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(http://images.wikia.com/howto/en/images/f/f1/Skin_bullets.gif); }      background-image: url(http://images.wikia.com/howto/en/images/0/09/Skin_header_bg.gif); }      color: #dddddd; }      color: #bbbbbb; }      color: #ffffff; }
 * 1) header, ul#wikia, ul#wikia li {
 * 1) header a {
 * 1) header a:hover {
 * 1) header {

User section
ul#welcome li.user { color: #e7b24e; background-image: url(http://images.wikia.com/halo/images/9/9b/Skin_user_menu.gif); } .roundedDiv div.r_boxContent, .roundedDiv b.xb2, .roundedDiv b.xb3, .roundedDiv b.xb4, #userMenu{ background-color: #0e2422; }

color: #FFF !important; }
 * 1) userMenu a {

color: #FFF; background-color: #0e2422; }
 * 1) userMenu a:hover {

Search section
background-image: url(http://images.wikia.com/halo/images/d/d6/Skin_search.gif); }      border-color: #e7b24e; }
 * 1) search div {
 * 1) search input {

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

Article box
position: relative; } .articleBar, .articleBar div { background-image: url(http://images.wikia.com/howto/en/images/e/e7/Skin_article_bars.gif); }	background: #FFF; font-size: 127%; line-height: 1.5em; padding: 15px; min-height: 300px; border-width: 1px; border-style: solid; border-color: #9b753f; }
 * 1) article {
 * 1) article {

Top content box
The following hides the Top content box (this no longer works) display: none; }
 * 1) WidgetTopContent_1_wg {

Wikia spotlights box
The following sets the spotlights boxes background color. background-color: #0e2422; }
 * 1) spotlights {

Footer
...to be added...

=See Also=
 * Howto customize your MediaWiki site's appearance and functionality using the Mediawiki namespace

=References=
 * Wikia's official quartz skin configuration
 * Wikia: Wiki configuration
 * Wikia: Featured Wikia Design
 * Code examples taken from here.

From HowTo Wiki, a Wikia wiki.