User:WikiMaster/MediaWiki Skins; Column Layouts; Formatting; CSS Tricks
Skins & Themes
Info Some sites using MediaWiki have a special stylish skin.
- Category:Skin extensions
- Category:Skins Gallery
- Manual:Skin configuration
- Manual:Gallery of user styles
- Sites using MediaWiki/gallery
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
- Tutorial: Creating a custom skin for MediaWiki 1.18+
- How to Theme any CMS Using Firebug (and MediaWiki as an Example)
- 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
variables.lessfiles 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
.lessfiles mentioned above. Upload the files to your MediaWiki's installation directory (where your
LocalSettings.phpfile lives), make sure each file is readable by the server (chmod u=rw,g=r,o=r or chmod 644). Rename each file by including the name of the Bootswatch where the file came from. Example: If you downloaded the
variables.lessfiles from the Amelia Bootswatch, rename them
amelia-variables.less. Then make the appropriate updates to your
LocalSettings.phpfile, 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 oVirt.org.
Logo & Favicon Settings
User Interface Extensions
- This extension replaces the boring "" 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.
Menu, Page Layout & Wiki Portal Examples
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
- Portal:Coal Issues (SourceWatch)
Wiki Page Template & Layout Examples
- Categoria:Template finestre
- Project:WikiProject Extensions
- Project:WikiProject Bug Squad
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.
- 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.
- SEE ALSO
- Note Note: If code added to mediawiki:Common.css doesn't take effect immediately, you may have to do a hard refresh.
- Help:Cascading style sheets (meta.wikimedia.org)
- Help:Cascading style sheets (Wikipedia)
- Wikipedia:Catalogue of CSS classes
- 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.
- 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 .)
- More instructions for use: http://www.organicdesign.co.nz/CSS_example
- If you are creating a wiki page that ends up requiring a lot of
stylemodifiers, 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?