Fandom

Archived Help Wiki

Halp:Customizing colors

130pages on
this wiki
Add New Page
Talk0 Share
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

  • 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

  • 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


Code Edit

  • 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

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

Basic informationEdit

Advanced informationEdit

General Monaco informationEdit

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.