Help:Customizing colors

First steps

 * To create a custom skin which will act as a default for all users, select "Custom" in the admin options in your preferences
 * You will then need to create and edit the MediaWiki:Monaco.css page on your wiki. This page does not come as a default, so you need to create it to start.

Getting started on customizing

 * Each section on the wiki skin is modified by adding a new line of code to the MediaWiki:Monaco.css page.
 * You can find view the color options on the wiki color page.
 * To start you will add 4 classes, which will control the main parts of the skin.
 * You will need to copy the code below exactly, paste it onto the Monaco.css page, then modify the colors to your liking.


 * color1: controls the color of the header menu (top toolbar with links to edit, etc) when you are not editing.
 * color2: controls the top most section as well as colors on the left and right side.
 * accent: is a tinted version of color1, seen below color1 on widgets and other features
 * neutral: also a tinted version of color1, but that appears at the bottom of the sidebar, that offsets slightly from the main article background color



Code

 * To modify the color classes, you will need to add specific wikitext code to the MediaWiki:Monaco.css page.

 .color1 { background-color: Green; color:           White; } .color1 a { color:           White; } .color2 { background-color: 	LightGoldenRodYellow; } .accent { background-color: PaleGreen; border-color: Green; color: Black; } .neutral { background-color: #EEEEEE; border-color: #AAAAAA; color: #000000; }

Things to note

 * Before adding each color class name, be sure to include a period. For example .color1
 * Colors form the color choice page, can be listed as either the html color name or hex code
 * After each color class, a { is used, which is then closed using } after the colors are defined. You must have both of these for the change to work.
 * Each class can include 2 - 3 color options
 * background-color: is the main color that will show
 * border-color: is the color of the border around that area
 * color: is the color of the non-link text (if any exists there)
 * a (such as .color1 a above), when listed after a color/section and before the {, it refers to the color of the links in that section
 * All punctuation is important here, so be sure to include all : ; { } #


 * Edits to MediaWiki:Monaco.css will not show up for visitors until the site default is switched to Monaco Custom. In both cases, leave the site default on a preset Monaco theme until the custom theme is ready to go live.

Basic information

 * Basic skin chooser

Advanced information

 * Customizing header colors
 * Tips for creating a dark skin
 * Custom widgets
 * Getting Started

General Monaco information

 * Help:Monaco skin features
 * Help:Examples of customized Monaco skins
 * Category:Monaco skin