MediaWiki Skins Design

MediaWiki Skins Design
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 35%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • A practical, clear guide to building custom MediaWiki skins
  • Extensive guidance on adjusting the layout and design of your MediaWiki's appearance
  • Attractive examples and design tips for using JavaScript and dynamic CSS to enhance your wiki's design
  • Change every aspect of MediaWiki's appearance to produce a wiki that's fully tailored to your requirements

Book Details

Language : English
Paperback : 248 pages [ 235mm x 191mm ]
Release Date : August 2008
ISBN : 1847195202
ISBN 13 : 9781847195203
Author(s) : Richard Carter
Topics and Technologies : All Books, CMS and eCommerce, Open Source

Table of Contents

Chapter 1: Introduction
Chapter 2: Formatting the Body
Chapter 3: Formatting Interface Elements
Chapter 4: Changing the Layout
Chapter 5: Useful MediaWiki Functions
Chapter 6: Adding Decorative Elements
Chapter 7: Dynamic CSS and JavaScript
Chapter 8: Social Networking and MediaWiki
Chapter 9: Deploying Your MediaWiki Skin
Chapter 10: MediaWiki Print Styles
Appendix A: Troubleshooting Browser Issues with MediaWiki
  • Chapter 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
  • Chapter 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
    • 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
  • Chapter 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
  • Chapter 4: Changing the Layout
    • Keep Your Head On: MediaWiki's <head> Tag
      • The Page Title: <title> and MediaWiki:PageTitle
      • 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
    • 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
        • The Result
    • Summary
  • Chapter 5: Useful MediaWiki Functions
    • PHP Functions and MediaWiki Functions
      • Using MediaWiki Functions
        • Retrieving the Data
        • Formatting the Data
    • Functions for <head>
      • Headlinks
      • Pagetitle
      • ServerURL
      • Skinname
      • Stylepath
        • Stylename
      • StyleVersion
      • TrackbackHTML
      • UserCSS
    • Functions For <body>
      • Within <body>
      • 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
        • 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
  • Chapter 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
  • Chapter 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
  • Chapter 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
  • Chapter 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
        • 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
  • Chapter 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
  • Appendix 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

Richard Carter

Richard Carter is a web designer and frontend web developer based in Newcastle upon Tyne in the North-east of England.

His experience includes many open source e-commerce and content management systems, including Magento, MediaWiki, WordPress, and Drupal. He has worked with clients including the University of Edinburgh, University College Dublin, Directgov, NHS Choices, and

He is a creative director at Peacock Carter Ltd (, a web design and development agency based in the Northeast of England. He graduated from the University of Durham in Software Engineering. He blogs at and tweets as @RichardCarter.

Magento 1.8 Theme Development is Richard's seventh book. He has previously written MediaWiki Skins Design, Magento 1.3 Theme Design, Magento 1.4 Theme Design, Joomla! 1.5 Templates Cookbook, and The Beginner's Guide to Drupal Commerce, Magento Responsive Theme Design, and acted as a technical reviewer on MediaWiki 1.1 Beginners Guide, Inkscape 0.48 Illustrator's Cookbook, and Apress' The Definitive Guide To Drupal 7.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 1 submitted: last submission 10 Sep 2012

Errata type: Code Page number: 24

Open this file and edit the line that reads- class SkinMonoBook extends SkinTemplate to read class YourSkinName extends SkinTemplate, but replace YourSkinName with the name of your new skin.

Should read replace with 'SkinYourSkinName'.

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

MediaWiki Skins Design +    IBM Cognos TM1 Developer's Certification guide =
50% Off
the second eBook
Price for both: $45.15

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Understand the architecture of a MediaWiki skin: how CSS, PHP, and image files work together to create a particular look.
  • Customize all aspects of your wiki's appearance: the article display screens, the editing screens, the fonts, images, layout and colors.
  • Integrate your wiki with services such as Twitter, YouTube, and features from your own website.
  • Make your wiki more user-friendly: use interface design to encourage edits, make articles more readable, and make the wiki easier and more fun to use.
  • Create print style sheets for your wiki, making it easy for users to get hard copies of wiki pages.
  • Incorporate JavaScript and AJAX features into your MediaWiki skin, providing faster edits and greater usability.
  • Ensure your skin is compatible with the major browsers, including the popular but badly behaved Internet Explorer.
  • Deploy your skin to a live MediaWiki server, and see how to distribute it to other MediaWiki owners.
  • Study existing MediaWiki skins, and find out why the default skins aren't great for your wiki.

In Detail

Wikis are a great way to collaborate and share knowledge online. MediaWiki is a popular and powerful wiki engine, powering some of the biggest wiki sites in the world – including Wikipedia, the biggest and most famous wiki of all.

If you have a MediaWiki-based site and want to tailor its appearance, then this book is for you. MediaWiki Skins Design shows you how to fully customize the appearance and interface of your MediaWiki-based wiki. You will learn how to change every aspect of your wikii's appearance to produce a MediaWiki site fully tailored to your requirements.

The book provides full details of how MediaWiki skins work, and the necessary template and CSS customizations required to completely alter MediaWiki's appearance. Using this book, you will learn to develop rich, attractive, and friendly skins for MediaWiki.

  This book will show the reader how to customize the appearance of their MediaWiki site by creating custom skins.


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.

Who this book is for

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.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software