MediaWiki/Skins/Foreground/Topbar CSS

How-to Customize the Menu (Topbar) in the MediaWiki Foreground Skin

The Foreground Skin for MediaWiki uses the Zurb Foundation CSS Framework.

This Guide shows how to customize the Menu when using the Foreground Skin.

Menu, Topbar and Sidebar Explained

Menu

Foreground places the menu at the top of the screen.

Topbar

The Menu created by Foreground uses a Foundation CSS class called a topbar but written as top-bar in the style sheets.

Sidebar

The default location for a menu in MediaWiki is on the side. Consequently the MediaWiki Menu is called a Sidebar. The Manual:Interface/Sidebar provides an overview of the traditional MediaWiki sidebar and remains important because even when using a custom skin such as Foreground, the menu items are written into and linked from the page MediaWiki:Sidebar.

Manuals and Links

Manual:Sidebar

MediaWiki, Foreground and Foundation Style Sheets

MediaWiki:Common.CSS

Custom CSS for MediaWiki is written in the page MediaWiki:Common.CSS. Note that this is a page, not a file. To open this page simply write MediaWiki:Common.css in the search box and click Enter. There is a Manual:Common.css but it contains only one line which states:

/* CSS placed here will be applied to all skins */

There is more useful information in, or linked from the Manual:Interface/Stylesheets.

foreground.css

If the Foreground Skin has been installed then the file named foreground.css is located in the directory /skins/foreground/assets/stylesheets. This file contains the styles customized from the Foundation CSS Framework specifically for the Foreground Skin.

foundation.css

The file named foundation.css is also located, along with other style sheets, in the directory /skins/foreground/assets/stylesheets. This style sheet is derived from the Zurb Foundation CSS Framework.

Manual:Interface/Stylesheets

How to customize the Menu (Topbar)

By default, the Foreground Skin menu is black.

The file foreground.css contains some custom styles enclosed in comments as shown below:-

/* Don't like the black top bar? Copy this into your Foreground.css and change the colors 

.top-bar, 
.top-bar-section ul, 
.top-bar-section ul li.active > a, 
.top-bar-section li a:not(.button), 
.top-bar-section .has-form {
    background: #333333;
}

.top-bar-section > ul > .divider,
.top-bar-section > ul > [role="separator"] {
  border-color: black;
}

*/

If you modify either of these files: foreground.css or foundation.css, then you will need to remember that when upgrading the Foreground Skin.

It is generally better practice to place custom CSS in the page MediaWiki:Common.css.

However, the above styles will only change part of the menu or topbar as explained below.

Parts of the Topbar or Menu

The colour, or background colour of different parts of the menu can be changed only by defining the style for that section. So far, I have isolated the following parts.

1. The topbar, excluding areas containing menu items and the search bar

   The following styles change the background across the topbar but have no effect on the area allocated for each main menu item, or the area surrounding the Search box.

   
   

   .top-bar, 
   .top-bar-section ul, 
   .top-bar-section ul li.active > a, 
   .top-bar-section li a:not(.button), 
   .top-bar-section .has-form {
       background: #FF6699;
   

2. The area on the topbar which surrounds the Search box

   As noted above, this background colour for this part of the topbar is defined by a separate style.

       .top-bar-section .has-form {
         background: #FFFF00; }
   

3. The box surrounding each main menu item

   For every menu item defined in the MediaWiki:Sidebar page there will be a box in the topbar and the style below will change the background colour.

   .top-bar-section li.active:not(.has-form) a:not(.button), 
   .top-bar-section li.active:not(.has-form) a:hover:not(.button) {
   	background: #00FF00; }
   

4. The background colour for each dropdown menu

   When the dropdown menu is activated the list of sub-menu items has a defined background colour. This can be specified as below.

         .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
           background: #990000; }
   

The only significant background colour not defined by these styles is the background for a sub-menu item in the dropdown when the mouse or pointer is above it. The colour defaults to black. If I find a solution I will edit this page!

To use these styles simply copy each code sample into the page MediaWiki:Common.css.

Changing Colours

Each colour is defined by a hexadecimal value, for example #990000. The colours used in the code samples are quite bold, deliberately, because that demonstrates the area of the topbar which is affected.

To change the color, use the w3schools.com html color picker. Select a color, and copy the hex code into the style.

HTML Color Picker

---

Open source wiki