MediaWiki Skins Design

By Richard Carter

This book takes you step by step through customizing your MediaWiki skin. It is full of practical examples of MediaWiki skinning techniques, and clear explanations of how MediaWiki skinning works. The early chapters go through each element of a MediaWiki design, showing the CSS and PHP tags necessary to customize MediaWiki's appearance. Later chapters look at ways to further enhance your design using extra graphics, JavaScript, AJAX, dynamic CSS, and more. This book is aimed at web designers or wiki administrators who want to customize the look of MediaWiki with custom skins. The reader will already have a MediaWiki installation that they are targeting with their skin. It might be their own installation, or they might be a designer developing a custom look for a client. The book does not cover setting up or using MediaWiki, except features specifically related to skinning. The book assumes that you are familiar with CSS and HTML, but no prior knowledge of PHP is required.

• Language: English
• Publisher: Packt Publishing
• Release date: Aug 22, 2008
• ISBN: 9781847195210

Richard Carter

Richard Carter, MFA, is Co-Founder & Director of the Community Shakespeare Company for young actors. His award-winning plays have been produced from Seattle to London. His verse adaptations of classic literature motivate and enchant actors and audiences, pre-school through adult. Richard lives with his family on an island in Washington State.

Book preview

Table of Contents

MediaWiki Skins Design

Credits

About the Author

About the Reviewer

Preface

What This Book Covers

What You Need for This Book

Who is This Book For

Conventions

Reader Feedback

Customer Support

Downloading the Example Code for the Book

Errata

Piracy

Questions

1. Introduction

Examples of MediaWiki Skins

Wikipedia: The Monotony of MonoBook

Bog Standard

Nostalgia

Modern

Simple

Cologne Blue

Customized MediaWiki Skins

Adobe Labs Wiki

AboutUs

The WordPress Codex

Why Skin Your (Media) Wiki?

Distinguishing Your Wiki

Integrating it With Your Website

Improving Your Wiki's Usability

Adding and Removing Widgets and Features

Our Case Study: JazzMeet

The Process of Skinning MediaWiki

Your Wiki's Purpose

Your Wiki's Audience

Summary

2. Formatting the Body

Initializing Your Skin

CSS and Image Files

PHP Template

Using Your Skin

Making Your Skin as Wiki's Default Skin

Making Your Skin as Your Default Skin

Styling Article Content

The Content Body

Category Links

editsection: page editing options

SiteSub: Your Wiki's Claim to Fame

toc: Table of Contents

Wikitable: Tabular Data

Other elements of interest

Images

Thumbnailed Images

Making Our Case Study 'JazzMeet'

Content

The Content Block: #content

Headings: .mw-headline, .firstHeading

Table Of Contents: #toc, .toc

Categories

Images

Thumbnail Images

Tables

Talk Pages

New Message Notification: .usermessage

Redirect Pages

Image Detail Pages

Empty Articles

Search Results

Recent Changes

Styling the Edit Interface

The Basics

Toolbar

Legal Notices and Warnings

Preview Page

Show Differences

Logging In and Registering

JazzMeets So Far

Summary

3. Formatting Interface Elements

The Interface Area: .portlet

Changing the Logo

The Logo File

Changing Your Logo in the PHP File

Changing the Logo in LocalSettings.php: $wgLogo

Changing the Logo File

Styling the Navigation: #p-navigation

Table of Elements: #p-navigation

The Userbar: #p-personal

Table of Elements: #p-personal

View Options: #p-cactions

Table of Elements: #p-cactions

The Toolbox: #p-tb

Table of Elements: #p-tb

The Search Box: #p-search

Table of Elements: #p-search

The Footer: #footer

Table of Elements: #footer

Summary

4. Changing the Layout

Keep Your Head On: MediaWiki's Tag

The Page Title:

Page Styles: Importing Stylesheets

Content-Type Declaration

usercss and pagecss

JavaScript: wikibits.js

Favicon: favicon.ico

Changing the Content Area: #bodyContent

Page Anchors

Headings

Content Blocks

contentSub

New Talk

Jump-To Links

Page Content

Category Links

Changing the Interface

MediaWiki Interface Element Pages

Wiki Navigation: MediaWiki:Sidebar

MediaWiki:Sitenotice

The Special Page Tab

MediaWiki: MenuNavigation

The Edit Toolbar

Toolbar buttons

Adding a new toolbar button

Creating Your Own Template

Ordering Elements

Content Ordering

Layouts with CSS

Moving Blocks Around

The Header

The Content Column: #column-one

The Content Body

The Footer

End Of The Template File

The Result

Summary

5. Useful MediaWiki Functions

PHP Functions and MediaWiki Functions

Using MediaWiki Functions

Retrieving the Data

Retrieving Data from a Variable

Retrieving Data from a Function

Formatting the Data

html

htmlentities

htmlspecialchars

text

Functions for

Headlinks

Pagetitle

ServerURL

Skinname

Stylepath

Stylename

StyleVersion

TrackbackHTML

UserCSS

Functions For

Within

Functions for page content

ArticleID

Bodytext

Category Links

Jump to navigation links

Message Notification

Pagetitle

Sitenotice

Subtitle and Redirects

Tagline

Undelete

Footer

Functions for the Interface

Logopath

Non- Special Pages

Whatlinkshere

Recent Changes

Printable Version

Personal Tools

Search

Views

Toolbox

Loose Ends

Bottomscripts

Debugging

Reporttime

Restoring Warnings

Advanced PHP Functions

Global Variables

Example: Dynamically Creating Linking Code

Overview: Variables at a Glance

text Variables

html Variables

Summary

6. Adding Decorative Elements

Decorative Elements

When to Use Decorative Elements

Focus-Drawing Techniques

Suggestion of Movement

Drawing Focus with Arrows

Color Contrast

The Color Wheel

Grayscale and Monotone

Diagonal Lines

Size

Indentation

Padding

Order

Depth and the Third Dimension

Focus-Lessening Techniques

Summary

7. Dynamic CSS and JavaScript

Inline Edit Interface

ThickBox

What does ThickBox Support?

ThickBox's Features

GreyBox

What does GreyBox Support?

GreyBox's Features

Lightbox 2

What does Lightbox Support?

Lightbox's Features

Lightbox 2 Wins

Installing Lightbox 2

Script Files for Header

Lightbox CSS

rel=lightbox

Identifying the edit link

Customizing Lightbox 2

Changing Lightbox Graphics

Changing Lightbox CSS

Changing Lightbox Captions

LightboxThumbs

Installing LightboxThumbs

The Result

Tables: Making Data easier to read

Installing Tablecloth

Customizing Tablecloth

The Result: Highlighted Tables

Summary

8. Social Networking and MediaWiki

Integrating Twitter with MediaWiki

Shorter Links

Creating a Twitter Account

Embedding Twitter Feeds in MediaWiki

Styling Twitter's HTML

Inserting Twitter as Page Content

YouTube in MediaWiki

MediaWiki Extension: VideoFlash

Installing VideoFlash

Embedding YouTube Videos in Page Content

Embedding Videos from other Video Providers

Telling your Visitors

Social Bookmarking

Individual Social Bookmarking Services

Your Wiki's Audience

Example of Audience

Mister Wong

Linking to Mister Wong

What Mister Wong Users See

Furl

Linking to Furl

What Furl Users See

Facebook

Linking to Facebook

What Facebook Users See

Social Bookmarking Aggregators

AddThis

Linking to AddThis

Socializer

Linking to Socializer

What Socializer Users See

Social bookmarking for JazzMeet

Summary

9. Deploying Your MediaWiki Skin

Deploying on your Own Wiki

Packaging Your MediaWiki Skin

What Needs to be Included

README File

Formats and Compression

Tar Compression

ZIP Compression

Licensing Options

Usual Licensing and Copyright

Creative Commons

Parts of Creative Commons License

Commons Deeds

Legal Code

Digital Code

Attribution License

Attribution-Non-Commercial License

Attribution-Non-Commercial-No Derivative Works License

Attribution-Non-Commercial-Share Alike License

Attribution-No Derivative Works License

Attribution-Share Alike 2.0 License

Understand the License

Waiving the Restrictions

GNU Licenses

Summary

10. MediaWiki Print Styles

Viewing the Printable Version of Your Page

URLs in MediaWiki

Print URL

Wiki Markup

What's Already Done for Us: commonPrint.css

A Separate Print Stylesheet

External Links

Page Content

Site Notice

Table of Contents

Images

Thumbnail Images

Diff - document difference pages

Links

Footer and Miscellaneous Elements

What Remains to be Styled

Content

Table of Contents

Categories

Tables of Data

Footer

Printfooter

New Message Notification

Summary

A. Troubleshooting Browser Issues with MediaWiki

Browser Modes

Standards Mode

Quirks Mode

Conditional Comments

Versionless Conditional Comments in Internet Explorer

Version-Based Conditional Comments in Internet Explorer

Stylesheets and Conditional Comments

Conditional Stylesheets

Internet Explorer 5 Bugs

Background Image Bug

Font-Sizing Bug

Cursor Hand bug

Internet Explorer 6 Bugs

Double-Margin Bug

Inline List Items Partially Displayed

Bugs in Other Browsers

Firefox Bugs

Empty Divs Not Clearing

Testing your Design in Multiple Browsers

Cheaper Alternatives for Testing

Summary

Index

MediaWiki Skins Design

Richard Carter

---

MediaWiki Skins Design

Copyright © 2008 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author(s), Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: August 2008

Production Reference: 1140808

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-847195-20-3

www.packtpub.com

Cover Image by Nilesh Mohite (<[e-mail]>)

Credits

Author

Richard Carter

Reviewer

Peter De Decker

Senior Acquisition Editor

David Barnes

Development Editor

Swapna V. Verlekar

Technical Editor

Shilpa Dube

Copy Editor

Sneha Kulkarni

Editorial Team Leaders

Mithil Kulkarni

Akshara Aware

Project Manager

Abhijeet Deobhakta

Project Coordinator

Lata Basantani

Indexer

Rekha Nair

Proofreader

Dirk Manuel

Production Coordinator

Aparna Bhagat

Cover Work

Aparna Bhagat

About the Author

Richard Carter started as a freelance web designer in Leicestershire, UK, before moving to the North-East to study at Durham University, where he met his business partner. He is now Senior Partner of Peacock Carter (http://www.peacockcarter.co.uk), a Newcastle-based creative partnership offering website design and corporate identity development to small, medium, and large businesses in UK and further afield.

Richard's interests include tea-drinking, swimming, and periodically reorganizing the office furniture. He now lives in Durham, slightly too close to the Cathedral's bells.

Contact: <[e-mail]>

Firstly, I'd like to thank David Barnes of Packt for helping to nurture the idea for this book, and to those behind the scenes at Packt - particularly Lata - for their help guiding me through their processes.

Michael, my business partner, is owed thanks too, for keeping the business running during those times I needed to concentrate on the book, as are Danni, my friends, and my family, all of whom were supportive throughout (and probably relieved that I had something to do with my time other than creating websites).

Additional thanks are due to Peter, the reviewer, who had plenty of useful and interesting suggestions for the book.

About the Reviewer

Peter De Decker is the author of a MediaWiki extension called IpbWiki which is an integration plugin that integrates the forum software Invision Power Board with the Mediawiki engine with the main purpose of giving the applications a unified look and login. During the ongoing creation of this extension he has become an expert in understanding the MediaWiki source code and layout.

As Peter had previously reviewed the MediaWiki Administrator book it was only logical to also use his MediaWiki expertise for this book on MediaWiki skinning.

During his day job Peter works as a Database Adminstrator for SQL Server in a company called Financial Architects, where he is part of the Core Development team. His main task there is to provide a solid product base which the other teams in the firm can use or expand up on. As a secondary profession, he sells software and services through his company called Global Soft. When he's not working he likes to exercise his hobbies: running, biking, collecting comics, and playing snooker.

Contact: <[e-mail]>

Alternative Email: <[e-mail]>

I'd like to thank Richard Carter for writing this book on skinning MediaWiki and hope that it will help to further spread the love for this wonderful wiki engine.

Preface

MediaWiki Skins Design takes you through the process of creating a new skin (design) for your wiki, from thinking about your wiki's audience and purpose, to adding social media features, and even styling the wiki for printing.

What This Book Covers

Chapter 1 takes a look at existing wikis on the web, and introduces the case study used throughout the book.

Chapter 2 goes through setting your new skin as the wiki's default skin, and styling the different views of the wiki's primary content that will be seen by your wiki's visitors.

Chapter 3 describes how the interface elements such as the navigation links and search feature can be styled, as well as how to customize the edit toolbar.

Chapter 4 takes a look at the attributes in MediaWiki, and begins to structure the case study wiki in to a newer, more suitable layout.

Chapter 5 covers more in-depth PHP and MediaWiki functions you can use to enhance your new MediaWiki skin.

Chapter 6 describes how to design and create a visual hierarchy for your wiki's content.

Chapter 7 describes useful JavaScript code and CSS that you can use to enhance your wiki and its features.

Chapter 8 explains how to integrate your wiki with social networking sites, and how to use services such as YouTube and Twitter on your MediaWiki.

Chapter 9 takes a look at deploying your new MediaWiki skin, and the options you have when licensing your wiki's skin for others to use.

Chapter 10 explains how to style your wiki's content for printing.

In Appendix A, the different modes of interpretation such as Standards mode and Quirks mode are discussed.

What You Need for This Book

Access to a server, either available on your computer locally, or on the web, is useful to test your skin. Additionally, you will need to have installed MediaWiki, and have full permissions to edit the files associated with it. Other than this, a simple text editor or any HTML/CSS/PHP editor with syntax highlighting will be required.

Who is This Book For

This book is aimed at web designers or wiki administrators who want to customize the look of MediaWiki by using custom skins.

You will already have a MediaWiki installation that you are targeting with your skin. This might be your own installation, or you might be a designer developing a custom look for a client. The book does not cover setting up or using MediaWiki, except for features specifically related to skinning.

This book assumes that you are familiar with CSS and HTML, but no prior knowledge of PHP is required.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in the text are shown as follows: We can include other contexts through the use of the include directive.

A block of code is shown as follows:

shortcut icon href=/favicon.ico />