I’ve finally gotten around to creating a custom skin for the Living Philosophy Wiki. Now it has the same look and feel as the Squirrel Tao blog. Like the Squirrel Tao theme, it is based upon a customization of the Rounded V2 WordPress theme by Ghyslain Armand. In the process of customizing my wiki skin, I’ve also integrated the blog with the wiki, so that both share a navigation bar in common.

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.

Other Posts Categorized as Philosophy Wiki:

• The Philosophy Wiki is Back - December 31st, 2007
• I Accidentally Wiped Out All My Philosophy Wiki Data - April 4th, 2007
• My Philosophy Wiki and Openserving - January 21st, 2007
• The Living Philosophy Wiki May Just Be My Personal Philosophy Wiki for Now - December 2nd, 2006
• A Little Bit of Philosophy about Perfectionism about Philosophy - July 22nd, 2006
• Living Philosophy Wiki - July 15th, 2006

Other Posts Categorized as Web Design:

• Rounded Sassy MediaWiki Skin Available for Download - January 14th, 2007
• New Rounded Blue Edition MediaWiki Skin Available for Download - January 13th, 2007
• 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
• New Rounded Blue Edition MediaWiki Skin Available for Download - January 13th, 2007
• 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