Customizing colors
From Monaco help Wiki
Customizing Monaco | |||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
First steps[edit | 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 | 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
Code[edit | 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 | 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 | edit source]
Basic information[edit | edit source]
Advanced information[edit | edit source]
General Monaco information[edit | edit source]
- This article uses material from the "Halp:Customizing colors" article on Archived Help Wiki and is licensed under the Creative Commons Attribution-ShareAlike license.