Today, using my own MediaWiki skin as the basis, I altered it to make it look like the Rounded Blue Edition WordPress theme. It is available for download. Click here to go to the download page and view a small thumbnail screenshot of the Rounded Blue Edition MediaWiki skin.

To use it, just unzip it and upload it into your MediaWiki installation’s skins directory. The path to the stylesheet is relative: skins/roundedblue/main.css. Change the path if for some reason the stylesheet is not being applied. You’ll find the path in the roundedblue.php file, in the HTML head section, right underneath the title tag.

The Photoshop images that are used for the header background image, the rounded corner content boxes, etc. are available at itcouldbethisone.com for download.

You may need to do some further customization to get your logo to look right, if you have a logo in the upper left corner. Also, if you do not want to display the name of your site across the masthead, then remove the masthead div tag - and the h1 and h2 tags nested in it - from the roundedblue.php template. Your logo may not look good against the background image, either, so you may need to edit either your logo or the bg.jpg file, which is the image at the top in the background, to get the two images to look good together.

If you don’t want so much space at the top, edit the top margin values of the #content and the padding-top of the #column-one div tags in the main.css stylesheet. Keep in mind that it will make the background image at the top look “chopped off” at the bottom. So you’ll want to change this image, too. You will need to replace the bg.jpg image with an image that has less height.

UPDATE 2/18/07: Several people have privately emailed me regarding a bug in the layout. It breaks when pages are long. The quick and dirty fix is to make the csbbody-l.gif and csbbody-r.gif images taller. You can do that yourself now, making these images tall enough to suit your own content needs. The best fix is to use CSS for the the color and border of the rounded content box, using images only for the rounded corners. In my next version of the roundedblue and roundedsassy MediaWiki skins, I will use this more flexible method. If you want to be notified when the new version of either skin is available, I suggest you subscribe to the RSS feed for the wikis category in this blog. You will see an RSS link next to each category in the right sidebar.

UPDATE 3/18/07: When using the skin on MediaWiki 1.9.3 and viewing it in Internet Explorer 7.0, blocks of white partially cover some bullet point and main heading text. I’m working on fixing this.

Other Posts Categorized as Web Design:

• Rounded Sassy MediaWiki Skin Available for Download - January 14th, 2007
• More Than One Way to Skin a Wiki - December 11th, 2006
• Another Brown Website - September 12th, 2006
• Squirrel Tao Redesign - September 4th, 2006
• Widgetoko.com - A Blog on Blog Widgets - July 1st, 2006
• A Collection of Web Design Resources - July 1st, 2006
• Design Eye for the Usability Guy - March 4th, 2006

Other Posts Categorized as Wikis:

• My Philosophy Wiki and Openserving - January 21st, 2007
• Rounded Sassy MediaWiki Skin Available for Download - January 14th, 2007
• More Than One Way to Skin a Wiki - December 11th, 2006
• Cool Open-Source Hardware and Machines - December 2nd, 2006
• Wiki on Feminist Science Fiction and Musings on Legolas - July 21st, 2006
• Living Philosophy Wiki - July 15th, 2006
• Campaigns Wikia - July 7th, 2006