or just dive into all the [http://meta.wikimedia.org/wiki/Gallery_of_user_styles examples of user styles]
== How to chage change the Logo ==
You can change the Logo of the wiki by altering the $wgLogo variable in LocalSettings.php to the name of the image you want to use as a logo.
Please note that this logo should be placed in the /skins/common/images/ folder.
</pre>
== How to change the favicon ==
You can change the icon that is displayed in the address bar of your browser by setting a value for $wgFavicon in the LocalSettings.php file
<pre>
</pre>
== How to make your own skin ==
You can create a skin all by yourself by following the steps provided below:
# Go ==Styling==A user can completely affect the styling of the wiki they are using by applying user-defined styling to your mediawiki directory;the site. [[meta:Help:User_style]] ==This wiki==# Copy This wiki uses the monobook directory [[Chameleon]] skin, which is based on [[Bootstrap]] and name it the Bootstrap extension. [https://www.quora.com/Is-Bootstrap-a-complement-or-an-alternative-to-HTML5-Boilerplate-or-viceversa That is not synonymous with the name of HTML5]. Bootstrap is a specialized, modular, HTML/CSS/JS toolkit. The HTML5 Boilerplate (H5BP) is a starting project template that is designed to be adapted to your skinneeds. In short, exempli gratia: mywikiskin;they can (and probably should) be used together. ==HTML5==# Copy the MonoBookIf you want to use HTML5 in your wiki, then you need at least version 1.16.php file and name it with the name 0 of your skinMediaWiki, exempli gratiawhich is the first version that includes the <code>$wgHtml5</code> setting. See http: MyWikiSkin//www.php;# Edit MyWikiSkininitializr.php com/ in general and change the class name also Richard Carter's website <ref>http://www.earlgreyandbattenburg.co.uk/extras/mediawiki-html5-skin/</ref> for information specific to SkinMyWikiSkin, exempli gratiaMediaWiki == OOUI - The Object Oriented User Interface == # [https: class SkinMyWikiSkin extends SkinTemplate;//doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop Simulator Demos]# In MyWikiSkin[https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.php, change make TextInputWidget Docs]# [[mw:OOUI/Using OOUI in MediaWiki|Using OOUI in MediaWiki]]: Enter code like the other class to have your skin name together with following into the word Template, exempli gratiaJavaScript console (Chrome DevTools)<syntaxhighlight lang="javascript" line="1">mw.loader.using( 'oojs-ui-core' ).done( function () { $( function () { var button = new OO.ui.ButtonWidget( { label: class MyWikiSkinTemplate extends QuickTemplate'Click me!' } );# In MyWikiSkin button.phpon( 'click', make $this->skinname to have a string value of your skin name, exempli gratia: function () { alert( 'mywikiskinYou clicked the button!'); } ); $( '# In MyWikiSkinmw-content-text' ).append( button.php, make $this-element ); } );} );</syntaxhighlight>stylename ==Icons and Graphics==For aspiring artists who want to have a string value of your skin namecreate icons, exempli gratiasee the [http: 'mywikiskin';# In MyWikiSkin//wiki.kde.org/tiki-index.php?page=Icon+Guide Icon Guide] on KDE.org If you know the ropes of creating good graphics, see the Nuvola2 project, make $this->template which appears to be an effort in the mediawiki community to have bring a string value whole set of your skin name properly capitalised with scalable graphics to the word Template, exempli gratia: 'MyWikiSkinTemplate';project.# In your mywikiskin directory edit the image and CSS files;# Edit and customise MyWikiSkinhttp://commons.wikimedia.org/wiki/Nuvola_icons_for_KDE_3.php as you please;x# In LocalSettingshttp://commons.wikimedia.php set $wgDefaultSkin = 'mywikiskin'org/wiki/Commons:Project_Nuvola_2.0%2B
== Nice Examples ==# http://en.opensuse.org/Welcome_to_openSUSE.org# http://www.mono-project.com/Main_Page# http://beagle-project.org/Main_Page# http://en.opensuse.org/Welcome_to_openSUSE.org# https://If you just want to have a bunch of good graphics available for use in your wiki, then there are image administration tools that you can use to batch import collections of graphics.mozilla Mediawiki can now handle Scalable Vector Graphics (SVG) so with a little configuration, you can import a group of SVGs and use that as a basis for your theme.org/Main_Page
In this wiki, Iimported the Oxygen graphics (see below). Importing is handled by a 'm fairly certain without checking maintenance' script. See details about how image assets are managed at [[mw:Manual:Image_Administration]] As for complete icon sets, there are a few well-known sets in the Free Software community. ;Crystal :The KDE crystal set is nice, and you can find out more at [http://everaldo.com/crystal/ Everaldo's website].;Oxygen :The standard icon theme for KDE4 You can also get scalable vector graphics from the oxygen set. If you <source lang="bash">sudo apt-get install kde-icons-oxygen </source>, you should find them on your system in /usr/lib/kde4/share/icons/oxygen/ Note that you need an application (like Konqueror, Dolphin, Gwenview or Inkscape - but not Gqview) that can display SVG to view the svgz files. http://www.oxygen-icons.org/;Tango :http://tango.freedesktop.org/Tango_Desktop_Project Once you have all these graphics at your disposal, you'll probably want to use some of them as interface elements, rather than just as decoration / illustration of your articles. In that case, you'll want to use something like the [[Icons|Icon extension]]. ==How to use Templates for information design, consistency, and utility==The [[Templates|template]] system allows you to create re-usable interface elements such as 'sidebars', 'callouts' or 'info boxes' and almost limitless utility. The [[Wikipedia:Template:Ambox|Ambox template]] is an example of a template that you'll probably want to use in your local wiki system. ==How to change the navigation==The navigation system is setup through a special type called an 'interface message'. (The interface message system is also used for many other aspects of the Mediawiki system.) This means that you don't actually have to change 'code' to affect the menu. You can simply edit a special page in the mediawiki system. Edits to this page get stored in the wayback database like every other page edit which provides built-in versioning etc. However, it can also mean that pushing changes from a development machine to a server can be more challenging than pushing 'code' changes. In any case, to change the nav, you will want to edit the '''[[MediaWiki:Sidebar]]''' page. The right to edit this page is normally restricted to administrators, so if you want to delegate the responsibility for this, you will want to look at the user permissions system. There are rules and conventions which apply here, and you can [[mw:Manual:Navigation_bar | find more help in the documentation]]. In case you are going to change the location of blocks like the '''search''' box or '''toolbox''' (which normally show up in the sidebar) by making a custom theme, you'll want to coordinate those changes with the sidebar. It is possible, using JavaScript, to customize the '''search''' or '''toolbox'''. (We did this for the [https://www.mediawiki.org/wiki/Extension:Html2Wiki Html2Wiki extension].) See the article here on [[MediaWiki/Toolbox]]. ==Interface Messages==At [[Special:AllMessages]], you can see the interface messages (sometimes referred to as System Messages) for the MediaWiki system. See [[mw:Help:System message]] In MediaWiki 1.18 and above, you can find a message key by browsing a wiki in the special pseudo-language code <code>'''qqx'''</code>, which can be done by appending <code>?uselang=qqx</code> to the URL, or <code>&uselang=qqx</code> if the URL already contains a <code>?</code> character ([{{fullurl:{{FULLPAGENAME}}|uselang=qqx}} example]). All the messages will then be replaced by their message keys, so you can identify which message is responsible. Messages that are always in the content language will not be shown using qqx. Aside from changing the Navigation bar, this is how we customized the ISBN message that developeris used in the 'Book Sources' special page e.mozillag. [[Special:BookSources/1594200068|Special:BookSources/1594200068]]. All these messages are in the '''MediaWiki''' namespace. So, if the message key is 'Requestaccount-acc-text', then you can change the content of the message by editing 'MediaWiki:Requestaccount-acc-text'. Another option for finding the right message string, besides the 'uselang' hack, is to use the Translate Wiki (which is part of the system that provides translations for multiple software projects including MediaWiki). Visit https://translatewiki.net/wiki/Special:SearchTranslations and simply enter the "string you want to change". For example, if you're using the Special:UploadWizard and want to change the wording on the button that says "Select media files to share", you'd enter that phrase at Translate Wiki. Click 'search' and then in the results, click the link that says "Require all search words" (or add <tt>&match=all</tt> to the querystring). Presto, you've found that it's the <tt>MediaWiki:Mwe-upwiz-add-file-0-free</tt> string. ==How to make your own skin==[[mw:User:Dantman|Daniel Friesen]] offers a [https://blog.redwerks.org used /2012/02/28/mediawiki-subskin-tutorial/ good tutorial] on how to subclass the [[mw:Skin:Vector|Vector skin]] to run create a new derivative skin. And his [https://blog.redwerks.org/2012/02/08/mediawiki-skinning-tutorial/ MediaWiki skinning tutorial] is the basis for the [[mw:Manual:Skinning Part 1|official manual on skinning]]. ==Making your Skin Available==To make your skin available sitewide, and the default skin, set it in LocalSettings.php e.g. set $wgDefaultSkin = 'happy'. To let your users decide which skin they can use, you can enable user preferences. ==Offering/Using multiple skins==If you have multiple skins available, you can preview and switch between them by [[Special:Preferences|visiting your user preferences]]. Since a given skin can be specified in the querystring, you can even bookmark a certain 'look' for easy comparison with a nice new theme. Now they e.g. http://freephile.com/wiki/index.php?title=Main_Page&useskin=monobook ==Nice Examples==I've previously created a custom skin based on [http://paulgu.com/wiki/Mediawiki_Skins the excellent work of Paul Gu] Developers should check out [[Wiki developers]] for more sites of people like Paul who develop wikis. There are running countless examples of MediaWiki installations across the Internet. We've started indexing all the wikis we can find, and you can see a list of the top wikis at {{WikiReportUrl}}. Some of the ones that have actually customized the "look and feel" include *the [http://techbase.kde.org/ KDE Techbase] is Mediawiki. The http://techbase.kde.org/Development/Software_Engineering_Framework article explains all their tech platform tools.*The [http://tango.freedesktop.org/Tango_Desktop_Project Tango] project (see "icons" above) runs their website on a commercial opensource productcustomized MediaWiki.*The [http://wiki.blender.org/index.php/Main_Page Blender] project has a nice custom skin*The [http://wiki.eclipse.org/Main_Page Eclipse project] uses MediaWiki for their wiki site*[https://community.kde.org/Amarok Amarok] rocks with MediaWiki*[http://wiki.creativecommons.org/Main_Page Creative Commons]*[http://fedoraproject.org/wiki/Special:Version Fedora Project wiki]*[http://ubuntuguide.org/wiki/Main_Page Ubuntu Guide]*http://en.opensuse.org/Welcome_to_openSUSE.org*http://beagle-project.org/Main_Page*The [https://wiki.mozilla.org/Main_Page Mozilla Project wiki] runs MediaWiki ==Resources=={{Highlight ||text = For Extension Developers, there is now an object-oriented [[JavaScript]] library included in MediaWiki core [[mw:OOjs UI]]}} The skinning manual http://www.mediawiki.org/wiki/Manual:Skinning is probably the most comprehensive and best introduction to how the skin system works aside from digging into [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/ the code in the 'skins' directory]. http://www.softwarekombinat.de/wiki/Customize_mediawiki has one of the best 'howto's that I found.
== Resources ==
The [http://meta.wikimedia.org/wiki/Layout_design_document Layout Design Document] might cover some relevant info, but a quick glance makes it seem that it's circa 2004.
The skinning manual http{{References}} [[Category://www.mediawiki.org/wiki/Manual:Skinning is probably the most comprehensive and best introduction to how the skin system works aside from digging into Design]][[httpCategory://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/ the code in the 'skins' directoryWiki]].