Help:Customizing header

From the group that combats the Wikia skin, the Anti-Wikia alliance.
Jump to: navigation, search
Imbox notice.png

This article describes the original Monaco skin.
Some information is not applicable to the Dantman`s Monaco skin. (Details).

Detailed mapping of the parts of the header. Showing the default/starting wikia colors and format.
Customizing Monaco
Getting Started talk

Overview


   Monaco new features
   Skins
   Skin comparisons
   Examples of customized
   Monaco skins

Customizing Layout


   Customizing colors
   Header
   Logo
   Sidebar
   Toolbox

Specific Skins


   Monaco/Dark skin
(changes)

 v  d  e 


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. See customizing the user pages (Myhome) below.

Header Background[edit source]

  • 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.
#wikia_header {
   background-color: red;
   border-color:     Black;
}

Template:File

[edit source]

  • 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
#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[edit source]

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

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

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

Removing Menu Buttons[edit source]

To remove "My Home" from the menu buttons, enter the following to MediaWiki:Monaco.css:

#header_myhome { display: none; } 


Header Menus[edit source]

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

#widget_cockpit {
   background-color: red;
}

Background Strip[edit source]

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

Page Tabs[edit source]

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

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

Page Bar[edit source]

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

Customizing My Home[edit source]

My Home and the user masthead use a few new color classes that can be adjusted to fit your wiki's style. To adjust this, you add the following text to the MediaWiki:Monaco.css page (as with other skin customizations)

Parts of the user masthead
1) Accent -- 2) User_masthead h2 -- 3) User_masthead_since -- 4) Inactive tab color -- 5) Active tab color -- 6) Dark_text_1


Individual Customization[edit source]

  • 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, item #3. No extra styling is available for this, as it will use the color from the h2 above.
  • dark_text_1 defines the color on the text that appears on top of the accent color. This is mainly used for the edit count on the top right of the user masthead (item #6)
.dark_text_1 {
color: Firebrick;
}

Group Customization[edit source]

  • The default color of the tabs that are not currently selected is defined by color1.
  • You can edit the background and link colors of both the selected and non-selected tabs.
  • The inactive tabs are indicated by #4.
    • #user_masthead_tabs li : inactive tab background color
    • #user_masthead_tabs li a: inactive tab link color
  • The active tab is indicated by #5.
    • #user_masthead_tabs li.selected: selected tab background color
    • #user_masthead_tabs li.selected a: selected tab link color
#user_masthead_tabs li {
background-color: #00689A;
}

#user_masthead_tabs li a {
color: #ffffff;
}

#user_masthead_tabs li.selected {
background-color: #70B8FF
}

#user_masthead_tabs li.selected a {
color: #ffffff
}

What the above CSS sample will create


Removing tabs[edit source]

Add the following to MediaWiki:Monaco.css

Remove the "blog" tab on editor's user pages:

#user_masthead_tab_userblog { display:none; }

Remove the "Myhome" tab on editor's user pages:

#user_masthead_tab_myhome { display:none; }

See also[edit source]

Basic information[edit source]

Advanced information[edit source]

General Monaco information[edit source]