Customizing MediaWiki Appearance with CSS and Templates

Why “skin‑deep” isn’t enough

When you first hop onto a fresh MediaWiki install, the default look feels… well, kind of bland. The familiar blue‑green header, the default logo, that plain gray sidebar—nothing screams “my wiki”. Most admins stumble on the fact that the look of a wiki lives not just in the skin you pick, but also in a few hidden pages that act like mini‑style‑sheets and template files.

In this post I’ll walk you through the two‑pronged approach most seasoned wiki‑folk use: CSS tweaks in MediaWiki:Common.css and template‑based markup that lets you ship reusable design nuggets across pages. Grab your favorite coffee, and let’s get our hands dirty.

First stop: the CSS playground

MediaWiki ships with a set of built‑in skins (Vector, MonoBook, Timeless, etc.). Each skin loads its own stylesheet, then, right after that, MediaWiki pulls in MediaWiki:Common.css. Think of it as the “after‑effects” layer—anything you dump there will sit on top of the skin’s defaults, for every skin you have enabled.

How to edit Common.css

1. Log in as an administrator.
2. Navigate to MediaWiki:Common.css (just type that into the search box).
3. If the page is empty, click “Edit”. Otherwise, click “Edit source”.

Save your changes and—voilà—the whole wiki refreshes with your new rules. No need to clear caches (though you might want to force‑reload your browser to see the effect).

Example: swapping the logo without touching the skin

#p-logo a {
    background-image: url('https://example.com/my‑logo.png');
    background-size: contain;
    width: 200px;
    height: 120px;
}

This snippet targets the logo block that lives in the page‑portlet. By overriding #p-logo a you keep the rest of the skin untouched—no need to fork a whole new skin.

Little‑but‑crucial tricks

• Use !important sparingly. It’s a quick fix when a skin’s own rule is more specific, but overusing it leads to a CSS spaghetti that’s a nightmare to debug later.
• Group related rules with comments. MediaWiki lets you use /* comment */ in the same way a regular stylesheet does. It helps future you (or a teammate) find the “header” section fast.
• Leverage the body.mediawiki selector to keep your changes scoped only to wiki pages—not the login or special pages that have a different DOM.

Templates: the “design components” you didn’t know you needed

Okay, CSS solves the “how does it look” part, but what about “where do I put this stuff”. Suppose you want a fancy call‑out box that appears on dozens of articles. You could copy‑paste the same HTML and CSS snippet a hundred times—sounds like a chore, right? That’s where MediaWiki’s Template: system shines.

Creating a reusable box template

{{#if: {{{title|}}} |

{{{title}}}
{{{content}}}

|}}

Save the above as Template:Callout. Then, anywhere you need the box, just write:

{{Callout|title=Heads‑up!|content=Remember to back up your database before major changes.}}

When the page renders, MediaWiki expands the template, injects the parameters, and you get a neat, consistently styled callout without ever touching a CSS file again—except maybe to add the .callout-box class to Common.css for global tweaks.

Mixing CSS and templates for maximum impact

What’s neat is that templates can include <style> blocks too. A quick example:

{{#if: {{{color|}}} |
<style>
.custom‑badge { background:#{{{color}}}; color:#fff; padding:2px 6px; border-radius:3px; }
</style>
}}<span class="custom‑badge">{{{label|Note}}}</span>

This “badge” template lets you pick a background color on the fly—handy for tagging pages with a “draft”, “reviewed” or “archived” badge without hard‑coding a palette.

Putting it all together: a case study

Imagine you’re running a small community wiki for a local hiking club. You want:

• A custom header with the club’s crest.
• Sidebar boxes that highlight upcoming treks.
• Consistent “gear list” tables that look the same on every trail page.

Here’s a fast‑forward roadmap that shows how CSS + templates can meet those needs.

Step 1 – Header makeover

Add to MediaWiki:Common.css:

#p-logo a {
    background-image: url('https://hikeclub.org/assets/crest.png');
    width: 180px; height: 90px;
    background-size: contain;
    margin-left: 10px;
}

That little change replaces the default wiki logo with the club crest. No skin rebuild necessary.

Step 2 – Sidebar trek teaser

Create Template:UpcomingTrek:

{{#if: {{{date|}}} |

{{{date}}} – {{{trail}}}
{{{details|No details yet.}}}

|}}

And add the accompanying CSS:

.upcoming-trek {
    border: 1px solid #b5651d;
    background:#fff8e1;
    padding:8px;
    margin-bottom:10px;
}
.upcoming-trek .details { font-size:0.9em; color:#555; }

Now any page can drop the template into the sidebar (via MediaWiki:Sidebar or a [[Special:Sidebar]] edit) and the look stays uniform.

Step 3 – Gear tables

Define a table template that ships specific classes:

{{#if: {{{items|}}} |
{| class="gear-table"
! Item !! Qty !! Notes
{{{items}}}
|}

Use it like this on a trail page:

{{GearTable|items=
|- 
| Trekking Poles || 2 || Adjustable 
|-
| Water Bottle || 1 || 1‑liter insulated
|-
| Map || 1 || Printed topographic
}}

And the CSS:

.gear-table { border-collapse:collapse; width:100%; }
.gear-table th, .gear-table td { border:1px solid #777; padding:4px; }
.gear-table th { background:#e0f2f1; text-align:left; }

All gear tables now have the same clean, border‑styled layout—no need to remember exact markup each time.

Tips, tricks, and the occasional hiccup

Even with the power of CSS and templates, you’ll occasionally hit a snag. Here are a few notes that saved me a lot of head‑scratching:

• Namespace confusion – Remember that MediaWiki: pages are special. If you accidentally create Template:MediaWiki.css you’ll end up with a broken page. Double‑check the prefix.
• Cache lag – After a big CSS overhaul, some users still see the old style because their browser cached the old Common.css. A quick ?action=purge on any wiki page forces a refresh, or you can add a version comment like /* v2.1 */ to the top of the file.
• Selector specificity – If a skin uses very specific selectors (e.g., .skin-vector .mw-body { … }), you may need to up your specificity with #mw-content-text .my‑class or body.mediawiki .my‑class. Over‑using !important works but makes future edits a nightmare.
• Template recursion – It’s tempting to call one template from another to keep things DRY, but be careful not to create an infinite loop. MediaWiki will cut you off after a few recursions, but you’ll get a cryptic “Recursive include” error.

Wrapping up… or not?

There’s no grand finale in a wiki—pages keep growing, users keep submitting edits, and the look of the site evolves. The sweet spot lies in balancing global CSS tweaks (for things like the logo, primary colors, and overall spacing) with local template components (for reusable boxes, tables, and badges).

If you ever feel like you’re drowning in “style‑over‑load”, step back, open MediaWiki:Common.css in a fresh tab, and ask yourself: “Do I really need a new rule, or can I just wrap this in a template?” Often the answer is the latter, and your wiki stays both pretty and maintainable.

Give it a try. Tinker with the CSS, drop a few templates, reload the page, and you’ll see—your wiki can look exactly the way you imagined, without having to start a whole new skin from scratch. And hey, if you break something, just hit ?action=edit on the offending page and fix it. That’s the beauty of an open, community‑driven platform.