Browse all the entries under Books, Web Design, Wikis.

Browse all the entries under Web Design, Wikis.

There, now I’m done with web design for a while. I don’t know why I get so obsessive about it. I wish I could get so obsessive about everything I need to do, at the time that I need to do it. I had planned to work on the Myth of Merula story, level up a World of Warcraft character and study the Torque Game Engine. Instead, I’m going to take a breather the rest of the day and get seriously back to work on my priorities starting on Tuesday evening.

Browse all the entries under Web Design, Wikis.

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.

UPDATE 4/10/10: I changed the images and CSS used to create the rounded content box for the main content. This fixes the problem of long pages breaking the layout. It also fixes the problem of the TOC breaking the layout.

NOTE 4/11/10: The CSS and image files that are used to generate the rounded boxes are now completely different than they were in the original version of RoundedBlue. To edit the image files for the latest version of RoundedBlue for MediaWiki, you will not be able to use the original PhotoShop files from the WordPress theme from itcouldbethisone.com. For tips on editing the image files that are used in the latest version of RoundedBlue for MediaWiki, please see this post.

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.

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.

Browse all the entries under Web Design, Wikis.

The First Stumbling Block – A Broken Stylesheet Link

I had started to create a custom skin several times in the past, using the instructions that can be found on the Jnana Base wiki, only to encounter a problem after Step 8. That is, I would make a copy of the default monobook skin and rename it. I would change “monobook” to my own skin name, everywhere the word “monobook” appeared within my own skin php file. I would upload my new skin and set my personal preference to use this skin. Voila, I would excitedly preview my work only to see completely unstyled HTML, all laid out in one single column, in Times New Roman, with huge H1 headings and the whole bit. It turned out that the link to the stylesheet was broken. When I hard-coded the link to the stylesheet, my custom skin finally became applied to my wiki. In other words, I simply used the literal url to the stylesheet, in place of the PHP code that is supposed to dynamically find the stylesheet of the active skin. (This hard-coded url to the stylesheet would not work for a skin that was packaged to be used in any MediaWiki installation, but it works okay for my own site.)

The Second Issue – Margins and Negative Margins in Content and Column-Content Divs

The second frustrating issue I encountered was that, in Internet Explorer, the first column (in the column-one div) would wrap to the bottom of the content column, rather than appearing to the left of it. The layout looked just fine in Firefox. I tried playing with absolute and relative positioning, height and width, margins and padding, float settings, etc. Nothing worked. Finally, as a test, I copied and pasted the css for the column-content and content div tags from the monobook main.css file into my css file. It fixed the problem like magic. Upon examining the css, I saw that it was very important to specify the left margins for the column-content and content divs, such that a value of x in the content div should be a value of -x in the column-content div.
Simply giving the column-one div absolute positioning would not work, since this div contains all the portlets. I did not want all of the portlets to appear in the left column. I wanted the p-personal portlet to appear in the upper right of the screen, while I wanted to p-cactions portlet to appear just above of the main content first heading. These portlets could not simply be moved out of the column-one div, because doing so would place them out of the php loop that renders all of the portlets and their values.

From There On Out, Making a MediaWiki Skin Was Just Ordinary CSS Styling

After dealing with the first two frustrations, the remaining tweaks and changes were just like any other CSS styling. Styling a MediaWiki skin is similar to styling a WordPress theme. It’s just a matter of placing div tags around the php code that renders the elements you wish to style. This can be challenging and tedious enough in itself, depending upon what you want to do. I find that everything looks good in Firefox before I get it looking good in I.E. These are normal, garden variety CSS frustrations, though. After getting past the initial stumbling blocks, making a MediaWiki skin is within the reach of anybody who has moderate to advanced CSS skills.

Browse all the entries under Philosophy Wiki, Web Design, Wikis.