MediaWiki Skins Design

Designing attractive skins and templates for your MediaWiki site

MediaWiki Skins Design

Starting
Richard Carter

Designing attractive skins and templates for your MediaWiki site
$15.60
$39.99
RRP $23.99
RRP $39.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

+ Collection
Free Sample

Book Details

ISBN 139781847195203
Paperback248 pages

About This Book

  • 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

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.

Table of Contents

Chapter 1: Introduction
Examples of MediaWiki Skins
Customized MediaWiki Skins
Why Skin Your (Media) Wiki?
Our Case Study: JazzMeet
The Process of Skinning MediaWiki
Summary
Chapter 2: Formatting the Body
Initializing Your Skin
Using Your Skin
Styling Article Content
Making Our Case Study 'JazzMeet'
Styling the Edit Interface
Preview Page
Logging In and Registering
JazzMeets So Far
Summary
Chapter 3: Formatting Interface Elements
The Interface Area: .portlet
Changing the Logo
Styling the Navigation: #p-navigation
The Userbar: #p-personal
View Options: #p-cactions
The Toolbox: #p-tb
The Search Box: #p-search
The Footer: #footer
Summary
Chapter 4: Changing the Layout
Keep Your Head On: MediaWiki's <head> Tag
Changing the Content Area: #bodyContent
Changing the Interface
Creating Your Own Template
Summary
Chapter 5: Useful MediaWiki Functions
PHP Functions and MediaWiki Functions
Functions for <head>
Functions For <body>
Advanced PHP Functions
Summary
Chapter 6: Adding Decorative Elements
Decorative Elements
Focus-Drawing Techniques
Depth and the Third Dimension
Focus-Lessening Techniques
Summary
Chapter 7: Dynamic CSS and JavaScript
Inline Edit Interface
Installing Lightbox 2
LightboxThumbs
Tables: Making Data easier to read
Summary
Chapter 8: Social Networking and MediaWiki
Integrating Twitter with MediaWiki
YouTube in MediaWiki
Social Bookmarking
Social Bookmarking Aggregators
Summary
Chapter 9: Deploying Your MediaWiki Skin
Deploying on your Own Wiki
Packaging Your MediaWiki Skin
Licensing Options
Summary
Chapter 10: MediaWiki Print Styles
Viewing the Printable Version of Your Page
What's Already Done for Us: commonPrint.css
What Remains to be Styled
Summary

What You Will Learn

  • 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.

Authors

Table of Contents

Chapter 1: Introduction
Examples of MediaWiki Skins
Customized MediaWiki Skins
Why Skin Your (Media) Wiki?
Our Case Study: JazzMeet
The Process of Skinning MediaWiki
Summary
Chapter 2: Formatting the Body
Initializing Your Skin
Using Your Skin
Styling Article Content
Making Our Case Study 'JazzMeet'
Styling the Edit Interface
Preview Page
Logging In and Registering
JazzMeets So Far
Summary
Chapter 3: Formatting Interface Elements
The Interface Area: .portlet
Changing the Logo
Styling the Navigation: #p-navigation
The Userbar: #p-personal
View Options: #p-cactions
The Toolbox: #p-tb
The Search Box: #p-search
The Footer: #footer
Summary
Chapter 4: Changing the Layout
Keep Your Head On: MediaWiki's <head> Tag
Changing the Content Area: #bodyContent
Changing the Interface
Creating Your Own Template
Summary
Chapter 5: Useful MediaWiki Functions
PHP Functions and MediaWiki Functions
Functions for <head>
Functions For <body>
Advanced PHP Functions
Summary
Chapter 6: Adding Decorative Elements
Decorative Elements
Focus-Drawing Techniques
Depth and the Third Dimension
Focus-Lessening Techniques
Summary
Chapter 7: Dynamic CSS and JavaScript
Inline Edit Interface
Installing Lightbox 2
LightboxThumbs
Tables: Making Data easier to read
Summary
Chapter 8: Social Networking and MediaWiki
Integrating Twitter with MediaWiki
YouTube in MediaWiki
Social Bookmarking
Social Bookmarking Aggregators
Summary
Chapter 9: Deploying Your MediaWiki Skin
Deploying on your Own Wiki
Packaging Your MediaWiki Skin
Licensing Options
Summary
Chapter 10: MediaWiki Print Styles
Viewing the Printable Version of Your Page
What's Already Done for Us: commonPrint.css
What Remains to be Styled
Summary

Book Details

ISBN 139781847195203
Paperback248 pages
Read More