Skins. See also[edit | edit source] Developer information: [edit | edit source] meta:Help:User style - Introduction of skinsmeta:Customization:Explaining skins#Major style blocks by name - a description of the id/class conventions used by most skins.
Skinning. This page contains instructions on how to create a skin for MediaWiki.
Note: The term FooBar will be used as a placeholder for the newly-created skin's name. (Notice the use of the uppercase FooBar and the lowercase foobar in different contexts.) Note: There is also a more general walkthrough here. File Locations[edit | edit source] Tutorial: Creating a custom skin for MediaWiki 1.18+ – Redwerks Blog. This tutorial details the creation of a custom skin for MediaWiki.
The skin is packaged up into a directory you can drop into a MediaWiki installation and require_once() to install just as any other extension. Keep in mind that this tutorial is aimed at MediaWiki 1.18, features are used here which will not work before 1.18. Creating the design The actual creation of the html, css, images, any mockups, or even the idea of what a skin should look like is out of the scope of this tutorial. You’ll have to either have the markup, styles, and resources ready, or build up the empty boilerplate and start building the skin from there. However before I go into that boilerplate and how-to I will go over some things you will have to think about while creating the design. Body area Subtitles When placing the title in your design remember that MediaWiki has some subtitles that usually go below the title.
Site notices and user notifications MediaWiki has three built-in types of notifications. Search Actions. Simple mobile skin auto change. Although there is presently an extension designed to automatically change to various mobile skins (iPhone, Blackberry, etc), it doesn't work with the current version of MediaWiki (as of 08-09-2010).
The following code snippet (added to LocalSettings.php) allows for detection of an iPhone, followed by automatic switching of the skin / theme to an iPhone-compatible one (in this case, WPtouch). Add this code to your LocalSettings.php file (replacing the current $wgDefaultSkin variable) after installing the iPhone-compatible skin. This will make the default skin "wptouch" if an iPhone, "vector" otherwise. Modify as needed. If file cache is enabled you may need to disable it to prevent visitors from seeing the wrong skin. MediaWiki Fratman Skin Richard Carter Consultancy. We’re a small, niche MediaWiki skin design studio based in the UK, and we’ve worked with clients across the world to design and develop the MediaWiki skin they desire.
MediaWiki Skins Design book by Richard Carter Our MediaWiki design skills have been put to the test for clients in South Korea, France, Germany, Italy, Switzerland and America to name a few countries, and we’ve worked with big names, too. Our senior MediaWiki skin designer, Richard Carter, has worked with UK government organisations including NHS Choices and Directgov, as well as the University of Halmstad in Sweden and University College Dublin. Download: BlueSpice - The free MediaWiki Enterprise Distribution. Main Page. Home - PaulGuWiki. Manual:Creating MediaWiki Skin - PaulGuWiki. AsianWiki. Skins - GoMediaWiki. Manual:Gallery of user styles. This page is a showcase of MediaWiki skins.
None of these skins are maintained by the MediaWiki core team; if you find an error or wish to leave feedback, contact their respective authors. Use the form below to create a new subpage to list details for your skin. Please add your skin to the appropriate gallery afterwards. Monobook derived skins[edit | edit source] Styles and positioning of page elements is stored in a file called main.css.
If you want to put in Google ads or some other JavaScript program, you can do this in Monobook.php. MediaWiki Skins - Dan and Rebecca. I love MediaWiki.
MediaWiki is the software that runs Wikipedia, as well as our personal wikis for work and personal use. Unfortunately, if you’ve seen Wikipedia, you know that the appearance is very dull, which is fine for consuming certain types of information, but not really suited for a personal site like this. That said, I’ve adapted a couple WordPress themes for MediaWiki use.
Disclosure: There are a couple instances of hard-coded text in the Pixeled theme that you’ll have to change for your own use/language. It’s the text relating to the search box found in the footer. Feel free to email me or comment on this post with any issues you run into, since I’m likely to run into them as well. Pixeled. How to Create a MediaWiki Skin Based on the MonoBook Skin. Edit Article Code Replacement Edited by VC, Lojjik Braughler, Krystle, Jack Herrick and 10 others The MediaWiki software is the open source software that wikiHow, Wikipedia, Wiktionary, and many other wiki sites are based upon.
The software comes packed with many excellent features, including a default set of skins. However, you might want to use the software and its power, yet have your own interface in your site. Ad Steps 1Create a new directory named monobookmodified in the skins directory which is in the root directory of your MediaWiki installation. 8 Ways to Create a MediaWiki Skin from Scratch. Edit Article Initialization CodeCategory List Fix CodeMain execute() Method CodeMain XHTML Structure CodeCommon Site Elements' CodeCommon Page Elements' CodeCommon Toolbars CodePortlets (main navigation blocks) Edited by VC, Blizzerand, Krystle, Eric and 7 others.
Athena. This document is a work in progress.
Comments are appreciated but this is not a final draft. Athena as shown at Wikimania 2012 Athena as shown at Wikimania 2012, showing the Echo notifications system Athena as shown at Wikimania 2012, showing GlobalProfile Athena in mobile mode Athena showing page expanders in mobile mode The mobile login screen The mobile version, showing an expanded user menu. 30+ Mediawiki Templates.