Customizing MediaWiki for beginners

From mediawiki.org
Jump to navigation Jump to search

This is an introduction for beginning users of MediaWiki on how to customize your MediaWiki installation. It assumes that you already have MediaWiki installed, and have a basic understanding of how to use HTML and CSS.

Changing the background color[edit]

To change the background color of the MediaWiki interface outside of the page content and tabs, add the following CSS to the MediaWiki page [[MediaWiki:common.css]] (you can access this page by typing "MediaWiki:common.css" into your MediaWiki search box).

/* Changes the background color of the bottom and left of each page, up to behind half of the logo: */
body {
  background: red;
}

/* Changes the background color behind the top half of the logo and at top of each page: */
#mw-page-base {
  background: red;
}

This will change the background color outside of the tabs, search, and page content to red (or whatever your favorite color is).

Adding Google Fonts[edit]

Google Fonts is a repository of free open-source fonts that you can easily use on MediaWiki. Go to https://fonts.google.com/, find some fonts that you like, and select them by clicking the "plus" (+) icon. You can select more than one Google Font to be added. You should see a pop-up on your browser stating "n Families Selected," with n being the number of fonts that you have selected. Click the tab for the pop-up notification, and then select "@IMPORT." Copy and paste the CSS there into [[MediaWiki:common.css]], following the examples below (which use Noto Sans and Noto Serif, the default fonts for the free open-source Android operating system, which have good support for Unicode text).

@import url( 'https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif ');

/* Changes the default font used for MediaWiki to Noto Sans (does not include headings or monospaced text): */
body {
  font-family: "Noto Sans", sans-serif;
}

/* Changes the default font used for MediaWiki headings to Noto Serif: */
#content h1, 
#content h2 {
  font-family: "Noto Serif", serif;
}