Knowledgebase

How to change the font style and background color of the site notice in MediaWiki

In MediaWiki you can display a site notice on all pages of your site. You can have one notice for anonymous users and a different one for logged in users (or the same for both). In this article we'll show you how to change the font color, size and font family of the text of the site notice, as well as its background color.

For more information on how to add and manage a site notice check out the article on how to display a site notice in MediaWiki.

You can change the style of the site notice by making a CSS (Cascading Style Sheets) modification. You can do this by editing on the frontend of your site either the page MediaWiki:Common.css for changing the style of the site notice on all skins, or if you want only a particular skin to be affected, you can edit the corresponding CSS page of that skin (e.g. MediaWiki:Vector.css for the Vector skin). You have to add to the content of the page the CSS code for modifying the site notice. Further down this article we'll give examples of such code changes. For more general information on performing CSS modifications check out the article on how to make CSS changes in MediaWiki.

The ID with which the site notice is identified and that you have to use with the CSS code is #siteNotice. This ID works for the prepackaged skins that come with MediaWiki and it also works with many other skins, but this is skin-specific. Some skins, for example, have a slightly different ID such as #sitenotice (the n in notice is lowercase as compared to the uppercase letter in the other ID).

To change the style of the notice you have to add the ID together with the particular modification.

Font Color, Size and Family

You can change only one or all three of the attributes. For example, by adding the following to MediaWiki:Common.css:

#siteNotice { color: #8a2e5c; }

you'll change the color of the text of the site notice. In our example the hex value #8a2e5c is used which is a shade of purple. Some of the places where you can check the hex values of the different color shades are the color picker page on w3schools.com and the Wikipedia page on web colors.

The following will change the color, size and font family of the site notice:

#siteNotice { color: #8a2e5c; font-size: 20px; font-family: "Courier New"; }

Of course, you can change the values with whatever you want. This is just an example. If the name of the font family consists of more than one word, put quotation marks around it.

Background Color

You can change the background color of the site notice by adding to the page MediaWiki:Common.css (or to the page of a specific skin) a code that looks like this:

#siteNotice { background-color: #ffff94; }

This will set the background color to one with the hex value of #ffff94 which is a shade of yellow.

Some other articles on CSS modifications that you may find useful:

Was this answer helpful?

 Print this Article

Also Read