MediaWiki Skins Design
()
About this ebook
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.
Read more from Richard Carter
The City is my Monastery: A contemporary rule of life Rating: 0 out of 5 stars0 ratingsThe City is My Monastery: A Contemporary Rule of Life Rating: 0 out of 5 stars0 ratingsMagento 2 Theme Design - Second Edition Rating: 5 out of 5 stars5/5A Community Shakespeare Company Edition of Twelfth Night: Original Verse Adaptation by Richard Carter Rating: 0 out of 5 stars0 ratingsLearning Magento Theme Development Rating: 0 out of 5 stars0 ratingsJoomla! 1.5 Templates Cookbook Rating: 0 out of 5 stars0 ratings
Related to MediaWiki Skins Design
Related ebooks
AutoCAD Electrical 2024: A Tutorial Approach, 5th Edition Rating: 0 out of 5 stars0 ratingsDesign For X A Complete Guide - 2021 Edition Rating: 0 out of 5 stars0 ratingsMinimalist Mobile Robotics Rating: 0 out of 5 stars0 ratingsAssembly Process A Complete Guide - 2020 Edition Rating: 0 out of 5 stars0 ratingsAutoCAD Electrical 2020: A Tutorial Approach Rating: 0 out of 5 stars0 ratingsDesign For Manufacturability A Complete Guide - 2021 Edition Rating: 0 out of 5 stars0 ratingsBeagleBone By Example Rating: 0 out of 5 stars0 ratingsAdditive Manufacturing A Complete Guide - 2020 Edition Rating: 0 out of 5 stars0 ratings3D NAND Complete Self-Assessment Guide Rating: 0 out of 5 stars0 ratingsHumane Interfaces: Questions of Method and Practice in Cognitive Technology Rating: 0 out of 5 stars0 ratingsDesign For Assembly A Complete Guide - 2020 Edition Rating: 0 out of 5 stars0 ratingsDesign for assembly A Clear and Concise Reference Rating: 0 out of 5 stars0 ratingsIT Service Root Cause Analysis Tools The Ultimate Step-By-Step Guide Rating: 0 out of 5 stars0 ratingsComputer-Aided Manufacturing CAM Second Edition Rating: 0 out of 5 stars0 ratingsCAD standards The Ultimate Step-By-Step Guide Rating: 0 out of 5 stars0 ratingsIntel Galileo Essentials Rating: 0 out of 5 stars0 ratingsBeginning Backbone.js Rating: 3 out of 5 stars3/5Inside OrCAD Rating: 4 out of 5 stars4/5Mastering AutoCAD Civil 3D 2015: Autodesk Official Press Rating: 0 out of 5 stars0 ratingsOpen-Source Contribution A Complete Guide Rating: 0 out of 5 stars0 ratingsDeveloping Bots with Microsoft Bots Framework: Create Intelligent Bots using MS Bot Framework and Azure Cognitive Services Rating: 0 out of 5 stars0 ratingsPro Cryptography and Cryptanalysis with C++20: Creating and Programming Advanced Algorithms Rating: 0 out of 5 stars0 ratingsParts Selection and Management Rating: 0 out of 5 stars0 ratingsWindows 8.1 Bible Rating: 0 out of 5 stars0 ratingsAutodesk AutoCAD A Complete Guide - 2021 Edition Rating: 0 out of 5 stars0 ratingsCommercial and Industrial Internet of Things Applications with the Raspberry Pi: Prototyping IoT Solutions Rating: 0 out of 5 stars0 ratingsManufacturing bill of materials Complete Self-Assessment Guide Rating: 0 out of 5 stars0 ratings3D Design A Complete Guide - 2020 Edition Rating: 0 out of 5 stars0 ratingsDesign for additive manufacturing A Clear and Concise Reference Rating: 0 out of 5 stars0 ratingsData Science with Raspberry Pi: Real-Time Applications Using a Localized Cloud Rating: 0 out of 5 stars0 ratings
Information Technology For You
How To Use Chatgpt: Using Chatgpt To Make Money Online Has Never Been This Simple Rating: 0 out of 5 stars0 ratingsComputer Science: A Concise Introduction Rating: 4 out of 5 stars4/5Summary of Super-Intelligence From Nick Bostrom Rating: 5 out of 5 stars5/5Data Analytics for Beginners: Introduction to Data Analytics Rating: 4 out of 5 stars4/5Creating Online Courses with ChatGPT | A Step-by-Step Guide with Prompt Templates Rating: 4 out of 5 stars4/5Supercommunicator: Explaining the Complicated So Anyone Can Understand Rating: 3 out of 5 stars3/5Practical Ethical Hacking from Scratch Rating: 5 out of 5 stars5/5ChatGPT: The Future of Intelligent Conversation Rating: 4 out of 5 stars4/5Linux Command Line and Shell Scripting Bible Rating: 3 out of 5 stars3/5How to Write Effective Emails at Work Rating: 4 out of 5 stars4/5Computer Organization and Design: The Hardware / Software Interface Rating: 4 out of 5 stars4/5Data Governance For Dummies Rating: 0 out of 5 stars0 ratingsAWS Certified Cloud Practitioner: Study Guide with Practice Questions and Labs Rating: 5 out of 5 stars5/5Hacking Essentials - The Beginner's Guide To Ethical Hacking And Penetration Testing Rating: 3 out of 5 stars3/5Cybersecurity for Beginners : Learn the Fundamentals of Cybersecurity in an Easy, Step-by-Step Guide: 1 Rating: 0 out of 5 stars0 ratingsCompTIA A+ CertMike: Prepare. Practice. Pass the Test! Get Certified!: Core 1 Exam 220-1101 Rating: 0 out of 5 stars0 ratingsHandbook of Digital Forensics and Investigation Rating: 4 out of 5 stars4/5Health Informatics: Practical Guide Rating: 0 out of 5 stars0 ratingsThe Basics of Hacking and Penetration Testing: Ethical Hacking and Penetration Testing Made Easy Rating: 4 out of 5 stars4/520 Windows Tools Every SysAdmin Should Know Rating: 5 out of 5 stars5/5Micro Niches Rating: 0 out of 5 stars0 ratingsCompTIA Network+ CertMike: Prepare. Practice. Pass the Test! Get Certified!: Exam N10-008 Rating: 0 out of 5 stars0 ratingsWindows Registry Forensics: Advanced Digital Forensic Analysis of the Windows Registry Rating: 4 out of 5 stars4/5Cyber Security Consultants Playbook Rating: 0 out of 5 stars0 ratingsHow to Find a Wolf in Siberia (or, How to Troubleshoot Almost Anything) Rating: 0 out of 5 stars0 ratingsInkscape Beginner’s Guide Rating: 5 out of 5 stars5/5An Ultimate Guide to Kali Linux for Beginners Rating: 3 out of 5 stars3/5
Reviews for MediaWiki Skins Design
0 ratings0 reviews
Book preview
MediaWiki Skins Design - Richard Carter
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
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 (<nilpreet2000@yahoo.co.in>)
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: <richard.carter@peacockcarter.co.uk>
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: <ipbwiki@gmail.com>
Alternative Email: <peterdedecker@gmail.com>
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
/>