Help:Customizing colors

From the group that combats the Wikia skin, the Anti-Wikia alliance.
Jump to: navigation, search
Customizing Monaco
Getting Started talk

Overview


   Monaco new features
   Skins
   Skin comparisons
   Examples of customized
   Monaco skins

Customizing Layout


   Customizing colors
   Header
   Logo
   Sidebar
   Toolbox

Specific Skins


   Monaco/Dark skin
(changes)

 v  d  e 


First steps[edit source]

  • 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[edit source]

  • 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
Example page layout-colors.png


Code[edit source]

  • 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[edit source]

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

See also[edit source]

Basic information[edit source]

Advanced information[edit source]

General Monaco information[edit source]