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.

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.

In Lelia’s case, she has chosen to restict herself to a monochromatic theme for all design elements except for the colors she uses in her artwork itself. Brown is neutral enough that she can use every color she wants in her art portfolio, and it will not clash with her website design. This design strategy also works to make the colors of her artwork seem to pop a little more than they would if they were competing for attention with many other colors surrounding them.

Browse all the entries under Web Design.