Knowledgebase

How to change the font family, size and color of text in MediaWiki

You can change the size, color and font style of the text on your MediaWiki site with some CSS (Cascading Style Sheets) modifications. You don't have to edit the code of any files to do this. It can be performed on the frontend of the site by editing the page MediaWiki:Common.css (e.g. yourdomain.com/index.php/MediaWiki:Common.css) and adding the code for the change there. Changes on this page affect all skins, provided the specified element in the code is the same as the one of the skin. There's also a separate page for modifying only a particular skin (e.g. MediaWiki:Vector.css for the Vector skin); using the CSS page of a skin you can make sure that the changes will not be applied to other skins. For more general information on this check out the article on how to make CSS changes in MediaWiki.

In this article we'll concentrate on how to style the text. The code itself is generally the same for all skins; you only have to change the ID of the element to be affected. For example, it can be the whole content of pages, just the headings, etc. For example, the color of text is changed with:

element { color: #5a7425 ; }

The text size with:

element { font-size: 12px; }

The font family/style with:

element { font-family: "Courier New"; }

If the name of the font family consists of more than one word, it should be enclosed in quotations.

You can combine two or more attributes into one piece of code. For example:

element { color: #5a7425; font-size: 12px; font-family: Verdana; }

Of course, element has to be replaced with the actual tag, class or ID that's to be affected. The values are also just examples. Here the size is set to 12 pixels, the font family to Verdana. You can replace them with anything you want. For the color usually a corresponding hex value is used. In our example its #5a7425 which is a shade of green. There are different places where you can check the hex values of the different shades of colors. A very useful one is the color picker on the site w3schools.com; the page in Wikipedia on web colors is also very useful.

Depending on the exact element (e.g. a menu title) for which you want to change the style, its ID may be different in the different skins. Here we'll list some of the IDs for skins that come prepackaged with MediaWiki. In each example we'll use the same values; you can change them with whatever you want. In most examples we've also used all three attributes (for color, size, font family), but you can remove any of them and add only the ones you need.

One of the things to keep in mind is that when you change the size of certain text elements this may change the layout of the page. For example, in some skins increasing the font size too much for menu links, page tabs, etc. may change the size of the containers holding these elements, and thus change the whole layout.

Another thing to note is that the color of links is specifically set and it's not affected by code changes suggested in this article. The color of links is changed with a different code (meaning that the tags and IDs in front of the brackets with the code are different). There are reminders about this throughout the article. That's why in some of the examples which affect only links the color attribute is removed from the code.

Change the Font, Size and Color of all Page Text Elements

Regardless of the skin, you can style all the text elements that appear on the screen by specifying the style of the body tag:

body { color: #5a7425; font-size: 12px; font-family: "Courier New"; }

This affects not only the content of articles, including headings, but also menus and other text on the screen.

Note however that in practice this will not affect all text elements on the page, or at least not all attributes will have an effect. For example, the font family and size might be changed for all or most text elements on the screen, but most likely the color will not be changed. Note that the size will be changed proportionately for the different elements, meaning that not everything will be the same size but, for instance, headings will still be bigger than content text.

Each element that's explicitly configured with its own values will not be affected by a general change for the body of the page. For example, the text of all links may be specifically set to be colored in blue, while the text of articles may be colored in gray.

Vector and MonoBook

Most of the IDs for the different page elements are the same in both skins. There are very few that work only with one or the other. If in the list here the code works only with one of the skins, this will be explicitly mentioned. If nothing is specifically mentioned, then ID works with both skins.

The examples may work with other skins as well, but this depends on the particular skin.

#content { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - generally, this affects the whole content of articles/pages (e.g. text, headings, etc.), but in practice some elements will not be affected, at least not with regard to every attribute in the code. For example, the color of headings is not changed. Size is changed proportionately (e.g. headings remain bigger than content text).

#content p { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - this affects all paragraphs in the text of articles. The heading and section headings are not affected, as well as elements such as numbered or bullet lists, for instance.

#content h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - affects the titles of pages. Section titles/subheadings are not affected.

#content h2 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - affects all level two subheadings. This will also affect the Contents label of the table of contents. To avoid this and change the style only of level 2 headings without the label for the table of contents being affected, you can use the code #content h2 .mw-headline { color: #5a7425; font-size: 12px; font-family: "Courier New"; }.

As you know you can add subheadings to pages. They can be different levels. Section headings that are direct subheadings of the page title are level 2. While, for example, a subheading of a subheading is level 3. You can style the respective level of subheadings by changing the number in the code; for example, #content h4 will affect section headings level 4.

#mw-panel .portal { font-size: 12px; font-family: "Courier New"; } - works only with Vector. This will change the font size and family of the menus on the left side. These are the Tools menu and the menu with the Recent changes and Random page links. We haven't included the color attribute on purpose because the entries in these menus are all links and they will not be affected by a color set with this code. All links have their color specifically set with a different code.

#p-navigation { font-size: 12px; font-family: "Courier New"; } - affects the navigation menu on the left. That's the menu that contains the links Main page, Recent changes, Random page, Help. Note however that changing the font size will also change the size of the menu block and this in turn affects the layout of the page. With the MonoBook skin this code affects both the title and the links of the menu; in the Vector skin this menu doesn't have a label, so only the menu links are affected.

#p-navigation h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - only for MonoBook. Changes the color, size and font family of the title of the Navigation menu, without affecting the menu entries.

#p-navigation .pBody { font-size: 12px; font-family: "Courier New"; } - only for MonoBook. Changes the font size and family only of the menu entries of the Navigation menu, without affecting the title of the menu.

#p-tb { font-size: 12px; font-family: "Courier New"; } - affects the Tools menu in the left column. That's the menu with the links What links here, Related changes, Special pages, etc. The label of the menu and the menu links are affected.

#mw-panel #p-tb h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - works only with Vector. This will change the color, size and font family only of the title/label of the Tools menu.

#p-tb h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - works with MonoBook. Affects the color, size and font family only of the label of the Tools menu (the menu entries are not affected). If this code is used with the Vector skin it will only affect the font family of the Tools menu title; for better results with the Vector skin use the previous code in this list instead.

#p-tb .body { font-size: 12px; font-family: "Courier New"; } - works with Vector. Changes the font size and family only of the menu links in the Tools menu, without the label of the menu.

#p-tb .pBody { font-size: 12px; font-family: "Courier New"; } - works with MonoBook. Changes the font size and family of the menu links in the Tools menu, without affecting the title of the menu.

#p-search { font-size: 12px; font-family: "Courier New"; } - affects the Search block. In the Vector skin it's only a text field in the top right corner; there's no text to be affected and changing the font size will affect the size of the text field. In MonoBook it's a block in the left column. The only text is the title of the block, and the text in the buttons Go and Search. Changing the font size will affect not only the title of the block but also the buttons and the text field and respectively the size of the whole block. Setting a font color using this ID will not affect any text in this block, that's why we haven't included it in our example.

#p-search h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - works only with MonoBook. Changes the font color, size and family only of the title of the Search block. The size of the block itself is not affected

#left-navigation { font-size: 12px; font-family: "Courier New"; } - works with Vector. This changes the font size and style of the page tabs at the top left side. These are the tabs Page and Discussion. Since they are links they are not affected by the color changes specified with this code.

#right-navigation { font-size: 12px; font-family: "Courier New"; } - works with Vector. Changes the size and font family of the text of the page tabs at the top right side (e.g. Read, Edit, View history, etc.).

#p-cactions .pBody { font-size: 12px; font-family: "Courier New"; } - works with MonoBook. This is only for the MonoBook skin. It changes the font size and style of all the page tabs at the top (e.g. Message, Discussion, Edit, History, Delete, Move, Watch/Unwatch).

#p-personal { font-size: 12px; font-family: "Courier New"; } - this will change the size and font style of the user links in the top right corner of the screen. These are the links Create account and Log in for anonymous users; Preferences, Watchlist, Contributions, etc. for logged in users.

div#footer ul li { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - this affects the text in the footer. This is the text about the last modification of the page, the information about the license used on the site, the links Privacy policy, Disclaimers, etc.

Modern

Here is a list that will work with the Modern skin. Many of the IDs for the different page elements are the same as for the MonoBook and/or the Vector skins, but some a different.

#mw_header h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the color, size and style of page titles.

#mw_content { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the color, size and font family of the text of articles. It affects all elements in the content: e.g. paragraphs, section headings, lists, etc.

#mw_content p { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - affects only the paragraphs in the content of articles. Section headings, lists and other such elements are not affected.

#mw_content h2 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the font color, size and family of subheadings level 2. These are section headings that are hierarchically direct subheadings of page titles. Note that this example code will also change the style of the Contents title of the table of contents; to avoid this in front of the brackets you can use #mw_content h2 .mw-headline instead.

You can change the subheading level to be affected by changing the number in the code. For example, #mw_content h3 will affect the subheadings of subheadings.

#mw_portlets { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - this affects all the menu blocks in the left column (Navigation menu, Search block, Tools menu). The color change will be applied only to the titles of the menus. The menu entries are links and their color is set and changed with a different code.

#p-navigation { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - the style changes are applied only to the Navigation menu in the left column. That's the menu with the links Main page, Recent changes, etc. Both the title and the menu links are affected, but the color change is only applied to the title; the color of the links in the menu is not changed with this code.

#p-navigation h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the font color, size and family only of the title of the Navigation menu; the menu link are not affected.

#p-navigation .pBody { font-size: 12px; font-family: "Courier New"; } - applies the changes only to the links in the Navigation menu, excluding the title of the menu.

#p-search { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the style of the Search block in the left column. The only text there is the title of the block so that's the only thing that's affected. The buttons Go and Search that are in the block are not affected.

#p-tb { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - this will apply the changes only to the Tools menu in the left column. The changes are applied both to the title of the menu and to the menu links (the color of the links however is not changed).

#p-tb h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the font color, size and family only of the title of the Tools menu.

#p-tb .pBody { font-size: 12px; font-family: "Courier New"; } - applies the style changes only to the links in the Tools menu, excluding the title of the menu.

#p-personal { font-size: 12px; font-family: "Courier New"; } - this changes the style of the user links at the top of the page. These are the links that are located right under the title of the page. For anonymous users these are the links Create account and Log in, and for logged in users: Preferences, Contributions, etc. As we've already mentioned, since these are all links they will not be affected by a color change with this code, that's way we've removed the color attribute from this example.

#p-cactions .pBody { font-size: 12px; font-family: "Courier New"; } - changes the style of the text of page tabs (e.g. Discussion, Edit, History, Delete, etc.).

#footer { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - affects the style of the text in the footer (e.g. last modification of the page, Privacy policy link, Disclaimers link, etc.).

Cologne Blue

#article p { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - this will affect the style of the text of articles. The title, section headings and some other elements such as numbered/bullet lists and tables will not be affected.

#article h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the style of page titles.

#article h2 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - this affects the section headings of articles. These are level 2 subheadings, meaning that hierarchically they are direct subheadings of the page title. Note that this will also affect the Contents label of the table of contents. To avoid this and change the style only of level 2 subheadings use the code #article h2 .mw-headline { color: #5a7425; font-size: 12px; font-family: "Courier New"; }.

To change the style of level 3, 4, etc. subheadings simply use the corresponding number: e.g. #article h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } will affect the subheadings of subheadings.

#article p.tagline { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - this will change the font color, size and family of the tagline. In the skin Cologne Blue there's a tagline under each page title. It has the form From Site Name where Site Name is replaced with the actual name of your site.

#sitetitle { font-size: 12px; font-family: "Courier New"; } - this will change the size and font style of the site title that's in the upper left corner. It's also a link and setting its color with this particular code will not work.

#toplinks { font-size: 12px; font-family: "Courier New"; } - this affects the links in the top right corner of the screen. These are the links in the top banner (e.g. Main Page, About, Help, FAQ, Log in/Log out).

#titlelinks { font-size: 12px; font-family: "Courier New"; } - changes the size and style of the meta links in the top right side of the screen. These are the links that are under the top banner (e.g. Privacy policy, About, Disclaimers).

#quickbar { font-size: 12px; font-family: "Courier New"; } - this will change the font size and family of all the menus in the left column. These are the menus titled Browse, Edit, This page, My pages, Tools. Note however that the titles of the menus will not be affected.

#quickbar h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - this will change the color, size and font family only of the titles of all the menus in the left column.

#p-search h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the style of the title of the Search block on the left (it's labeled Find). This is the only text element to be modified in that block.

#p-navigation { font-size: 12px; font-family: "Courier New"; } - affects the style of the Browse menu in the left column. The title of the menu is not affected.

#p-navigation h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - affects only the title of the Browse menu in the left column.

#p-cactions { font-size: 12px; font-family: "Courier New"; } - changes the font size and family of the Edit menu in the left column. The title of the menu is not affected.

#p-cactions h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the style only of the title of the Edit menu in the left column.

#p-pageoptions { font-size: 12px; font-family: "Courier New"; } - affects the text size and style of the entries in the menu labeled This menu in the left column. The title of the menu is not affected.

#p-pageoptions h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the appearance only of the title of the menu This menu.

#p-personal { font-size: 12px; font-family: "Courier New"; } - this affects the size and style of the text in the menu My pages in the left column, excluding the title of the menu.

#p-personal h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - sets the color, size and font family only of the title of the menu My pages.

#p-tb { font-size: 12px; font-family: "Courier New"; } - changes the font size and family of the links in the menu Tools in the left column (without affecting the title of the menu).

#p-tb h3 { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes only the title of the Tools menu.

#footer { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the style of all the text in the footer area of the site. These include the buttons for performing actions with the page (e.g. Edit this page, Discuss this page, Page history, etc.), as well as the page information that's under them (e.g. last modification, license agreement information).

#footer-navigation { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - changes the style of all the buttons in the footer for performing actions with pages; this also includes the title of the Find block that's at the bottom of the page. The page information about the last modification and the info about the license agreement are not affected.

#footer-info { color: #5a7425; font-size: 12px; font-family: "Courier New"; } - affects only the footer information that's at the very bottom of the page. This is the information about the last modification made to the page and about the license agreement used on the site.

Change Font Color, Size and Family Per Namespace

When you make the above changes they will affect all pages on your MediaWiki site. It's also possible to apply the change(s) to all the pages only in particular namespace or you can do that for a particular page.

If you don't want to change the style on the pages of all namespace but only of a particular namespace, you can use the same code as shown in the previous sections; you only have to add at the beginning the code with the ID number of the particular namespace. For example, to change the style for the Vector and MonoBooks skins of the titles of pages only from the Main namespace (that's the namespace that contains all articles), you can add the following to the page MediaWiki:Common.css or to the CSS page of the particular skin (e.g. MediaWiki:Vector.css):

.ns-0 #content h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; }

The only difference is that at the beginning you have to add .ns-0 which specifies that the changes should apply only to the pages from the namespace with an ID number 0. That's the Main namespace. If, for example, you add the following code:

.ns-2 #content h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; }

this will apply the changes to the namespace with the ID number 2; that's the namespace that contains the personal user pages.

For a list of the namespaces and their ID numbers check out our reference list of MediaWiki namespaces.

Change Font Color, Size and Family Per Page

You can add a text style change that will apply only to a specific page(s). The only difference as compared to changing the style on all pages is that at the beginning of the code you have to add some code with the name of the page. For example, the following will change the style of page titles on all pages (when the Vector and MonoBook skins are used):

#content h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; }

If you want to change the style of the title only of a page called Example Page, then you have to use the following code instead:

body.page-Example_Page #content h1 { color: #5a7425; font-size: 12px; font-family: "Courier New"; }

To change a different page just replace the name of the page in the code. If the name consists of more than one word, separate them with underscores. This also applies to the names of pages that belong to namespaces other than the Main namespace. As you know the full name of such a page consists of the namespace prefix and the name of the page. In the URL addresses of these pages the namespace prefix is separated from the name of the page with a colon (e.g. Talk:Main_Page), while when you use this name in the CSS code all words should be separated with underscores (e.g. Talk_Main_Page).

You can also find useful the following articles on CSS modifications:

Was this answer helpful?

 Print this Article

Also Read