Gallery of user styles

Description:
Rounds some corners; makes buttons look nice; makes the OBOD a bit better.
Also includes my monobook.js scripts (including some admin-only stuff).

Description:
a black and purple color theme, tested on Mediawiki 1.12.0, there is a Screenshot at http://blog.irain.org/matrix/mediawiki-skin-stellarbook

Description:
Free monobook based for corporate use

Description:
This was created from a hodgepodge of other CSS'es. To use this skin, you need the Segoe UI font set, which you can get the 4 basic core fonts:

1. [1]
2. [2]
3. [3]
4. [4]
   

Description:
Created this skin for our Sourceforge project. If there is any interest I will upload the source CSS file, when I have some time I will upload an image here.

Just some minor changes to the classic Monobook, Mac OS X like tabs, different fonts. But I think it makes a difference. Also some IE7 fixes.

Used by Bastet Project Website.

Description:
Inspired partly by Wikiwyg, this stylesheet/javascript does several things:

• Rounds corners (Gecko only)
• makes the article, footer, actions, and userbar "float", so the sidebar and background are static.
• Adds the "+" tab (new section) and "0" tab (edit intro) for pages that don't have one.

Screenshots coming soon

Notes:

• Only tested on FireFox
• A few bugs to work out
• I hide the language box (TODO: Make scrolling)
  

Description:
* Only tested on Firefox

• CSS
  • Changed p-personal
  • Changed p-search
• JS
  • Added CheckUsage tab on "Image" namespace pages
  • Added Blockip tab on "User" namespace pages
    

Description:
The popular Monobook skin with Google ads. Search for Google in Monobook_ads.php and change the client with your ID.

Description:
For publishers looking to make money from their site, I have added Google Ads both to the sidebar and bottom bar of the Monobook skin. See: Google Ads Monobook

Description:
Just a tiny tweak on the layout, but it shows you where to add text or content to the top header line.

To add stuff to the header just go to Monobook.php and find

<div class="portlet" id="p-personal">
          <h5><?php $this->msg('personaltools') ?></h5>
          <div class="pBody">
            <ul>

And add your stuff right after the UL tag, in my case:

<?php if($this->data['viewcount' ]) { ?>
<li id="f-viewcount"><?php  $this->html('viewcount')  ?></li>
<?php } ?>
 
<?php if($this->data['numberofwatchingusers' ]) { ?>
<li id="f-numberofwatchingusers"><?php $this->html('numberofwatchingusers') ?></li>
<?php } ?>

Test it yourself here

Description:
One of my wikis is part of a game forum so I tried to get the same visuals as the main forum. Just drop the CSS file saved as a file named main.css at your myskin folder, then go to LocalSettings.php and change $wgDefaultSkin = 'monobook'; change it to $wgDefaultSkin = 'myskin'; Renmiri 05:54, 19 December 2006 (UTC)

• Comments welcome at http://ffproject.net/forumwiki/index.php/User_talk:Renmiri
  

Description:
This skin is basically a blue design of the original Monobook. The textboxes also change to dark blue, all the text is in small caps, and the links, even visited links, always remain blue

Description:
I don't have a screen shot - it looks terrible in a full browser. I simply tried to neutralize everything that would make the stuff hard to use on a handheld. This is just a first try. But it makes articles much easier to read. The main page has a big table on it, so that doesn't look too good.

The footer still looks good and doesn't overlap. You can see the language box has a scroll bar when it gets too big. This way all the navigation stays on the screen

As far as I know, no one's done this before. One of the things I really liked about the classic skin is the "fixed sidebar", which stays on the left hand side of the screen as you scroll. I used javascript to restructure the page a little and then css to keep the sidebar in position. See Help:User style/floating quickbar.

I've also got a bunch of user scripts. The good ones end up getting developed into better scripts by other people, which you can find elsewhere, and the others aren't stable enough to describe here.

There's also a few tweaks, like removing the logo and crossing out the upload link so I remember to upload to Commons instead.

My main code is on en.wikipedia; see en:User:Omegatron/monobook.css and en:User:Omegatron/monobook.js. I've got a short command on every other wiki to include the code from there, so I only edit the en version and all my other wiki skins stay in sync. See User:Omegatron/monobook.css and User:Omegatron/monobook.js. (The upload crossing out is counteracted by a line in my Commons css, for instance. See Commons:User:Omegatron/monobook.css)

Based on "#Fosfori Verdi (Green Phosphor)" above. The idea is black, blue, blue, and blue - with a lot of complementary neutrals and browns. A golden wikipedia logo, etc. Although many people firmly dislike anything-on-black, others feel that a color combination like this is easy on the eyes - even moreso IMHO than FV, which I used for a few weeks. See how long this one keeps me happy...

• Updated CSS at en:User:Stevertigo/monobook.css
• Updated JS at en:User:Stevertigo/monobook.js
• Comments welcome at User talk:Stevertigo
  

The paragraph that the mouse-pointer is over shows strong links; links are less intrusive in other paragraphs.

This is a tiny CSS file that introduces subtle interactive cues; you can use the whole thing, or any part individually.

The most obvious change is that links are less intrusive; there are also options (off by default) for double spacing, text width, and (most coolly) a multicolumn layout.

Two Columns. Help? The multicolumn layout doesn't work very well, which is why it's off by default -- it works great for some long articles, but tends to squash short articles, break long article beginnings (all those templates), and totally fubar the main page.

This could be easily fixed -- just put a new DIV around all the text below the table of contents (for example) and have the 2-column CSS act on that. (Better yet, put a div around each top-level section of the article and only apply the CSS if the section's long.) Unfortunately, I don't know javascript, so I can't do this myself -- let me know if you're willing/able to help. Thanks, Topaz! Tlogmer

See also: User:Celestianpower/tabs

Description:
I have a whole bunch of function libraries for developers and one real module (at the time of this writing) which adds a panel under 'toolbox' on the left side of your screen to update User:YourUserName/Status for Online, Busy, or Offline. Full descriptions and installation instructions are at en:User:Topaz/Wikiscripts.

Notice the warning tabs and the other, now abbreviated tabs.

There are no major appearance changes in this modification, this is for utility/usage purposes. Some of the pictures to the right are a bit out of date though.

A diff page.

Monobook.css

• Adds rounded corners (mozilla browsers)

Monobook.js

• Addition edit features
• Google Scholar search

• Vandal warning tabs added
• Vandal rollback added (in addition to rollback)
• Quick protection/unprotection tagging and WP:PP listings
• Quick WP de-listing
• Purge tabs added to project/user/category pages
• Interiot "edit count" tabs added for users
• Block log link that shows when a user has been blocked
• Protection tabs named better
• Auto-AFD lister
• Auto-AFD closer
• Auto-AFD article talk page notices
• UTC clock in upper right corner
• New links added to toolbox, like WP:AN, WP:3RR, RfPP
• RfPP quick responses
• WP:AN/3RR quick responses
• Text occurace replace tab
• Last diff tab added
• Auto-Copy vio tagging
• Lupin's Popups
• Lupin's filters
• Quick history stats

• Edit top tab
• More edit buttons (like the nowiki button)

• Other minor changes (some to make tabs fit)

Note: This script is designed for admins, and it was designed for Mozilla; the vandal revert does not work on IE.

Description:
My first skin. Made with 5 pixel gold borders around the sidebar buttons.

Description:
My second skin. A mix of crimson and monochrome colours

Description:
My third skin in a row. Black and white issue.

Description:
In browsers on handheld devices (if they process styles found inside an @media handheld rule, as IE on Windows Mobile 5 does), these rules override the default positioning and margins so that the content begins at the top left and fills the width of the display. The navigation and special links and the search box are at the bottom.

One style rule reveals the links to the navigation and to the search box that are usually hidden underneath the page heading, so that it's easy to skip past the content when you want to. (Unfortunately, these links don't work in IE on Windows Mobile 5, because that version of IE doesn't recognize an element with an ID as the destination of an A tag with #fragment notation in its HREF. It only works when the destination is an A tag with a NAME attribute.) The reason for giving each style rule its own @media handheld instead of wrapping them inside one big one is again, a defect of IE on Windows Mobile 5, which ignores most of the rules unless they are individually wrapped.

Description:
This skin features a ghostwhite background (an HTML color value) and a Wikipedia logo on the back. In the top right corner, there is another Wikipedia tag.

Description:
This file can be used as a skin for MediaWiki (tested in version 1.11) to model the look and feel of WordPress - as it can be found on the documentation website of WordPress. The implementation is not 100% percent correct, since we tried to include more of the original MediaWiki functionality in the CSS file. To install this skin, download the ZIP file into the "skins" folder of your wiki installation and unzip it. Then edit in LocalSettings.php $wgDefaultSkin to look like the following: $wgDefaultSkin = 'wordpress';

Description:
I started with Essjay's skin, tweaked a few things, put up my own wikipedia logo (that was a little joke - I'll likely change it), changed a number of the colors and got rid of a lot of things that I find annoying about wikipedia (like the copyright notices, the fundraising header, the special characters on the edit page and a few other things). There may be some problems with the logo in Internet Explorer, but I think the skin works really well in Safari and Firefox.

I still have some work to do on it, but it is really cool that you can do things like this just with CSS! Please let me know if you see anything that should be changed/fixed.

Description:
This skin follows a light-blue theme to give a bright, friendly look from page to page. Includes IE fixes, along with has less whitespace. All menu links are on the left side of the screen. The banner at the top is a single image, not two images overlapped. The external link icon, too, has been removed (refer to the monobook skin to find out how to re-add it). Has been tested and proven to work with the latest version of IE, Opera and Firefox.

Description:
A fairly heavy modification to Monobook, this is for a wiki being developed by User:Lafnlab for his work. The ZIP file includes the CSS, PHP, and directory for the images. Some generic logos are included, as well as .XCF files so people can create their own images.

Version 0.9 was created in August 2007 and has been tested in MediaWiki 1.10.1. The new version adds a few tables which gives it a uniform appearance across browsers. It has been tested in Firefox, Opera, Konqueror, and Kazehakase.

Skin from the PaulGu.com Wiki.

Skin from the PaulGu.com Wiki.

Skin from the PaulGu.com Wiki.

This design is dedicated to maximize the space for the page's content, and made Wiki look as a professional web site which can be applied to many type of business. It's bright, clean and professional. It has all the MediaWiki facilities, but it's not "MediaWiki look".

This skin can be used from simple, personal homepages to corporate web applications.

Release notes

• Simplify the design and give it a decent look
• Allow any width of web page
• Site logo is associated to page
• Support many different styles in one skin
• Categorized CSS files by functionalities, style, and templates, very easy to read and edit.
• Very detailed comments for important tags.
• Compatible with AJAX search in MediaWiki.
• You can use big customized header background

System Requirements

• It had been tested on Firefox 1.5 and Firefox 2.0, Internet Explorer 6.0, Internet Explorer 7.0, and Safari 3.0.2.
• It had been tested and works with MediaWiki 1.8.2, MediaWiki 1.9.0 and up.
  

Description:
A light, minimalist theme.

For development, please see Google Code

Jason Pearce's FratMan skin is a light, minimalist skin that was first developed for MediaWiki v1.4 in April 2005. Others have updated the skin to improve browser compatability and work with MediaWiki updates. The latest skin, developed by Anand in September 2006, works with MediaWiki v1.7. Visit Jason Pearce's website to download all versions.

Description:
Once logged in, skin reveals edit toolbar A fixed-width, hidden-toolbar, minimalist theme.

The development of this skin is inconsistent. This was developed for a specific project.

Andrew Tutt's student-link skin is a fixed-width minimalist theme derived from the original Fratman. The current release runs on MediaWiki 1.10.x. See Student Link Skin in action at http://student.groups.duke.edu.

Supported for all browsers.

Description:
Based off of MonoBook & Fratman. Designed to dedicate as much space as possible to the page's content. Critical tools (Edit, Log out, & User Name/homepage) are in the top right. Everything else is at the bottom of the page in a "toolbox."

The BluWiki Simple Skin validates in XHTML and CSS, and has been tested in the latest versions of Firefox, Internet Explorer, Safari, & Camino.

• Designed for: BluWiki
• Author: Sam Odio
  • Comments welcome at http://sam.bluwiki.com/go/User_talk:Sam_Odio
    

Description:
This skin is primarily based off of the Fratman skin, with a few elements of Redeye sprinkled in. I wanted a clean, simple, user friendly design without all of the extra whitespace that most skins come with. It works fine on MediaWiki 1.9 and has been tested in FireFox 2, IE6 and IE7.

Description:
This is an adaptation of Ghyslain Armand's Rounded Blue Edition WordPress theme to MediaWiki. It leaves most of the Monobook CSS intact. To use this skin, upload the following folders and files into your MediaWiki skins directory: the roundedblue folder, roundedblue.php and roundedblue.deps.php. Keep in mind that the path to the stylesheet is relative. It is skins/roundedblue/main.css. If the stylesheet is not being applied when you select this skin in your preferences, then change the main.css stylesheet path to fit the directory structure in your own MediaWiki installation.

To learn a few more details about how to customize Rounded Blue Edition for your own wiki, please refer to the designer's blog page for this skin. You may also find this thread in the MediaWiki Users forum helpful.

Easiest way to customize the skin might be to leave the CSS/HTML/PHP intact (except for the background) and just change the pictures. The psd-files of the WordPress theme this MediaWiki theme is based on, might be helpful.

You may also wish to download the Coolvetica font that is used for the navigation, toolbox and search subheadings.

Note: I.E. 7 bugs fixed

Note: TOC bug, TOC creates gap in content area!

Note: IEfixes bug: change

$this->skinname  = 'RoundedBlue';
$this->stylename = 'RoundedBlue';
$this->template  = 'RoundedBlueTemplate';

to

$this->skinname  = 'roundedblue';
$this->stylename = 'roundedblue';
$this->template  = 'RoundedBlueTemplate';

Description:
This is a change in the color scheme of the Rounded Blue skin. It has no background image at the top, and so there is less space at the top. Other than that, the layout is identical. To use this skin, upload the following folders and files into your MediaWiki skins directory: the roundedsassy folder, roundedsassy.php and roundedsassy.deps.php. Keep in mind that the path to the stylesheet is relative. It is skins/roundedsassy/main.css. If the stylesheet is not being applied when you select this skin in your preferences, then change the main.css stylesheet path to fit the directory structure in your own MediaWiki installation.

For information on how to customize this skin, you may find this thread in the MediaWiki Users forum helpful. Even though it's about the RoundedBlue skin, most of the tips also apply to the RoundedSassy skin.

Note: I.E. 7 bugs fixed

You may also wish to download the Coolvetica font that is used for the navigation, toolbox and search subheadings.

Coolvetica Source: http://www.dreamfishery.com/downloads/coolveti.zip

Description:
Toykilla's skins:

Black Fixed Width 3-column

• My wiki: http://www.scion-tech.org.
• MW Version: 1.9+

Download Black Fixed Width 3-column skin

Toykilla's Heavy Makeover

• My wiki: http://www.350z-tech.com/zwiki.

I began with the Monobook skin and heavily altered it. You can still see the Monobook roots.

I wanted everything to blend together, so I took the styling from our forum skin and applied it to the wiki.

Notes:

• Developed for Firefox, with fixes for IE being applied in a separate style sheet

UPDATE:
I have posted the source code, even though the CSS needs cleaned up. I will try to clean it up and repost soon.

Download Heavy Makeover skin

To creat extra sidebar blocks use this code in either column in MonoBook.php. Also change the id="p-sponsors" and id="sponsorsBody" to whatever you want for that block:

<div id="p-sponsors" class="container1">
                <div class="headbox1"><h5>350Z-TECH STORE</h5></div>
                <div id="sponsorsBody" class="contentbox1">
 
                        Put some content here.
 
                </div>
        </div>

Description:
MistyLook for WordPress converted to MediaWiki.

From Sadish Bala's MistyLook theme for WordPress (v3.2) and MonoBook skin. Used in MediaWiki 1.9.3, tested in 1.6.8 as well. Quick and dirty port.

Description:
Contents of most website in Chinese is aligned center horizontally. To meet this requirement, the Monobook style is modified into a new Cn0km appearance, which is more acceptble to Chinese net-surfers, and welcomed heavily by our readers.

• The most useful tools, such as, the Recent changes, the popular pages, the Upload, and the Specail page, is placed in a line under the navigation bar, along with the personal tools bar.

• The Whatlinkshere, Recentchangeslinked, Contributions links is closely beneath each page title, and addtional Blockip, Emailuser links appear in the User page.

• Google search is adopted to enhance info inquiring ability, since the default search function is not quite effectively in Chinese.

• Since cn0km wiki is to provide info for backpacking in China, an regularly changed landscape picture is put in the header. The scene in this screen-shot is the Mt. Everest.

• Designed for: cn0km wiki.

• Tested on IE 6.0, Firefox 2.0 and Safari 3.0.
  

Description:
So here it is. My first MediaWiki theme. I wanted to take the skinning to a new level. Therefore, I implemented several AJAX / Javascripts to the skin. First I want to give credit to Toykilla as this theme is based on his skin (which is a heavily modified version of the Monobook theme). Now, on to the changes/features:

Visitors can add pages to their "favorites".

• First, you’ll notice that the content boxes along the left side can be re-arranged. This is done using AJAX and is stored on the local computer so the order stays the same for future visits. Also, each box can be collapsed or expanded by clicking on the (+) or (-). This is based on the Docking Boxes (dbx) script.

• Next, I’ve added a feature called “My Favorites”. Basically, under the title of each page is a link that says “Add to favorites”, when clicking on this link, it will add the page to the left navigation box for easy access. The pages can be removed if no longer needed and the list is stored as a cookie on the user’s machine so they won’t lose it. This avoids any messy database functions. Also, there is a helpful javascript popup explaining this to your visitors. This feature is similar to a “shopping cart” script and was mostly coded by hand. There is some redundancy in the code so if someone feels like cleaning it up, feel free.

• Lastly, I have embedded a Google search box in the left navigation pane. This avoids having to add any extensions to your Wiki and makes for easy access to the search engine.

This skin was tested on IE and Firefox. So feel free, download it and please let me know what you think of it.

Description:
A heavily modified Monobook that utilizes a Javascript drop-down navigation menu and a green color scheme.

• The logo area has been expanded to accommodate a logo up to 135px high by 700px wide.
• The navigation menu can accommodate three additional user menus added through the "sidebar".
• The navigation menu, toolbox, and personal tools (except for the login/logout selections) have been placed in drop-down menus, which is based on the YADM dynamic menu schema and utilizes the yadm javascript file.
• In order for the skins file to work properly, users must enable JavaScript in their browsers.
• The JavaScript file, yadm.js, is included in the skin download.
• Drop-down menus are denoted with ellipses following the menu name (...).
• The login and logout links show in the navigation bar as additional menu items.
• The category box at the bottom of categorized pages utilizes a smaller font, and a green background.
• Designed for: Southern Family Roots wiki.
• To use the skin, download the file (above), upload to your skins directory and unpack. You should get the following files: SFRGreen.php, SFRGreen.deps.php, and the directory SFRGreen with a number of files. It is also recommended that you edit MediaWiki:Userlogin to shorten the caption -- replacing "Log in / Create account" with "Log in / Register" should be sufficient.
• Tested on IE 7.0 and Firefox 2.0.
  

Description:
A modified Monobook skin designed around a content management system concept for users wanting to use MediaWiki to build their website without visitors having edit privileges

Features

• This skin is based on the MediaWiki Monobook skin, but is designed around the concept of a content management system for those desiring to use MediaWiki to build their websites, but do not wish to have visitors edit the site. This skin has been tested and works in Firefox version 2.0 and Internet Explorer version 7.0.

Site navigation when logged in as "sysop"

Change to Monobook include:

• The personal toolbar has been moved from the top right side of the page, to the middle left where the Navigation and Toolbox currently reside. The personal toolbox is displayed only when a user is logged in as a sysop; it is supressed for visitors.
• The login link has been moved to the page footer, and has been renamed "Admin Login".
• The links for "Upload file" and "Special pages" in the toolbox are supressed for visitors; the links are displayed only for users logged in as a sysop.
• The content action tabs have been moved from tabs above the page content to links above the page title. The content action links are displayed only for users logged in as a sysop; the links are supressed for site visitors.
• The logo area has been expanded to accommodate a custom logo up to 135px by 700px.
• An easily modifiable page title has been added to the center of the page. This title can be easily changed by inserting the appropriate text in the LocalSettings.php file, or it can be supressed.
• The search feature has been relocated to the upper side of the page, residing to the right of the logo and website title.

The file download includes the MonoCMS skin file (MonoCMS.php), the dependency file (MonoCMS.deps.php), a folder called "monocms" that includes the .css files for the skin, and file called "LocalSetting-MonoCMS.php" that includes the recommended settings to include in LocalSettings.php if you wish to utilize this skin with MediaWiki.

Description:
  Features

• ugly dividing lines replaced with a continuous border
• slightly more colorful
• sections are separated from their headings
• headings use color to distinguish different levels
• floating elements are disallowed left of headings or [edit] links
• scrolling <pre> with dashed blue borders

Comments This isn't really tested on anything other than w:Mozilla, but it works well enough for me.
--[[User:Eequor|ηυωρ]] 20:19, 20 Sep 2004 (UTC)

Description:
 

• for a demo see: User:Taka/Tooltips
• Requires adding this code to your monobook.css or myskin.css

New

To add a tooltip (on en, meta) use:{{tooltip|visible|hidden}} where "visible "is the visible text or links, and "hidden" is a comment that shows on mouseover. A good idea for how to use these is to give a short lookahead preview for the top paragraph of a related article.

This is a tooltip example

Features

• Enables the use of tooltips (see image) in Mozilla and Opera (does not work in Internet Explorer)
• Can't be used really, because it has some glitches, and what is worse: it shows the text of the tooltips in the print-version of the page.
• With a change to the common stylesheet and maybe some improvements it could be workable.
• Can be added to every stylesheet (not just standard.css)
  

Description:
 

• Small enhancements.
• commons:User:Crissov/standard.css

Features

• better tables and lists
• readability enhanced by maximizing line length and constant line height with <sup> and <sub>

Written for and only tested in Opera 7.

Description:
  Features

• Smoother, simpler than regular classic (most boxes and lines are gone, replaced with space).
• Incorporates a cool gray look and a modified version of monobook background, while retaining classic's nice UI and readable fonts.
• Works great on Opera and Firefox. Tiny glitches on IE.
• Fixes classic's horrible image flow issue (when compared with Monobook) - adjacent rfloat images now stack vertically rather than horizontally.
  

Poland

This style works in Opera, Firefox and IE.

• The interlanguage, categories links and personal tools have moved from the sidebar to the top.
• Duplicate Views and moved to the bottom.