MediaWiki Skins Design Table of Contents

Cart | Your Account | Trade | Sitemap

Back to BOOK PAGE

Table of Contents

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

Back to BOOK PAGE

© Packt Publishing Ltd 2010