MediaWiki Skins Design

Richard Carter

Jump to: Overview | Reviews | The Author | Sample Chapters

Click here to view more images

eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats

$15.59 save 35%!

Print book: $39.99

$35.99 save 10%!

Print + eBook bundle: $63.98
Includes free access to the book on PacktLib

$39.59 save 38%!

Free Shipping! UK, US, Europe and selected countries in Asia.

This book can also be purchased from:

Overview

Table of Contents

The Author

Reviews

Downloads

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 : 978-1-847195-20-3
Author(s) : Richard Carter
Topics and Technologies : All Books, Open Source

Preface
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
Index

Preface

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

Index

Richard Carter

Richard Carter is a front-end web developer with a passion for integrating designs in a range of open source e-commerce and content management systems, including Magento, MediaWiki, Joomla!, and Drupal. His expertise has led clients including University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk, to consult his knowledge on open source systems. Richard is Creative Director at Peacock Carter Ltd (peacockcarter.co.uk), a web design and development agency based in the North East of England. He graduated from the University of Durham in Software Engineering, and currently lives in Newcastle-upon-Tyne. He blogs at earlgreyandbattenburg.co.uk and tweets at twitter.com/RichardCarter.

If you want to look for something in MediaWiki design, you might want to take a look at this one.

If you just want a practical step by step guide book to creating MediaWiki skins then this is the book for you.

Sample chapters

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

Find your book in our support section to find errata and to download code samples.

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.

Special Offers

PacktLib gives you access to this and 600+ other titles with an annual or monthly subscription.

Annual subscription:

$220.00 per annum

Monthly subscription:

$21.99 per month

Buy 2 eBooks and Get 50% Off		+
Buy MediaWiki Skins Design with MediaWiki 1.1 Beginner's Guide and get 50% off both the eBooks.
Just add both the eBooks to your shopping cart and enter msk11bg in the 'Enter Promotion Code' field. Click 'Add Promotion Code' and the discount will be applied.
View Best Selling eBook offers

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.

Approach

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.