I’ve made a long overdue update to the Rounded Blue MediaWiki skin! The layout is now truly liquid; it will no longer break from long pages or from a table of contents. Instead of using large images for the main rounded content box, the skin now tiles very small images. So the page load rate will also be faster. There is a new download location for the skin. I am now using Google Code to host the future development of this skin. The updated skin can be downloaded from this link: http://code.google.com/p/roundedblue-mediawiki-skin/downloads/list. Please feel free to participate in the new Google Code project site, even if it is only to add issues to the issues tracker or pages to the wiki.

UPDATE 4/13/10: In the latest version of MediaWiki, the portlets were being duplicated in the left column, and the footer was being crammed into the left column. I have updated the skin to fix the layout.

UPDATE 4/18/10: In I.E. 8, extra white space was being inserted in the sidebar portlets. Thanks to Dan Zahlis for the CSS fix for this. The fix was to set the width of the navigation and toolbar portlets to 100% in a CSS file just for I.E. 8. The latest download of Rounded Blue contains this fix. Of course if you are using a language or custom sidebar portlet, you will need to edit the IE80Fixes.css file to add a CSS block for it.

PLEASE NOTE 4/18/10: From now on, when I make changes to Rounded Blue, I will not be adding any more updates to my blog. I will be using the Google Code project site to keep track of issues and fixes.

If You Need a Language Sidebar

For some reason, an empty language sidebar kept being generated, no matter what I did, so I had to remove the rounded box styling for the language sidebar. For users who need the language sidebar, find the following code in roundedblue.php:

if ( !isset( $sidebar['SEARCH'] ) ) $sidebar['SEARCH'] = true;
if ( !isset( $sidebar['TOOLBOX'] ) ) $sidebar['TOOLBOX'] = true;
foreach ($sidebar as $boxName => $cont) {
if ( $boxName == 'SEARCH' ) {
$this->searchBox();
} elseif ( $boxName == 'TOOLBOX' ) {
echo $begintags;
$this->toolbox();
echo $endtags;
} elseif ( isset( $sidebar['LANGUAGES'] ) && $boxName == 'LANGUAGES' ) {
$this->languageBox();
} elseif ( !empty($boxName) ) {
echo $begintags;
$this->customBox( $boxName, $cont );
echo $endtags;
}
}

Change it to:

if ( !isset( $sidebar['SEARCH'] ) ) $sidebar['SEARCH'] = true;
if ( !isset( $sidebar['TOOLBOX'] ) ) $sidebar['TOOLBOX'] = true;
if ( !isset( $sidebar['LANGUAGES'] ) ) $sidebar['LANGUAGES'] = true;
foreach ($sidebar as $boxName => $cont) {
if ( $boxName == 'SEARCH' ) {
$this->searchBox();
} elseif ( $boxName == 'TOOLBOX' ) {
echo $begintags;
$this->toolbox();
echo $endtags;
} elseif ( $boxName == 'LANGUAGES' ){
echo $begintags;
$this->languageBox();
echo $endtags;
} elseif ( !empty($boxName) ) {
echo $begintags;
$this->customBox( $boxName, $cont );
echo $endtags;
}
}

Editing the Image Files

The image files are sheet-c.gif, sheet-s.gif, sheet-h.gif and sheet-v.gif. All of these should be very easy to edit with the exception of sheet-s.gif, which is a circle. (It gets clipped by the CSS to generate each corner.) Just remember when editing gif files that if you want to change the colors, make the image mode RGB Color instead of Indexed Color while you are working on them. But then when you are done making your changes, change the image mode back to Indexed Color. To edit sheet-s.gif you will need to become adept at using the Elliptical Marquee Tool in PhotoShop (or its equivalent in whatever image editing program you use). With this tool, you can select the larger of the two nested circles and make it whatever color you want. Do this on another layer which you can then hide when you select the smaller nested circle. Otherwise the smaller nested circle will get covered up, and you will need to play around a lot to get it just the right size. But before selecting the smaller nested circle to change its color, select the inverse of the larger circle selection. Then make the background color whatever color you want. Then hide the layer you used to change the color of the larger nested circle. Then you will be able to see the smaller circle, select it and change its color.