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
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
chevron up
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 4. Changing the Layout

In the previous chapters we have seen how to change the wiki's appearance, both within the "article" content, and the areas surrounding it. Currently, the layout is not very attractive, as every element has a full-screen width. This means that the elements you wish to see towards the top of the page, such as your userbar, are displayed towards the bottom of the page. Changing the layout of your MediaWiki skin can overcome this, and will allow you to group the related elements.

In this chapter, we will cover the following:

  • Altering your wiki pages'<head> element, including changing the default page title, using favicons, and altering stylesheet paths

  • Identifying and changing the content block's elements

  • Identifying and changing the surrounding interface's elements

Most wikis retain the two-column layout of MonoBook, and our JazzMeet case study is no different. The two columns will allow us to show a smaller column for our "sponsors" alongside the page's main...

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 4
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