Help:Customizing Monaco

How to customize the Monaco skin. For skin features, see Help:Monaco skin features.

See also Help:Examples of customized Monaco skins.

Upload a Logo
Adding a logo will give your wiki a unique look. To create and upload a logo:


 * 1) Create a logo in any graphics editing program and be sure that:
 * 2) *the size is 266 pixels wide by 75 pixels tall
 * 3) *it's saved as a .png file (feel free to use transparency in your logo)
 * 4) Upload the logo with a destination file name of Image:Wiki_wide.png.


 * Here are some cool custom logos:


 * {| border="1" cellpadding="5" cellspacing="0"


 * [[Image:Monaco_wookielogo.png]]
 * [[Image:Monaco_marveldblogo.png]]
 * [[Image:Monaco_dofuslogo.png]]
 * [[Image:Monaco_muppetwikilogo.png]]
 * }
 * [[Image:Monaco_muppetwikilogo.png]]
 * }
 * }
 * }

Note: some of these examples are larger then 266x75 size stated above.

Customize the Navigation
Wikia's Monaco skin has a robust navigation that can be fully customized. The navigation is broken into two sections: the Main Navigation, which is multi-level, and the two-column Link Toolbox.
 * For admins - you can set the default navigation seen by everyone by editing a few MediaWiki namespace articles.
 * For users - you can set a custom navigation for yourself only by editing a few User sub-pages.

Main Navigation

 * Admins - To customize the main navigation menu just below the search box, edit the MediaWiki:Monaco-sidebar page. Until you fill in your own values for the Monaco-sidebar article on your own wiki, we will use default values from this page on Messaging: http://messaging.wikia.com/wiki/MediaWiki:Monaco-sidebar (this default page can only be changed by Wikia staff).
 * Users - To customize the main navigation menu just below the search box, edit the User:/Monaco-sidebar page (Special:Mypage/Monaco-sidebar). For instance, User:Johnq/Monaco-sidebar, and create your own main navigation.


 * Each asterisk represents a level in the menu hierarchy. In this example, the three top-level items displayed in the sidebar are "Superheroes Wiki", "Characters" and "Comics".


 * Hovering over the "Characters" item will bring up the second tier of the menu, "Heroes" and "Villains". The articles about Superman, Batman and Spider-Man are nested inside the "Heroes" submenu.


 * The menu items automatically link to their respective articles. If you'd like to specify different text for the menu item, first use the article name followed by a pipe character (|), followed by the display name. You can also use MediaWiki messages (see Special:Allmessages on your wiki).

* mainpage | Superheroes Wiki * #popular# | Editor's pick   (see "magic word" section below) * Category:Characters | Characters ** Category:Heroes | Heroes *** Superman *** Batman *** Spider-Man ** Category:Villians | Villians *** Lex Luthor *** Penguin *** Green Goblin * Category:Comics | Comics ** DC Comics ** Marvel Comics * #category-minorcharacters#  (see "magic words" section below)


 * Main Navigation - Magic Words
 * In addition, we've added a few "magic words" that you can use in the Main Navigation. The new magic words are as follows:


 * #category1# = Creates a multi-level menu item that displays the name of the category with the most articles, shows the top 7 pages in that category, and has a "see more..." link to the category page.
 * #category2# = Same as above but for the category with the 2nd most number of articles.
 * #category- # = you can specify a particular category name ( #category-superheroes#, for instance).
 * #popular# = This is meant to be an "editor's choice" list that the admin of each wiki can populate. You can add articles to the top of this list here: Special:Mostpopulararticles. If there are no entries on that page (or fewer than 7 entries), the rest of the list will automatically be populated with the articles with the highest traffic on that wiki.
 * #visited# = a list of the articles with the most traffic on that wiki.
 * #voted# = a list of the highest ranked articles by vote.
 * #newlychanged# = articles that have most recently been changed.
 * #topusers# = a list of featured users.


 * Note: For the #category1# and #category2# magic words, categories with certain keywords will be excluded from the #category1# and #category2# lists. Here are a list of the keywords that we'll exclude: Image/images, Stub/stubs, Screenshot/screenshots, Screencap/screencaps, Article/articles, Copy edit, Fair use, File/files, Panel/panels, Redirect/redirects, Template/templates, Delete/deletion, TagSynced. We will do our best to filter these words in other languages as well so that this method of automatically choosing relevant categories works as well as possible. If you specifically want a category with one of those keywords on the main nav, then use #category- # and replace the " " with the category name you want.


 * If you wish to include a category with a space in the name, e.g. "Wikia Widgets", replace the space with an underscore, e.g. #category-Wikia_Widgets#.

Link Toolbox

 * Admins - To customize the link toolbox, which appears underneath the main navigation, edit the MediaWiki:Monaco-toolbox page on your own wiki
 * Users - To customize the link toolbox, which appears underneath the main navigation, User:/Monaco-toolbox page (Special:Mypage/Monaco-toolbox). For instance, User:Johnq/Monaco-toolbox, and create your own main navigation.

Until you fill in your own values for the Monaco-toolbox article on your own wiki, we will use default values from this page on Messaging: http://messaging.wikia.com/wiki/MediaWiki:Monaco-toolbox (this default page can only be changed by Wikia staff).


 * The list of links is automatically separated into two columns. The link formatting is the same as the multi-level menu.

* randompage-url|Random page * upload-url|Upload file * whatlinkshere|What links here * recentchanges-url|Recent changes * specialpages-url|Special pages * helppage|Help


 * In addition, we automatically add 3 special links to this list for user pages, user talk pages, and user profile pages (this last for wikis that have the social tools added). Those links are user contributions, email this user, and block user. Block user will only show up for admins.

Pre-built color customization
We have provided some pre-built options for changing the color scheme for Monaco. Anyone can go to their preferences, click on the skins tab, and select one of the pre-built color schemes for Monaco. In addition, admins can change the default color scheme displayed to all users in the "Admin Options" section at the bottom of Preferences > Skins (this section only shows up if you are an admin for that particular wiki).

Custom color customization
To create a custom theme to display as the default for all users, select "Monaco Custom" in the admin options and edit MediaWiki:Monaco.css to specify your custom CSS. The easiest change is to specify a new color for the "color1" and "color2" classes. Just by changing these two classes, your wiki will take on a look of its own.



 .color1, .color1 a { background-color: Green; color:           White; }

.color2 { background-color: PapayaWhip; }  A full CSS customization guide can be found below. 

Full Customization Guide
Editing the "color1" and "color2" 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 Menu 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.

 .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 Widgets
All widgets share the class "widget". By styling this class, all widgets will be affected.

.widget { background-color: red; }

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 {

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 {

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 {

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

Creating a dark skin
Creating a skin with light text on a dark background is more involved than the tweaks listed above. You can find out more on Help:Customizing Monaco/Dark skin.