Monaco Skin Customization

From Inside Wikia

This article has been copied to Wikia Help. See Help:Customizing Monaco.

Contents 1 Upload a Logo 2 Customize the Navigation 2.1 Main Navigation 2.2 Link Toolbox 3 Customize the Colors 3.1 Pre-built color customization 3.2 Custom color customization 4 Full Customization Guide 4.1 Customizing the Header 4.1.1 Header Background 4.1.2 Wikia Logo 4.1.3 Header Menu Buttons 4.1.4 Header Menus 4.1.5 Widget Cockpit 4.1.6 Background Strip 4.2 Customizing the Widgets 4.2.1 Widget Headers 4.2.2 Search Box 4.2.3 Search Button 4.2.4 Navigation 4.2.5 Link Box 4.3 Customizing the Article Area 4.3.1 Page Bar 4.3.2 Page Tabs 4.3.3 Article 4.4 Testing the Customizations

[edit] 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:
   • the size is 135 pixels wide by 155 pixels tall
   • it's saved as a .png file (feel free to use transparency in your logo)
2. Upload the logo with a destination file name of Image:Wiki.png.

This logo is shared between both Monaco and Monobook skins.

Here are some cool custom logos:

[edit] 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.

[edit] 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:<your_user_name_here>/Monaco-sidebar page. 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-<categorynamehere># = 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-<categorynamehere># and replace the "<categorynamehere>" 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#.

[edit] 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:<your_user_name_here>/Monaco-toolbox page. 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.

[edit] Customize the Colors

[edit] 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).

[edit] 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.

[edit] 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.

[edit] 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.

[edit] Header Background

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

#wikia_header {
   background-color: red;
   border-color:     Black;
}

[edit] 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 Header Menu Colors page.

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

[edit] 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);
}
* html .headerMenuButton dt, * html .headerMenuButton dd  {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_TO_YOUR_IMAGE', sizingMethod='crop');
}

[edit] 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;
}

[edit] Widget Cockpit

#widget_cockpit {
   background-color: red;
}

[edit] Background Strip

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

#background_strip {
   background-color: red;
}

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.

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

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

[edit] Customizing the Widgets

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

.widget {
   background-color: red;
}

[edit] Widget Headers

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

.widget dt {
   background-color: red;
}

[edit] 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".

#search_box {
   background-color: red;
}

[edit] Search Button

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

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

[edit] Navigation

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

#navigation a {
   background-color: red;
}

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

#navigation a:hover, .navigation-hover {
   background-color: red;
}

[edit] Link Box

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

#link_box {
   background-color: red;
}

[edit] Customizing the Article Area

[edit] 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".

#page_bar {
   background-color: red;
}

#page_controls a {
   color: White !important;
}

[edit] 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.

#page_tabs li {
   background-color: red;
}

#page_tabs li.selected {
   background-color: White;
}

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

[edit] Article

#wikia_page {
   background-color: red;
}

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