April 9, 2008
Deki Wiki skinning
royk @ 2:19 pm
dontforgetmario asked a great question on our forums today, which begged for a post. Here is the relevant portion of the forum post:
Why don’t you guys just publish your new skin projects and ideas openly so that other designers also can help with it? Change ideas and so on?
Remember 10, 100 or 1000 think more and can do more than 1.
There isn’t any dedicated forum section for skinning either and the documentation is mmm…. a bit chaotic in this matter.
This question came in a thread about a side-project of mine, the Enterprise (”Deuce”) skin. A bit of history about the skin: I originally threw together the mockup in a few hours to capture all my thoughts about the deficiencies in the Ace skin. (Ace has had a long and storied history at MindTouch, but that’s a blog post for another day!) While Guerric was being ramped up into our development team, I gave him the job of doing the markdown so he could better understand how the skinning engine worked in Deki Wiki. Whatever spare hours we can scrounge up at work, we’ve contributed to the skin.
Yes, Virginia, there is a Deuce skin, and you can download it!
The skin is actually available to download and try, with the caveat that it is not ready for production systems. It has not been thoroughly tested, and big chunks of it are missing styles. However, it is there to give you an idea of where I’d like to drive our default skin to be over the next few months. If you have a designer/CSS guru on staff, they can easily work on the skin - I’d say it’s about 90% done … feel free to take it the last 10%!
To grab a copy of the Enterprise “Deuce” skin, you can do a svn checkout of
https://svn.mindtouch.com/source/public/dekiwiki/trunk/web/skins/enterprise/
into your skins folder - it will appear in your Control Panel under Visual Appearances.
So why don’t you guys ship this with the releases and make it available on Wik.is?
The short answer is this: It’s not ready. When we release Deki Wiki upgrades, I make a personal commitment to make sure everything that ships is of the highest quality. Everything that we ship is implicitly ready for production. To me, the extraordinary adoption of Deki Wiki is a vote of confidence in not only our software but our future decision-making, and I work hard to make sure that trust isn’t diminished.
Features I feel are not ready for “prime-time” are left to stew for a few more releases by making their functionality optional - the dialogs were in two previous releases (1.8.2 and 1.8.3) before being turned “on” by default in 1.9.0. The flash uploader (a simply amazing feature you’ll see in 1.9.0) has been available for a few releases as well, and will become turned on by default during the next release.
Why are shipping skins so difficult?
Features have the benefit of having clearly defined endpoints based on specifications: “If feature X accomplishes task Y, then it is complete.” Skins are more difficult to ship, because gauging their completion is much more difficult. There are the standard concerns that every developer is aware of: skins must work well across all browser and platforms. Even the smallest visual defect makes the whole skin seem inferior (does anybody get annoyed at the white box around disabled menu items in Ace?)
Our situation is made more complex because of the vast number of features we can potentially expose to the front-end; even today, I am currently grappling with how to integrate the vast number of features coming in our Jay Cooke release into the existing skins! We also have a lot of custom JavaScript functionality that requires markup to exist in a certain format (editor, image gallery, comments, tags all have highly specific markup).
Try this on any CMS: Create a table, and in one cell, put a long, unbroken string of text and see how well your skin handles it. You’ll find a lot of skins simply cannot cope, and will do things like: break the layout to allow the text to show, hide the overflowing text, or add a scrollbar to allow you to scroll to see the text. Dealing with those types of edge cases are difficult for designers, and when MindTouch ship skins, we want to make sure these cases are handled well - unfortunately, these types of issues take time.
Although we strongly recommend that new skins use new folders, I’ve seen that many large sites just use existing skins and modify them to fit their own sites. One great example of this is the encyclopedia at InvestingMinds, which modified the Ace skin to fit their general site theme. This is mostly the reason why I am unable to make breaking markup changes that would improve Ace’s markup - this would break all the people who used custom styles to change the look of their Deki Wiki!
That last point is the biggest reason why I’m loathe to “publicly” release Deuce early - it’s still in far too much of a nascent change for me to commit to not making breaking markup changes in the future.
So have the open-source community help out and complete the skin!
We absolutely, positively, love feedback from our community. However, given that there are nearly a gajillion (seriously) ways of getting the same things done in CSS/XHTML, it becomes difficult for multiple designers/CSS coders to work together. At MindTouch, I’ve just initiated a HTML & CSS Coding guideline that all web developers internally - I hope to extend this to any community members who want to contribute, so we can maintain some level of consistency in all our work. This draft is still very rough, so we need to actually follow it and see how much of it actually works. Once I feel confident in the guidelines for CSS/XHTML development, we will definitively apply them to all skins going forward, which will make things easier for anybody who wants to participate in creating skins.
Our skinning commitments going forward
We have not tapped the full potential for skinning Deki Wiki yet. The problem is that there is shoddy documentation, and the existing skins don’t do a good job of “leading by example.” By July, I’d like to improve the whole support for skinning inside Deki Wiki. The tangible goals to accomplish this task:
- Clean up Ace’s PHP template (not the markup!) to take advantage of the internal templating engine so developers have a better idea how Deki Wiki’s PHP generates templating data
- Clean up Ace’s CSS to match the coding guidelines, so people who want to extend Ace can easily figure out what rules target which areas
- Release Enterprise “Deuce” as our new default skin that takes advantage of all our features with multiple color themes, taking full advantage of our PHP templating engine and our CSS guidelines to replace the outdated look of Ace
- Provide complete technical documentation on our skinning/templating engine, as well designer-oriented examples
- Provide more documentation for administrators who know no CSS to accomplish simple tasks in a manner which works for multiple skins (currently the FAQs on our wiki only work for Fiesta)
Any thoughts, concerns, or suggestions? Please leave a comment below … let’s make Deki Wiki the belle of the ball!
categories: Deki Wiki






Wait. I thought Deuce was vapor.
Comment by Aaron Fulkerson — April 9, 2008 @ 6:40 pm
I welcome additional documentation, samples, new skins and support for skinning standards. I think the ability to easily customize the look and feel of a web site is crucial to the success of the platform behind it. One of the reasons why WordPress is so popular as a blogging platform is because of the wide variety of themes available. I use LifeType for my blogging site, which I think is superior to WordPress in many ways, but the theme offerings are a drop in the ocean compared to WordPress and it does not get the recognition it should.
One of the complaints I hear and have about Mediawiki is that all of the sites that use it look the same and Mediawiki is not that attractive to begin with. Mozilla has been able to create a nice skin around it, but otherwise I have not seen too many other examples.
I had downloaded Deuce via SVN just a week prior to this post. It’s so close to being done. I like the extra nuances, such as, the counts at the top of how many attachments and comments there are, as well as, the page stats and links to the page. Different color themes will be nice. Glad to hear that it is near completion
For theme developers, one of the most helpful tools I have come across for identifying the CSS within an existing page is the Firebug extension for Firefox. It’s awesome. And if you work on a Mac , Panic’s Coda and MacRabbit CSSEdit are excellent CSS tools.
Comment by Ed — April 11, 2008 @ 5:59 am