MediaWiki Skins Design Table of Contents

Back to BOOK PAGE

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