Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying MediaWiki Skins Design
  • Table Of Contents Toc
MediaWiki Skins Design

MediaWiki Skins Design

3.7 (3)
Buy this Book
close
close
MediaWiki Skins Design

MediaWiki Skins Design

3.7 (3)
Buy this Book

Overview of this book

Table of Contents (16 chapters)
close
close
close
MediaWiki Skins Design
Icon
MediaWiki Skins Design
Credits
Icon
Credits
About the Author
Icon
About the Author
About the Reviewer
Icon
About the Reviewer
Preface
Icon
Preface
Lock Free Chapter
1
Introduction
Icon
Introduction
Icon
Examples of MediaWiki Skins
Icon
Customized MediaWiki Skins
Icon
Why Skin Your (Media) Wiki?
Icon
Our Case Study: JazzMeet
Icon
The Process of Skinning MediaWiki
Icon
Summary
2
Formatting the Body
chevron up
Icon
Formatting the Body
Icon
Initializing Your Skin
Icon
Using Your Skin
Icon
Styling Article Content
Icon
Making Our Case Study 'JazzMeet'
Icon
Styling the Edit Interface
Icon
Preview Page
Icon
Logging In and Registering
Icon
JazzMeets So Far
Icon
Summary
3
Formatting Interface Elements
Icon
Formatting Interface Elements
Icon
The Interface Area: .portlet
Icon
Changing the Logo
Icon
Styling the Navigation: #p-navigation
Icon
The Userbar: #p-personal
Icon
View Options: #p-cactions
Icon
The Toolbox: #p-tb
Icon
The Search Box: #p-search
Icon
The Footer: #footer
Icon
Summary
4
Changing the Layout
Icon
Changing the Layout
Icon
Keep Your Head On: MediaWiki's Tag
Icon
Changing the Content Area: #bodyContent
Icon
Changing the Interface
Icon
Creating Your Own Template
Icon
Summary
5
Useful MediaWiki Functions
Icon
Useful MediaWiki Functions
Icon
PHP Functions and MediaWiki Functions
Icon
Functions for
Icon
Functions For
Icon
Advanced PHP Functions
Icon
Summary
6
Adding Decorative Elements
Icon
Adding Decorative Elements
Icon
Decorative Elements
Icon
Focus-Drawing Techniques
Icon
Depth and the Third Dimension
Icon
Focus-Lessening Techniques
Icon
Summary
7
Dynamic CSS and JavaScript
Icon
Dynamic CSS and JavaScript
Icon
Inline Edit Interface
Icon
Installing Lightbox 2
Icon
LightboxThumbs
Icon
Tables: Making Data easier to read
Icon
Summary
8
Social Networking and MediaWiki
Icon
Social Networking and MediaWiki
Icon
Integrating Twitter with MediaWiki
Icon
YouTube in MediaWiki
Icon
Social Bookmarking
Icon
Social Bookmarking Aggregators
Icon
Summary
9
Deploying Your MediaWiki Skin
Icon
Deploying Your MediaWiki Skin
Icon
Deploying on your Own Wiki
Icon
Packaging Your MediaWiki Skin
Icon
Licensing Options
Icon
Summary
10
MediaWiki Print Styles
Icon
MediaWiki Print Styles
Icon
Viewing the Printable Version of Your Page
Icon
What's Already Done for Us: commonPrint.css
Icon
What Remains to be Styled
Icon
Summary
1
Troubleshooting Browser Issues with MediaWiki
Icon
Troubleshooting Browser Issues with MediaWiki
Icon
Browser Modes
Icon
Conditional Comments
Icon
Internet Explorer 5 Bugs
Icon
Internet Explorer 6 Bugs
Icon
Inline List Items Partially Displayed
Icon
Bugs in Other Browsers
Icon
Firefox Bugs
Icon
Testing your Design in Multiple Browsers
Icon
Summary

Chapter 2. Formatting the Body

In this chapter, we will see how to change the appearance of your wiki. This includes the various content areas of MediaWiki such as the article pages, the edit interface, and the preview interface.

In this chapter, we will cover the following:

  • Adding a new skin in MediaWiki, with guidance on setting your new skin as:

    • the wiki's default skin

    • your default skin

  • Styling the article content

  • Styling the edit interface

  • Styling the preview interface

  • Styling the "show changes" interface

  • Styling the "log in" and "register" interfaces

Initializing Your Skin

In order to view changes that have made to your skin's design, you need to make a few changes to MediaWiki. We need to inform MediaWiki that we want to view the wiki's content using a different skin from the default, that is, MonoBook.

CSS and Image Files

You will need to create a new directory in the skins directory, such as skins/yourskinname/, within your MediaWiki installation directory, where yourskinname is the name of...

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
MediaWiki Skins Design
End of Section 2
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon