Knowledgebase

How to capitalize and make uppercase page titles and subheadings in MediaWiki

When a new page is created the user can type the title using any combination of uppercase and lowercase letters. The title is saved the way it's typed. So, for example, if a user types the title only with uppercase letters, that's how it will be saved and displayed. What MediaWiki changes automatically by default is to make the first letter of the title uppercase (in case it's originally typed with a lowercase letter); if however the title consists of more than one word, MediaWiki doesn't automatically turn into uppercase the rest of the words in the title.

In case you want to make sure that each word in page titles is shown with a capital letter (e.g. Example Page Title) you can do that with a simple modification. It's also possible with a similar modification to display all titles with uppercase letters (e.g. EXAMPLE PAGE TITLE). Both things can be achieved with CSS modifications.

You can also do that for subheadings (also referred to as page section headings). By default, MediaWiki doesn't automatically capitalize the first letter of subheadings, so if it's typed with a lowercase letter, that's how it will be displayed.

Note that these modifications are, so to say, cosmetic. This means that the original name of the page will still be the one that was specified during the creation of the page. The modification only changes how the title is displayed at the top of the page on the frontend. This is important when you add links to pages. For example, if the name of a page is Example page and you add a modification for capitalizing the words in page titles, the title will be displayed as Example Page, but it's original name will still be Example page. That's the name that you have to use when you add links to the page.

In MediaWiki CSS modifications can be made by adding the modification to the content of the page MediaWiki:Common.css on your site (e.g. yourdomain.com/index.php/MediaWiki:Common.css), or if you want only a specific skin to be modified, you can add the change only to the CSS page of that skin (e.g. MediaWiki:Vector.css for the Vector skin). Note however that page titles and subheadings may be defined with different tags and IDs in the different skins. So one specific modification may work with one skin but not with another. For some more basic information on CSS changes check out the article on how to make CSS modifications in MediaWiki. There you'll also find tips on how to find the IDs if different text elements (such as page titles).

The basic form of the CSS code for capitalizing words is the following:

element { text-transform: capitalize; }

And for making text uppercase it's:

element { text-transform: uppercase; }

You have to replace element with the actual tag and/or ID with which the title is defined in the particular skin.

A single modification can affect all titles; or it can be done per namespace, or per page.

Make Capitalized or Uppercase the Titles and Subheadings of All Pages

In most skins page titles are defined with the h1 tag. This means that the following modification:

h1 { text-transform: capitalize; }

will work for most skins. It will capitalize the titles of all pages.

The modification:

h1 { text-transform: uppercase; }

will make page titles uppercase.

Depending on the skin, there may be other text elements (e.g. the site title) that are defined with h1. In such a case the above modification will affect these elements as well.

Section headings are usually defined in most skins with h2. This means that you can capitalize them with:

h2 { text-transform: capitalize; }

And make them uppercase with:

h2 { text-transform: uppercase; }

These are the section headings that are hierarchically direct subheadings of the page title. As you know you can also add sections within section. So subheadings of subheadings are defined with h3; to modify them you only have to replace h2 with h3 in the above examples.

The above example modifications will work with the skins that come prepackaged with MediaWiki (Vector, MonoBook, Modern, Cologne Blue) and with most other skins.

As we mentioned, other text elements may be defined with the tags that are used for page titles and subheadings. For example, in many skins h3 is used for the titles of navigation menus, as well as for subheadings of subheadings in the page content. In such a situation, you can add to the modification code the ID of the page content to limit the scope of the modification only to the page content, excluding any menus, the site title, the footer, etc. This ID is skin-specific. For some skins it may be the same, while for others it may be different. We'll give examples with the prepackaged skins.


Vector and MonoBook

The page content is defined in those skins with the ID #content, so to make sure that changes are applied only to page titles and/or subheadings you can use the modifications:

#content h1 { text-transform: capitalize; } - turns the first letters of the words in page titles into capital ones

#content h1 { text-transform: uppercase; } - makes page titles uppercase

#content h2 { text-transform: capitalize; } - capitalizes the words of section headings

#content h2 { text-transform: uppercase; } - makes uppercase section headings

When it comes to the prepackaged skins these examples will also work with the skin Cologne Blue.


Modern

#mw_header h1 { text-transform: capitalize; } - capitalizes page titles

#mw_header h1 { text-transform: uppercase; } - page titles are all made uppercase

#mw_content h2 { text-transform: capitalize; } - affects the headings of page sections

#mw_content h2 { text-transform: uppercase; } - makes the headings of page sections uppercase


Cologne Blue

#article h1 { text-transform: capitalize; } - turns into capital letters the first letter of each word in page titles

#article h1 { text-transform: uppercase; } - turns all letters in page titles into uppercase letters

#article h2 { text-transform: capitalize; } - capitalizes the headings of page sections

#article h2 { text-transform: uppercase; } - makes the headings of page sections uppercase

Capitalize or Make Uppercase Page Titles and Subheadings per Namespace

If you don't want all pages to be affected but just those from a particular namespace, you can do that as well. For this purpose you can use the same code that affects all pages and in front of it put some code that specifies the namespace. This is done in the following way:

.ns-0 h1 { text-transform: uppercase; }

The above example code will make uppercase the titles of all pages that belong to the namespace with an ID number 0; this is the Main namespace that contains all articles. For information on the ID numbers of the default namespaces check out the reference list of MediaWiki namespaces.

Capitalize or Make Uppercase Page Titles and Subheadings per Page

To change the capitalization of the title and subheadings of a particular page, use the code that afffects all pages and in front of it add some code that specifies the page. For example:

body.page-Example_Page h1 { text-transform: uppercase; }

The above will make uppercase the title of the page Example Page. You only have to replace the name with the actual title of the page that you want to be affected. If the title consists of more than one word, separate them with underscores _. For pages that are from a namespace other than the Main namespace, you also have to add the namespace prefix to the title of the page (e.g. Talk_Example_Page).

For more modifications to page titles and subheadings and other CSS modifications you may find useful the following articles in our knowledgebase:

Was this answer helpful?

 Print this Article

Also Read