If I owned Wikidot
Sunday morning dreaming had me thinking of ways to improve Wikidot.
The other morning I was thinking about what I would do if I could buy Wikidot. I would like to whittle down that big list of user-requested features waiting to be added, but the only way to achieve that is to hire more developers. Developers, for some reason, are expensive. The obvious solution is to increase the user-base, with a proportional increase in income. More users in general, and consequently more sites, would increase revenue from advertising, and would also increase the number of paying (pro) users. Therefore, we need more mainstream appeal. How? Here's what I came up with.
New design
It's time Wikidot got a new look. The current design has been around for years (from at least since I started using Wikidot1) and is starting to look dated. I'd implement a new theme to be used across the Wikidot brand of sites (www, blog, feedback, community), and give the interface elements (page editor, site manager, etc) a refresh.
Wrap-around ribbons with CSS
Now with semantic code
A while ago, back in 2010 when I was an innocent wee-little CSS newbie, I wrote a piece about creating a ribbon header with 'pure' CSS3, with what I thought was some pretty good code. That article got tweeted by @smashingmag, which generated a lot of traffic to my humble little site. It didn't take long before visitors started to point out better ways of achieving the same effect. Only now, finally, am I writing about the more semantic method of creating CSS ribbons.
Ribbons with CSS
Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.
The markup is super-simple.
<div class="ribbon"> <h3>Header text</h3> <p>Body text</p> </div>
Lined Paper with CSS
Let's make some lined paper with CSS. The technique is quite simple - all we need is a repeating background gradient to give the effect of lines across the paper, and a pseudo element on the left to give the ruled margin.
Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.
And here's the CSS:
.paper { font: normal 12px/1.5 "Lucida Grande", arial, sans-serif; width: 300px; margin: 0 auto 10px; padding: 6px 5px 4px 42px; position: relative; color: #444; line-height: 20px; border: 1px solid #d2d2d2; background: #fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ''; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; }
Getting user avatars is now easier than ever
Say goodbye to those annoying work-arounds.
Recent changes by Wikidot to the way user avatars are stored means that we can now get a user's avatar without having to resort to exotic server-side or javascript based solutions. Avatars are available at the following url:
// Full size version
http://www.wikidot.com/avatar.php?userid=YOUR-ID
// 16 x 16px version
http://www.wikidot.com/avatar.php?userid=YOUR-ID&size=smallSo to use that in an image tag on a live template, all you need to do is:
[[image http://www.wikidot.com/avatar.php?userid=%%created_by_id%% width="40px" height="40px"]]Thank you Wikidot.
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.
Freebie - Growl notification style
A while ago I decided to have a go at making a Growl notification style (webkit based, using HTML/CSS). I was rather happy with the result and have been using it ever since. Today, I'd like to share it with you. All you need to do is download the .growlStyle package & double click to install it. Enjoy!
If you could bribe the wikidot developers...
Let your imagination run wild.
Quick question - if you could bribe the Wikidot developers to implement one wish from the feedback site (or a completely new feature), what would it be?
Customisable pages with member options
Give your users more control with per-page options.
I recently discovered that you can use a ListUsers module inside a ListPages module if the former is on the page you are selecting in the latter. I’m not sure if I have come across this before; chances are I have, but yesterday I actually had an application for it. Custom options for logged-in users.
With the new set-tags buttons, we can now allow registered users to customise a page. This requires a ListUsers module, containing the options for customisation, and iftags, containing the customisations themselves. While on some pages it might be fine to show the customise options all the time, on others (such as a home page) they are an unnecessary distraction that should be hidden unless the user has clicked through to them. Enter my latest discover.
We can have the customise options in a ListUsers module on a separate page, and select them onto the page to be customised with a ListPages module, only showing the module body when a parameter is passed via the URL (as we did here).
I’ll attempt to explain how this is achieved in the code below, but it might be easier to understand by looking at this example I’ve setup on the home page.