Public:MediaWiki CSS reference
From LiquidWiki
MediaWiki pages are arranged with CSS styles, mostly assigned to various DIV tags. This page is an attempt to produce a reference for these styles.
Contents |
Overview & Methodology
This page is a self-reference developed while trying to edit the default Monobook skin. Layout descriptions are based on the default MonoBook.css skin.
LiquidWiki isn't a public-access wiki, so both a non-user "only for reading" skin and an editor's skin are being perfected. I'll try to note how this design decision can affect which divs you may want to hide from casual browsers.
There are too many different styles in main.css to reasonably expect to address them all. Using Notepad ++'s regular expression function, I worked up some quick and sloppy stats: Searches for lines starting with #'s or .'s indicate a minimum of 100 IDs for one-off styles, and 42 reusable classes, ignoring stacked lines and other fun stuff.
Insights within are based upon what I've read from the pages linked below, and also from Firefox's ever useful Web Developer's Toolbar.
Large area or vague area styles
Some of the MediaWiki style blocks cover large portions of the screen and contain many other nested DIVs inside of them. On top of that, there will be more layered on top of that, so it can be difficult to ascertain which areas are controlled by what styles.
#globalWrapper
globalWrapper is a div that starts and ends directly inside of the body tag. Under Monobook it has full 100% width with no margin or padding. The interesting thing is that it has font-size set to 127%. According to the comments, this is in order to "scale back up to a sane default." I don't know what that means, as Google research is broken due to the amount of times that this appears in code snippets posted for issues unrelated.
#column-content
column-content is "used to define the overall space within the margins of which the content exists" [1]. This is 100% width
Main content styles
These styles are for the larger area containing the info that you actually came to the page for.
#content
content is the white background, thin bordered box which contains the main page content. MonoBook has this running straight over to the right edge of the window without any border on that side.
.firstHeading
firstHeading is name of the page. At the top of this page, it should say "MediaWiki CSS reference". firstHeading is also denoted as a CSS class, instead of a CSS ID, which is odd as it only appears once.
#bodyContent
bodyContent actually contains the main page content within the content box
#contentSub
contentSub is described by MediaWiki as defining style for the name of the wiki immedeately underneath the main heading, but above the body text, but I've only found this used for the "Redirected from" line. Despite it's uncommon usage, note that it's a very bad idea to disappear this text, as it makes correcting/changing redirects very difficult.
#contentSub2
Exists in main.css grouped with #contentSub and therefore contains duplicate attributes. Does not appear when redirection is noted. Appears to be an unused tag.
Portlet styles
Portlet is the parent class for the non-content sections typically located to the top or sides.
Sidebar, aka #p-nav or #p-navigation
#p-navigation is the default id for the block that contains the navigation links on the left of the page. It typically points to stuff like the Main Page, Recent Changes and others. The composition of this is controlled by editing MediaWiki:Sidebar. If the name of the section is changed by editing that page, then the corresponding CSS ID is also changed and your CSS will no longer apply unless you change the corresponding section in the style sheet. Example: if you edit MediaWiki:Sidebar to change the word 'navigation' to 'navigating', the section is now ID'd '#p-navigating'
To further complicate the issue, the Sidebar can even be split into multiple blocks based upon the structuring of MediaWiki:Sidebar. Each of these blocks will have separate CSS IDs.
The problems that I'm identifying right now may be limited to the version I've run: MediaWiki 1.6.3 and 1.8.2 (presumably the ones between too). Apparently the MediaWiki engine generates invalid CSS ID names when presented with section names containing whitespace. As MediaWiki.org has navbar sections containing spaces, yet their CSS utilizes underscores, apparently it's gimmicked somehow. They're running 1.9 alpha [2] as of 2006-10-24.
#p-cactions
p-cactions is the list of tabs above the main content, such as edit, watch, etc.
#p-personal
p-personal is the id for the list of links that include the login or logout page at the top of the page.
#p-logo
p-logo is the block in the upper left that typically contains the wiki logo and links to the main page. The image appearing here is normally defined by the $wgLogo line in your wiki's LocalSettings.php In LiquidWiki, the logo is not present, in favor of showing the background which is typically \wiki\skins\foo\headbg.jpg Note that even though wgLogo is a broken path, p-logo still creates a clickable link to the main page there.
#p-search
p-search contains the search buttons.
#p-tb
p-tb contains the toolbox links.
Other sections
#footer
#footer is the overall footer container block
#f-poweredbyico
#f-poweredbyico is the powered by mediawiki image that normally resides to the right of the page
.printfooter
The printfooter is an inline div containing the URL that a wiki page was retrieved from. Monobook appears to have this disabled by default, and it isn't even in use on Wikipedia. Although I haven't experimented, I believe it would only appear on the printable version of the page, were it enabled in the first place.
Printfooter is also denoted as a CSS class, instead of a CSS ID, which is odd as it only appears once. This point's probably ignored due to the general atrophy of this DIV.
.visualClear
visualClear simply contains CSS style for "clear: both;" which causes a clear break across the screen. In normal usage this is only used once: before the footer in order to keep it separate from the rest of the page. Another appears in the .printfooter
Unanswered questions
- If you want to set the content area of your page to a set 800 or 1024 width, where would be the place for handling width and alignment? Column-content? Global-Wrapper?
- f-list doesn't exist! ...does it?
External Links
Notes
This page's content is partly derived from http://meta.wikimedia.org/wiki/Customization:Explaining_skins#Major_style_blocks_by_name which bears a GNU Free Documentation License link, ergo this derived work is likely to be virally copylefted. As IANAL, I am not certain of the legal status of this work. I simply request that should you cite this page, please include a link and acknowledgement.
