Help:Customizing Monaco

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


 * 1) The logo should be 266 pixels wide by 75 pixels tall. We know, it's kind of a weird size.
 * 2) Save it as a .png file. (Feel free to use transparency in your logo.)
 * 3) Upload the logo as Image:Wiki_wide.png.

Here are some cool custom logos:

http://images.wikia.com/inside/images/9/91/Picture_33wookielogo.png http://images.wikia.com/inside/images/5/5e/Picture_36marveldblogo.png http://images.wikia.com/inside/images/9/92/Picture_37dofuslogo.png http://images.wikia.com/inside/images/6/6d/Picture_35muppetwikilogo.png

Customize the Navigation
Wikia's Monaco skin has a robust navigation that can be fully customized by wiki admins. The navigation is broken into two sections: the Multi-level Menu and the two-column Link Toolbox.

Multi-level Menu
To customize the top navigation menu, edit the MediaWiki:Monaco-sidebar page.

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
 * 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

Link Toolbox
To customize the link toolbox, edit the MediaWiki:Monaco-toolbox page.

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


 * recentchanges-url | recentchanges
 * Special:MultipleUpload | Upload files
 * randompage-url | randompage
 * Special:Specialpages | specialpages

Customize the Colors
Admins can change the Monaco theme in the "Admin Options" section at the bottom of Preferences > Skins. There are a few themes that can be selected, or you can create a custom theme.

To create a custom theme, select "Monaco Custom" and edit MediaWiki:Monaco-custom.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 !important; }

.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-custom.css.

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.



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



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 {

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.



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. Sorry about the long, weird names.

background-color: Red; }
 * 1) navigation a:hover, .yuimenuitemlabel-hassubmenu-selected {

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 {

From Inside Wikia, a Wikia wiki.