Help:Customizing header



There are several unique elements in Monaco skin's top header. This section will help you to customize the header area, menus and menu buttons, which will all be modified by adding the appropriate text to the MediaWiki:Monaco.css page

Header Background

 * The header refers to the top most area of color on the wiki skin (just below your browser menu), which contains your username and preferences on the right and the Wikia logo on the left.
 * These colors and style are initially defined by the color2.

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

Wikia logo

 * The Wikia logo (which is not your individual wiki's logo), is located on every page of the wiki in the top left corner. It includes the name, "Wikia" plus the name of the hub your wiki is a part of (which is also a drop down menu).
 * Header menu buttons are graphics that can be customized with an image editor.
 * You can find available preset colors on the Help:Customizing Monaco/Header image colors page. Here you can easily copy and paste the logo you like, and use this on your wiki.
 * Copy all of the text listed here, and input the uploaded images URL where requested

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

 * The headerMenu, which is the bar that holds the edit, watch, history, etc text while you are not editing.
 * The header menus' style is initially defined by the class "color1", you can modify the background-color:
 * 'headerMenu' a are the links on the header menu
 * color: defines the link color

.headerMenu { background-color: red; }

.headerMenu a { color:           White;

}

Header Menu Buttons
Header menu buttons are defined through the class ".header-button".

 .header-button { background-color: red; }

Removing Menu Buttons
To remove "My Home" from the menu buttons, enter the following to MediaWiki:Monaco.css:
 * 1) header_myhome { display: none; }

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 {

Page Tabs
The page tabs are the Article (page) and Discussion (talk) tabs on the right hand side of each page. #page tabs li controls of the color of the non-selected tab #page tabs li.selected controls the color of the 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.

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 {

Basic information
Basic skin chooser

Advanced information

 * Header image colors
 * Customizing colors
 * Tips for creating a dark skin
 * Custom widgets
 * Highly detailed customization guide

General Monaco information

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