Help:Customizing Monaco

From Wikia Help

This page concerns the Monaco skin, the current Wikia skin. You can find out more about the Wikia skins on Help:Skins.

Contents 1 Upload a Logo 2 Customize the Navigation 2.1 Main Navigation 2.2 Link Toolbox 2.3 Internationalisation 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 Customizing My Home and the user masthead 4.4.1 Tabs 4.5 Customizing the Latest activity widget 4.6 Testing the Customizations 5 Creating a dark skin 6 See also 6.1 Advanced information 6.2 General Monaco information

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:
   • the size is at least 155 pixels wide (maximum 216) and 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 Wiki.png.

Sample logos

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:<your_user_name_here>/Monaco-sidebar page (Special:Mypage/Monaco-sidebar). For instance, [[User:Username/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. You can use external links here - the software will recognize them and link to them properly. 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. This is also true for external links; unlike the usual space, you will need a pipe instead. 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: MediaWiki:Most popular articles, formatted in the form of a single page title per line. 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#.

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 (Special:Mypage/Monaco-toolbox). For instance, User:Username/Monaco-toolbox , and create your own link toolbox.

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).

Default list:

* recentchanges-url|recentchanges
* randompage-url|randompage
* helppage|help
* specialpages-url|specialpages

Special strings not included in the default list:

• whatlinkshere|whatlinkshere
• permalink|permalink

Note that these two links now appear in all page footers.

These special URL strings don't like to see white space before the pipe. The special string "whatlinkshere" is unique because it is parsed to incorporate the name of the current page.

Every other special string in the default list can just as easily be replaced by an equivalent name as found in the list at Special:Specialpages.

The list of links is automatically separated into two columns, and the links alternate between the left and right columns. The link formatting is the same as the multi-level menu. Internal wiki link or external URL to the left of the pipe and label to the right of the pipe. You cannot use comments in this list.

Example list:

* Forum:Index                 |Forum
* helppage                    |help
* Special:Specialpages        |Specialpages
* Special:Recentchanges       |Recent changes
* Special:Search              |Advanced search
* whatlinkshere               |whatlinkshere

You can avoid having a label wrap and consume two lines in this link toolbox if you either:

• choose short labels or
• organize all shorter labels in the first half of the list and all longer labels in the second half
  • This second point benefits Admins more than regular readers/contributors because of the 3 user-related links mentioned below. The two longer labels get added to the right-hand column while the shorter label gets added to the left-hand column.

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 link toolbox labels are:

• User contributions
• E-mail this user
• Block user
  • Block user will only show up for admins.

Internationalisation

Changing the toolbar in this way will only change the view for logged out users, and users with the same language set as that of the wiki. So on an Italian wiki, only users who are viewing in Italian will see the change. Other languages can be set in the same way by editing MediaWiki:Monaco-toolbox/xx (where xx is the language code).

Customize the Colors

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).

Find out more on Help:Customizing Monaco/Theme colors.

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. You can also change "accent" and "neutral" to customize aspects of the site extra colors for highlighted areas.

.color1 {
   background-color: Green;
   color:            White;
}
 
.color1 a {
   color:            White;
}
 
.color2 {
   background-color: 	LightGoldenRodYellow;
}
 
.accent {
       background-color: PaleGreen; /*a tint of .color1*/
       border-color: Green; /*same as .color1's background*/
       color: Black; /*text color that looks appropriate on the background-color*/
}
.neutral {
       background-color: #EEEEEE; /*a color that offsets slightly from the main article background color*/
       border-color: #AAAAAA; /*a border color that looks good*/
       color: #000000; /*text color that looks appropriate on the background-color*/
}

A full CSS customization guide can be found below.

Full Customization Guide

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 (User:Username/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".

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

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.

#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');
}

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

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

#widget_cockpit {
   background-color: red;
}

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;
}

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".

#search_box {
   background-color: red;
}

The text inside the search box is by default "Search {{SITENAME}}". 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.

#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');
}

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;
}

Link Box

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

#link_box {
   background-color: red;
}

Customizing the Article Area

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;
}

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.

Article

#wikia_page {
   background-color: red;
}

Customizing My Home and the user masthead

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

• 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 #user_masthead.accent

.accent {
 background-color: White;
}

• User_masthead h2 defines the text color of the Username in the masthead. (See the #2 purple item)

#user_masthead h2 {
 color: black;
}

• Next to the Username, is an editcount and a date, this is inside a <small> 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 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 .accent, 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.

.dark_text_1 {
 color: Firebrick;
}

• 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 #user_masthead_scorecard

• Dark_text_2 defines the color used for the headings on the My Home page.

.dark_text_2 {
 color: #006400;
}

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 */
#user_masthead #user_masthead_tabs li {
 background-color: #00689A;
}

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

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

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

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

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.

See also

Advanced information

• Help:Customizing Monaco/Header image colors
• Help:Customizing Monaco/Theme colors
• Help:Customizing Monaco/Dark skin

General Monaco information

• Help:Monaco skin features
• Help:Examples of customized Monaco skins
• Category:Monaco skin