Knowledgebase

How to change background colors in MediaWiki

The default colors that are used on your MediaWiki site depend on the skin. You can make custom modifications and change the background colors of different areas of the site. You can do this for each of the installed skins by making changes to the CSS (Cascading Style Sheets) code of the skin. These CSS modifications can be made on the frontend of the site. They can be added to the page MediaWiki:Common.css (e.g. yourdomain.com/index.php/MediaWiki:Common.css) which affect all skins, provided the skins use the same code, or you can do this on the page of the particular skin (e.g. MediaWiki:Vector.css). For more general information on that check out the article on how to make CSS modifications in MediaWiki.

Note that for each skin the screen/page is divided into different containers and areas. Each one has its ID or class. These IDs are used to change the background color of that element. So, for example, you can have the content of the page with one background color and the navigation menu with a different one. In this article we'll show you how to change the background color of the different areas on the page for the default skins that come prepackaged with MediaWiki: Vector, MonoBook, Modern and Cologne Blue.

The principle is the same for other skins; you only have to use the correct IDs of the respective elements. You can make the changes for all pages on the site, for all the pages from a particular namespace(s), or for particular pages. The basic syntax for changing a background color is the following:

element-to-be-changed { background-color: #e6ffb4; }

The part element-to-be-changed has to replaced with the ID and/or class of the particular element for which you want to change the background color. Usually the hex value of a color is used in the code. In our example it's #e6ffb4. In the examples further down we'll use that same hex value. You can replace it with the value of whatever color you want. All the colors and their various shades have hex values. A useful place where you can select colors and their shades and check the respective hex values is the color picker page on w3schools.com, or on the web colors page in Wikipedia.

Note that in this article for the sake of convenience we'll make the distinction between a screen and a page. We'll refer to the page as the part covered by the content and title of the article of your MediaWiki site, excluding the top links and banners, the side menus and the footer. We'll use screen to refer to the whole area of the site (article, top elements, navigation menus, footer, etc.).

In this article you'll find the following sections:

Change Background Colors for All Pages

We'll go over the default skins separately. Some of the IDs of the page elements are the same in some of the skins while others are different.



Vector Skin

#content { background-color: #e6ffb4; } - changes the background color of the content of articles/pages, including the title of the articles.

#bodyContent { background-color: #e6ffb4; } - changes the background color of the content of pages, without the title of the pages.

#firstHeading { background-color: #e6ffb4; } - changes the background color only of page titles.

#catlinks { background-color: #e6ffb4; } - changes the background color of the area in which are displayed the links to the categories to which the page belongs. If a page is assigned to categories, they are listed exactly under the content of the page in a rectangular container.

#mw-head-base { background-color: #e6ffb4; } - changes the background color at the top of the screen, the area above the page title. It doesn't affect the color of the page tabs (e.g. Discussion, Edit, etc.).

#mw-panel { background-color: #e6ffb4; } - changes the background color of the menus on the left side of the screen (the area where the links Recent changes, Random page, etc., and the Tools menu are located).

#p-logo { background-color: #e6ffb4; } - sets the background color of the area where the logo is located (the top left corner).

#p-navigation { background-color: #e6ffb4; } - this is for the background color of the Navigation menu in the left column. That's the menu with the links Main page, Recent changes, Random page, Help.

#p-tb { background-color: #e6ffb4; } - changes the background color of the Tools menu in the left column. Both the title of the menu and the links in it are affected.

#p-tb-label { background-color: #e6ffb4; } - changes the background color only of the title of the Tools menu on the left. The color of the actual menu is not changed.

#p-tb .body { background-color: #e6ffb4; } - changes the background color of the Tools menu but without changing the background color of the title of the menu.

#footer { background-color: #e6ffb4; } - this is for the background color of the footer of the site. This includes the area of the meta links (Privacy policy, Disclaimers, etc.), the information about the last modification of the page and how many times it has been accessed, and the icon "Powered by MediaWiki". All the space that's under the footer to the bottom of the screen is not affected.

body { background-color: #e6ffb4; } - in general the body is equal to the whole screen. However if you set a background color with it, it covers areas where there isn't any other element with specific background color set. In case of the Vector skin it affects the area under the page content and on the left of it.



MonoBook

#content { background-color: #e6ffb4; } - this ID is the same as for the Vector skin. It changes the background color of the content and title of pages.

#bodyContent { background-color: #e6ffb4; } - this is also the same as for the Vector skin. It sets the background color only of the content of pages without affecting the title.

#firstHeading { background-color: #e6ffb4; } - sets the background color only of page titles without affecting the content of pages.

#catlinks { background-color: #e6ffb4; } - changes the background color of the rectangular area where category links are located. It's situated under the page content (if the page belongs to any categories).

#p-logo { background-color: #e6ffb4; } - sets the background color of the area of the logo.

#p-navigation { background-color: #e6ffb4; } - this is for the background color of the title of the Navigation menu in the left column. It doesn't change the background color of the actual menu.

#p-navigation .pBody { background-color: #e6ffb4; } - changes the background color of the Navigation menu on the left without affecting the background color of the title of the menu.

#p-search { background-color: #e6ffb4; } - sets the background color of the title of the Search block in the left column.

#p-search .pBody { background-color: #e6ffb4; } - sets the background color of the Search block on the left without affecting its title.

#p-tb { background-color: #e6ffb4; } - changes the background color of the title of the Tools menu on the left.

#p-tb .pBody { background-color: #e6ffb4; } - sets the background color of the Tools menu in the left column without affecting the background color of the title of the menu.

#footer { background-color: #e6ffb4!important; } - changes the background color of the footer area with the meta links (e.g. Privacy policy), the information with the last modification and the icon "Powered by MediaWiki". The area is as wide as the screen and it's marked at the top and bottom with lines. The rest of the space below the page content is not affected by the #footer ID. Note that in the code you should also include the part !mportant after the color.

body { background-color: #e6ffb4; } - generally, the body is the whole visible area of the site, but in practice when it comes to the background color of the MonoBook skin in particular it affects the background color of the space at the bottom of the screen, below the page content. The strip with the footer links is not affected. It also changes the background color of part of the left column, from the bottom area up to the middle of the Navigation menu.

#globalWrapper { background-color: #e6ffb4; } - sets the background color of the top area above the page title, the left column with the menus and the space below the content of the page, down to the footer links (the area below the footer links is not affected). Note that in the left column it changes only the background color of the titles of the menus, not the actual menus themselves.

#column-content { background-color: #e6ffb4; } - changes the background color of the top area of the screen, above the page title, as well as part of the left column (down to the Tools menu, or in other words it goes down to the same level as the bottom of the page container).

#column-one { background-color: #e6ffb4; } - sets the background color of the top space of the screen, above the page title. It also changes the color of the left column without affecting the background color of the menus there (just of their titles), and also covers the bottom area down to the footer links. The background color of the area below the footer links is not changed.



Modern

#mw_content { background-color: #e6ffb4; } - sets the background color of the content of pages. If the page is assigned to categories, the area with the category links at the bottom of the content area is not affected.

#catlinks { background-color: #e6ffb4; } - changes the background color of the area with the category links. If the page belongs to categories, the links to them are at the bottom of the page content area.

#mw_portlets { background-color: #e6ffb4; } - changes the background color of the menus on the left (Navigation, Search, Tools) without changing the background color of the titles of the menus.

#p-navigation { background-color: #e6ffb4; } - changes the background color of the Navigation menu on the left. It doesn't change the background color of the title of the menu.

#p-navigation h3 { background-color: #e6ffb4; } - changes the background color of the title of the Navigation menu in the left column.

#p-search { background-color: #e6ffb4; } - sets the background color of the Search block in the left column without affecting the background color of the title of the block.

#p-search h3 { background-color: #e6ffb4; } - changes the background color only of the title of the Search block in the left column.

#p-tb { background-color: #e6ffb4; } - changes the background color of the Tools menu on the left without changing the background color of the title of the menu.

#p-tb h3 { background-color: #e6ffb4; } - sets the background color of the title of the Tools menu.

#p-cactions { background-color: #e6ffb4; } - changes the background color of the area where the page buttons (e.g. Edit, Discussion, etc.) are located. It's a rectangular area that starts form the Navigation menu on the left and goes to the end of the screen on the right.

#mw_header { background-color: #e6ffb4; } - sets the background color of the very top area of the screen where the page title is located (by default, it's dark blue).

body { background-color: #e6ffb4; } - changes the background color of the area where the page buttons (Edit, Discussion, etc.) are located, the rectangular area that's between the page content and the footer and the whole bottom area under the content of the page.

#footer { background-color: #e6ffb4; } - sets the background color of the area of the footer links; it goes through the whole width of the screen.



Cologne Blue

#article { background-color: #e6ffb4; } - changes the background color of the content of pages together with the page title.

#mw-content-text { background-color: #e6ffb4; } - changes the background color of the content of the page without the page title.

#firstHeading { background-color: #e6ffb4; } - sets the background color of the title of the page.

.tagline { background-color: #e6ffb4; } - changes the background color of the tagline under the page title. With the skin Cologne Blue under each page title there's a tagline that has the form From SiteName (SiteName is replaced with the actual name of your site).

#topbar { background-color: #e6ffb4; } - changes the background color of the strip at the top of the site where the links Privacy policy, About us and Disclaimers appear. If the page belongs to categories, the links to the categories are also shown in that area. It covers the whole width of the screen.

#catlinks { background-color: #e6ffb4; } - sets the background color of the area where the category links are situated (if the page belongs to any categories). Such category links with the Cologne Blue skin are in the top right corner, just below the site title banner and above the meta links (e.g. Privacy policy, Disclaimers). Note that the covered background area with this ID doesn't go through the whole width of the screen. On the left it reaches the left menu column.

#sitetitle { background-color: #e6ffb4; } - changes the background color of the area that's at the very top of the screen and that contains the site title and the links Main Page, About, Help, FAQ, Log in/out.

#quickbar { background-color: #e6ffb4; } - sets the background color of all the menus on the left. It covers a rectangular area that starts exactly at the top of the Find block and ends right after the last item in the Tools menu.

#p-search { background-color: #e6ffb4; } - changes the background color of the Find block on the left. It affects the background color of the title of the block and the actual block.

#p-search h3 { background-color: #e6ffb4; } - affects the background color only of the title of the Find block in the left column.

#p-navigation { background-color: #e6ffb4; } - changes the background color of the navigation menu on the left. The menu is labeled Browse and contains the links Main page, Recent changes, Random page, Help. The background color of the title of the menu and of the actual menu is changed.

#p-navigation h3 { background-color: #e6ffb4; } - sets the background color only of the title of the Browse menu in the left column.

#p-cactions { background-color: #e6ffb4; } - changes the background color of the Edit menu on the left (the menu contains links such as Edit, Delete, Move). Affects both the title and the actual menu.

#p-cactions h3 { background-color: #e6ffb4; } - this code affects only the title of the Edit menu on the left.

#p-pageoptions { background-color: #e6ffb4; } - changes the background color of the menu This Page on the left; this is the menu that contains the links Page, Discussion, History, Watch/Unwatch. The background color of the title of the menu and of the menu itself is changed.

#p-pageoptions h3 { background-color: #e6ffb4; } - sets the background color of the title of the menu This Page.

#p-personal { background-color: #e6ffb4; } - changes the background color of the menu My Pages on the left. That's the menu with the links Username (this stands for your actual username), Talk, Preferences, Watchlist, Contributions. It affects both the title of the menu and the menu itself.

#p-personal h3 { background-color: #e6ffb4; } - changes the background color of the title of the menu My Pages in the left column.

#p-tb { background-color: #e6ffb4; } - this is for the background color of the Tools menu in the left column. It affects the menu together with its title.

#p-tb h3 { background-color: #e6ffb4; } - changes the background color of the name of the Tools menu.

#footer { background-color: #e6ffb4; } - sets the background color of the area with the buttons located under the content of the page. These include all the buttons for managing the page (e.g. Edit this page, Discuss this page, etc.), the search function and the page info (e.g. for the last modification of the page). The covered area with the background color is about the same width as the container for the content of the page. The rest of the space that's under the footer buttons and links is not affected by this code.

#footer-navigation { background-color: #e6ffb4; } - this changes the background color only of the buttons and the search function that are under the page content. The page information (e.g. last modification) that's under these buttons is not included.

#footer-info { background-color: #e6ffb4; } - changes the background color only of the area in the footer where page information is displayed (e.g. last modification info, number of times the page has been accessed). The area with the footer buttons and links that are above this info is not affected by this code.

body { background-color: #e6ffb4; } - sets the background color of the whole screen. It doesn't cover only the top banner with the site title. Of course, if the background color for other areas on the screen has been specifically changed, they will not be affected. Note that with the Cologne Blue skin this code will change the background color on all pages except for the pages in the Main namespace (these are the main articles/content pages). To change the background of these pages you have to specifically set a background color for the Main namespace. We'll show you how to change the background color per namespace in the next section of this article.

Change Background Colors per Namespace

As you know the pages in MediaWiki are grouped into namespaces. For example, all the articles are in the Main namespace while their associated discussion pages are in the Talk namespace. Instead of changing the background color of the pages in all namespaces, if you want to, it's also possible to change the background colors of the pages only in a particular namespace(s).

Since we listed most of the IDs for the default skins in the previous section of this article here we'll only show you the code for changing the background colors per namespace. The code is the same for any element on the page and for any namespace. You only have to replace in the code the ID of the element with the one you want and the number of the namespace. And of course, you need to replace the value of the color with the one for the color that you want to set.

For example:

.ns-1 #content { background-color: #e6ffb4; }

will change the background color of the page element with ID #content (the content of pages) from the Talk namespace. In the example code the namespace is defined with .ns-1. To change the background color of the pages from a different namespace you only have to replace the ID number of the namespace. You can also change the ID of the element with the one which you want to be affected. For instance:

.ns-0 #firstHeading { background-color: #e6ffb4; }

will change the background color of the element with ID #firstHeading (it stands for the titles of pages), and this will affect the pages in the Main namespace (which has the ID number 0).

Each namespace has an ID number that you can use in the code. For a list of the default namespaces and their ID numbers check out the reference list of MediaWiki namespaces with ID numbers and constants in our knowledge base.

The syntax of the code is the same for all namespaces and IDs. An exception is if you want to change the background color of the body tag:

body.ns-0 { background-color: #e6ffb4; }

Change the Background Colors on Particular Pages

It's also possible to change the background colors only of particular pages.

The code has the following form:

body.page-User_talk_Admin #content { background-color: #e6ffb4; }

This will change the background color of the content of the page only on the talk page of the Admin user.

The code has the same syntax for any page. To change the color of a different page simply replace the title with the title of the particular page. In our example the title of the affected page is User_talk_Admin. And to change the background color of a different area change the ID. In our example the ID is #content and it affects the page content in the Vector skin. Of course, you should also replace the hex value of the color (e.g. #e6ffb4) with the color that you want.

You can find a list of different IDs for the various screen areas of the default skins that come prepackaged with MediaWiki in the first section of this article. An easy way to check the name of the page as you should put it in the code is to open the page and check it in its URL address. Don't forget that if the name consists of more than one word, they are separated with underscores.

Here are some other articles in our knowledge base related to CSS modifications:

Was this answer helpful?

 Print this Article

Also Read