Theme style reference

When creating a theme, you get the following CSS classes available to you so the site adheres to the DRY principle:

.biggest An font size for long sighted.
.bigger Even bigger font size (1.2em)
.big Slightly (1.1 em) larger font
.normal The default browser font size
.small Slightly smaller than the default font size
.smaller Even smaller font size
.smallest A wee little font
.bold Bolded font weight
.italic Italicised font
.dimmed Sets the opacity of the element to 50% (example)
.left Floats the block level element to the left.
.right Floats the block level element to the right.
.rounded Gives the element rounded edges, in Chrome/Safari and Firefox.example
.rounded5 Gives the element 5px rounded edges, in Chrome/Safari and Firefox.example
.rounded10 Gives the element 10px rounded edges, in Chrome/Safari and Firefox.example
.blueborder Gives the element a blue border
.lightborder Gives the element a light grey border like the borders found on the edit and history buttons.
.clear Clears both left and right floating elements (clear:both)

There are also a number of IDs declared globally, so when creating a theme you may need to check the roadkill.css file to ensure there are no name clashes. If in doubt, it is best to use "#yourtheme-idname".

Roadkill uses Twitter Bootstrap to define the following styles globally, rather than on a per-theme basis:

  • All tables, for example the table on the page history page
  • The edit, history and page information buttons
  • Modal dialogs
  • The edit page textboxes and buttons
  • The login page textboxes and buttons

Print style sheet

Your theme should include a print style sheet. You don't normally need to create this, copying the Theme.Print.css file from the Mediawiki theme will be enough as the style sheet simply turns off all navigation and headers.

Last edited Jan 7, 2013 at 6:51 PM by mrshrinkray, version 4