User:WikiMaster/MediaWiki Skins; Column Layouts; Formatting; CSS Tricks

From PortlandWiki
Jump to navigation Jump to search

Skins & Themes

Info Some sites using MediaWiki have a special stylish skin.

Skin & Theme Extensions

The Theme extension allows loading of themes (preset CSS to change the appearance of a skin).
The Bootstrap extension provides the Twitter Bootstrap (version 3) web front-end framework to skins and extensions.

Skin & Theme Tutorials, Tools & Tips

MediaWiki Skins

Erudite is a clean and easy to read skin.
Twitter Bootstrap Skins
The Chameleon skin uses Twitter Bootstrap 3. It currently features a horizontal navigation menu with dropdowns at the top and a horizontal menu with dropups for the language links at the bottom. This skin works in combination with the Bootstrap extension, as well as the bootswatch.less and variables.less files available for download from each one of the available Bootswatch themes. Just click on one of the Bootswatches, look for the Download menu in the top bar, and download the two .less files mentioned above. Upload the files to your MediaWiki's installation directory (where your LocalSettings.php file lives), make sure each file is readable by the server (chmod u=rw,g=r,o=r or chmod 644).[1] Rename each file by including the name of the Bootswatch where the file came from. Example: If you downloaded the bootswatch.less and variables.less files from the Amelia Bootswatch, rename them amelia-bootswatch.less and amelia-variables.less. Then make the appropriate updates to your LocalSettings.php file, found on the Chameleon MediaWiki skin page.
The Foreground skin focuses on putting your content in the foreground. It supports responsive layouts and has classes predefined for Semantic MediaWiki. Built on the Zurb Foundation CSS framework.
Open-source Bootstrap-based skin, originally developed for

Logo & Favicon Settings


User Interface Extensions

This extension replaces the boring "[edit]" links with a pretty icon (of your choosing).

Styles & Formatting

Wikipedia:Useful styles documents various CSS elements that are useful to know when working in the article and template namespaces.
"Can we add our own skin in the wiki?" The answer is very straightforward. Yes, we can make our own skin from scratch and add it to the directory for the skins. In this tutorial, we will discuss in detail how to add new skins, and how to build skins from scratch.
Also see OrganicDesign's manifesto.
By Portlandian Aaron Parecki

Menu, Page Layout & Wiki Portal Examples

Structure of a Wiki Portal

Portals - How to use the Wikipedia portal technology.

The objective of this document is to try to simplify the implementation of a Wikipedia-style portal in a normal Mediawiki system.
Wiki Portal Examples
GLAM is an acronym for Galleries, Libraries, Archives and Museums. It also incorporates other institutions such as theatres, zoos, botanical gardens, public broadcasters etc.
Portal Extensions
The GroupPortal extension allows for different groups to be redirected to different Main Pages. Configure your wiki's MediaWiki:Groupportal page to redirect visitors to a particular landing page.
My Portal is a MediaWiki hack, it is NOT a MediaWiki extension, that allows users to have a custom portal page like MyGoogle, MyYahoo, etc.
FundraiserPortal is a simple extension that adds a portal to the top of the sidebar in SkinTemplate based skins like Monobook, Modern and Vector.
Other Wiki Portals

Wiki Page Template & Layout Examples


It's easy to copy other MediaWiki pages, including templates incorporated into the page, by using instructions found here:

Dave's Note -- Actually copying templates is not very easy, and often quite problematic.
"Protected" templates, transcluded templates, whether or not the person trying to export the template has sysop privileges and other issues can make exporting templates difficult and error prone.[2][3]
The MediaWiki instructions recommends UNCHECKING the "include only the current revision" box before exporting the template. Doing so, however, produces a much larger file. An attempt to import the larger file can result in a timeout error. To get a smaller file, make sure the "include only the current revision" remains CHECKED. Images and other files should also import with the other page elements. They will probably have to be uploaded separately to the new wiki.


Note Note: If code added to mediawiki:Common.css doesn't take effect immediately, you may have to do a hard refresh.
There are a lot of classes and IDs used on the English Wikipedia. The use of most of them is not clearly explained or described anywhere but on the place they are used. However, since Special:WhatLinksHere does not work for CSS, it can be hard to find these explanations; the definitions themselves can be located in many different places. This resource is an attempt to catalogue and describe all the classes and IDs used on English Wikipedia.

CSS Extensions

This extension allows CSS stylesheets to be included in specific articles. The CSS can be another article, a file or can be rules defined directly within the parser-function.
(Requires bug fixes found on the extension's talk page and elsewhere.)
More instructions for use:
If you are creating a wiki page that ends up requiring a lot of style modifiers, it's probably simpler to put them into a CSS style sheet. That's what this extension does: it uses the tag <css> to include a CSS in the text of the wiki page; that CSS is then put into the header of the resulting HTML, and so formats your page.
Common.css ~ Where is it?