Help:Customizing Monaco/Getting Started

Editing the "color1", "color2", "accent" and "neutral" classes (as described above) is the best way to start any customization. This guide will help you further customize your wiki. These elements can be added to MediaWiki:Monaco.css.

If you are an admin wanting to customize your Monaco skin and do not want your edits to show live, either:


 * Set your skin to Monaco Sapphire and edit Special:Mypage/monaco.css.
 * Or, edit MediaWiki:Monaco.css and view pages using Article_name?useskin=monaco&usetheme=custom (e.g. http://help.wikia.com/Help:Customizing_Monaco?useskin=monaco&usetheme=custom)

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.

Customizing the Header
There are several unique elements in Monaco's top header. This section will help you to customize the header itself, the Wikia logo, the menu buttons and menus, and the widget cockpit.



Header Background
The header style is initially defined by the class "color2".

background-color: red; border-color:    Black; }
 * 1) wikia_header {

Wikia Logo
To customize the color of the Wikia logo, you'll need to download the Monaco Wikia logo template, adjust the color, and upload the resulting file to your wiki.

Some sample customized headers are on the Help:Customizing Monaco/Header image colors page.

 background-image: url(URL_TO_YOUR_IMAGE); }  background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_TO_YOUR_IMAGE', sizingMethod='crop'); }
 * 1) wikia_logo {
 * html #wikia_logo {



Header Menu Buttons
As with the Wikia Logo, the header menu buttons are graphics that can be customized with an image editor.

Some sample customized headers are on the Help:Customizing Monaco/Header image colors page.

 .headerMenuButton dt, .headerMenuButton dd { background-image: url(URL_TO_YOUR_IMAGE); }  background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_TO_YOUR_IMAGE', sizingMethod='crop'); }
 * html .headerMenuButton dt, * html .headerMenuButton dd {



Header Menus
Header menus have a very slight amount of transparency. The transparency properties have been included in the code example below. The header menus' style is initially defined by the class "color1".

.headerMenu, .headerMenu a { background-color: red; color:           White; -moz-opacity:    .95; opacity:         .95; }

Widget Cockpit
background-color: red; }
 * 1) widget_cockpit {

Background Strip
The background strip is the wide band just below the header that contains the wiki logo.

background-color: red; }
 * 1) background_strip {

The background strip also contains two divs that can be used for additional accent graphics. The divs are already positioned absolutely within the background strip, so just set a background image, height, width, and any positioning.

background-image: url(URL_TO_YOUR_IMAGE); height: 155px; width: 300px; }
 * 1) accent_graphic1 {

background-image: url(URL_TO_YOUR_IMAGE); height: 155px; width: 1000px; top: 20px; right: 20px; }
 * 1) accent_graphic2 {

Customizing the Sidebar
All items in the sidebar on the left are contained inside a div with the id

Widgets
All widgets share the class "widget". By styling this class, all widgets will be affected.

.widget { background-color: red; }

Additionally, each widget has a unique identifier for that widget, so you can style some extra things for 1 widget, without affecting all widgets.

Note: Widgets that are embedded into a page using the Widget tag also have this  class, so if you need to affect just the sidebar, or just the embedded ones, place   or   at the start of your CSS rule.

Widget Headers
The widget headers' style is initially defined by the class "color1".

.widget dt { background-color: red; }

Search Box
Subtle shading is automatically added to the specified background color. To remove the shading, set background-image: none. The search box's style is initially defined by the class "color1".

background-color: red; }
 * 1) search_box {

The text inside the search box is by default "Search ". You can adjust it by changing the MediaWiki:Tooltip-search page.

Search Button
As with the Wikia Logo and header buttons, the search button is a graphic that can be customized with an image editor.

 background-image: url(URL_TO_YOUR_IMAGE); }  background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_TO_YOUR_IMAGE', sizingMethod='crop'); }
 * 1) search_button {
 * html #search_button {



Navigation
If you want to specify a color for the navigation items that is different than the widget background color, use the following selector.

background-color: red; }
 * 1) navigation a {

Use this selector to specify the hover color of your navigation.

background-color: red; }
 * 1) navigation a:hover, .navigation-hover {

Link Box
The link box sits just below the navigation in the first widget.

background-color: red; }
 * 1) link_box {

color: white; }
 * 1) link_box a{

Page Bar
The page bar contains the Article/Discussion tabs as well as the actions for the page (Edit, History, etc). Subtle shading is automatically added to the specified background color. To remove the shading, set background-image: none. The page bar's style is initially defined by the class "color1".

background-color: red; }
 * 1) page_bar {

color:           White !important; }
 * 1) page_controls a {

Page Tabs
The page tabs, in most cases, are the Article and Discussion tabs within the page bar. The second selector sets the color of the currently selected tab.

background-color: red; }
 * 1) page_tabs li {

background-color: White; }
 * 1) page_tabs li.selected {

It's a good idea to make the selected tab's background color match the background color of the article.

Article
background-color: red; }
 * 1) wikia_page {

Customizing My Home and the user masthead


My Home and the user masthead use a few new color classes.

.accent { background-color: White; }
 * Accent defines the background color in the user masthead. (see #1 in the black circle)
 * If .accent conflicts with something in your wiki's templates/other stylings, you can adjust this to be

color: black; }
 * User_masthead h2 defines the text color of the Username in the masthead. (See the #2 purple item)
 * 1) user_masthead h2 {


 * Next to the Username, is an editcount and a date, this is inside a  tag with the ID of user_masthead_since (item #3). No extra styling is required on this, as it will use the color from the h2 above, but this ID is available if you want to style this element on its own.

.dark_text_1 { color: Firebrick; }
 * dark_text_1 defines the color used ontop of the accent color. This is mainly used for the edit count on the top right of the user masthead right now (item #6), but along with, it  will be used elsewhere in the masthead project later, so its a good idea to set this text color by this class, not just the large edit count on its own.


 * You can affect the large edit count on the right side (see the #6 item on the map) on its own, separate from the .dark_text_1 color, by using

.dark_text_2 { color: #006400; }
 * Dark_text_2 defines the color used for the headings on the My Home page.

Tabs

 * The default colors for the inactive tabs is defined by color1. This is the same as the normal pagebar and widget title color used in most of the skin. You can further control the background and link colors of both the inactive and active tabs. The inactive tabs are indicated by #4 on the MyHome sample map above, and the active tab is indicated by #5.

/* inactive tab background color */ background-color: #00689A; }
 * 1) user_masthead #user_masthead_tabs li {

/* inactive tab link color */ color: #ffffff; }
 * 1) user_masthead #user_masthead_tabs li a {

/* active tab background color */ background-color: #70B8FF !important; }
 * 1) user_masthead #user_masthead_tabs li.selected {

/* active tab link color */ color: #ffffff !important; }
 * 1) user_masthead #user_masthead_tabs li.selected a {

/* pagebar colorings (only on masthead pages) Note: It is a good idea, but not required, to keep these the same colors picked for the "selected" tab */ .masthead-regular #page_bar, .masthead-special #page_bar { background-color: #70b8ff !important; }

.masthead-regular #page_bar a, .masthead-special #page_bar a { color: #ffffff !important; }



Customizing the Latest activity widget
The Latest activity widget in the sidebar uses some of the same colors as the user masthead.

The article number is controlled by dark_text_1, and the background of that area is controlled by accent.

The line under that area is controlled by the border-color styling under "accent". For example:

.accent { background-color:#D6E0F5; border-color:#3366CC; color:#000000; }

Testing the Customizations
To test your customizations before deploying the changes to all users as the default, use the useskin and usetheme CGI parameters in your URL to access your wiki. For example, the customized Monaco theme on the WoWWiki may be accessed regardless of your preferred skin and theme selection or the default skin and theme using the following URL: http://www.wowwiki.com/index.php?title=Main_Page&useskin=monaco&usetheme=custom