Wikidot Design & Development

Introducing Edmund - Wikidot explorer

Explore your Wikidot site like never before.

Today, I would like to introduce to you my very first Wikidot app - Edmund.

I have long wanted to understand JavaScript and jQuery, for they are languages of the web that are ubiquitous, and they are not about to go away. I've always looked on at those who understood this gobbledy-gook with much jealousy. Finally, I decided to bite the bullet and dive right in, and what better way to teach myself than to set a challenge - a Wikidot site explorer web application. Which brings us to Edmund…

The premise is simple - one place to see and manage your entire Wikidot site with a simple, structured interface and quick, easy editing. Implementing it wasn't quite as simple. I nearly gave up half way through when things weren't working the way I wanted to, but I persevered and I'm glad I did.

The wikidot editor - it's not as bad as you think

Some quality time spent with the wikidot editor revealed it's not all that bad.

Recently I was doing some styling with the wikidot editor to see if I could make it look less… (insert word of choice here). To me, it has always been functional over aesthetic. It gets the job done without screaming at you how good it is. So I took it upon myself to try and restyle it a little bit - and the result wasn't half bad.

editor.jpg

So that's the aesthetics out of the way, how about the functionality? As I've mentioned before, I've never really been one to make use of the editor's buttons, which is a shame, because there's some great functionality in there. Not only do they cover just about all the wiki syntax your average Joe will ever need, but there's some great wizards there that will do a lot of the heavy lifting for you. A little bit of CSS to make it less harsh on the eye and these popup windows start to look half alright. Check after the break for some shots of my styled popups.

Freebie - New wikidot editor buttons

A brand new set of wikidot editor buttons just for you (oh, and everyone else with a wikidot site).

new wikidot editor buttons

If you’re a wikidot guru, chances are you hardly ever look at the buttons above the editor, let alone use them. But for someone learning the wikidot syntax, they can be a great help in what can be a steep learning curve. So I decided I’d undertake the task of redesigning the buttons to give them a simpler appearance, and hopefully make them easier to understand.

The buttons include three states: normal, hover and active (when you click the button). To add them to your site, all you have to do is add the following code to your site’s CSS.

Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.