klenwell information services : WikkaSkinCustomization

Wikka Skin Customizations

I like the simplicity of the default wikka appearance. The only thing I have against it really are some of the fonts used in the stylesheet -- specifically, Verdana, which is the default font setting but which I think only looks good at small sizes (and is really just a Microsoft rip-off of Frutiger.)

The changes I outline here bring a little more style, imagery, and versatility to the template. I've tried to create a fluid three column layout (no tables are used). I've moved the comments to the right of the main page to encourage greater usage of the comment feature and more visitor participation. I've added more opportunities for the placement of logos or imagery. And I've created spaces for menus and dynamic content independent of the standard wiki features (such as syndicated headlines or even, god forbid, ads!)

Unfortunately, the desired result could not be achieved by making changes to the stylesheet alone. I had to make changes to several files, which I detail below. Though I consider this a shortcoming of the wikka code, I will say to their credit that once I found my way around, I found it relatively easy to read and edit the code.

The end result looks a lot like the wikimedia template. I didn't consciously mimic that layout, but I think the similarity reflects the commonsensical utility of that template. I've viewed the template both in Firefox 1.5.x and IE 7 and it looks as desired. (There are some problems with the search-and-replace feature in IE 7 due to z-index issues.) If you notice anything weird or problematic in your browser, please contact me and let me know and I'll try to fix it.

Key Files

1. Change $wakkaConfig settings in wikka.config.php

This removes the annoying '::' delimiters in navigation_links and logged_in_navigation_links so you can create tabs for the nav links by tweaking the template and stylesheet. (More on that below.)

2. Add content to actions/header.php

Although I've seen worse examples of templating in php, wikka's template model could be improved by organizing things a little more modularly. One obvious reform would be to move the centralize content in a single template file. handlers/page/show.php sort of serves that purpose, but it controls only the display page, not the editing page. Most of the changes in the layout are made by adding content in this file.

Click here to see my header.php file.

3. Make minor changes to actions/footer.php

Again, mostly just losing the "::" delimiters. Most of the desired changes to the footer I was able to achieve by editing the stylesheet alone. I did add an empty "prefooter" block to clear floats used in the main part of the page.

This is also a good place for a page counter (e.g. Google Analytics)

footer.php code

4. Recode handlers/page/show.php file

There are too many small and middling changes to try to explain them here. Just grab the code here. I've made all the necessary changes for a fluid table-less three-column layout and tried to comment the code so that further changes are easy to make.

5. Change stylesheet settings

The stylesheet in use for this site is available here:
this stylesheet

Questions? Comments? As you see, they can now be easily added at right.

There are 2 comments on this page.
[Display comments]