Wikidot Design & Development

Showcase - CSS3 Image Gallery

Add some jazz to the lightbox image gallery with these CSS3 improvements.

My dashboard tells me it has been 51 days since I last posted a blog - longer than I had hoped between posts, but inevitable while I'm juggling university study with two on-going wikidot projects. And admittedly, this is not quite the in-depth post I would love to deliver you, but I felt it was time to once again whet your appetite with some CSS3 goodness - this time without the detailed explanation of every knook and cranny.

The ultimate wikidot comments counter

A sophisticated, conditional way to present the number of comments

A couple of weeks ago Timothy Foster presented the singular/plural CSS changer for counting comments. Today, I’d like to build on his idea and take the comments counting to the next level. The aim is for the comments counter to not only be able to add/remove the 's' on the end of comments, but for it to also say 'No comments yet' when the page has not yet been commented. If you’d like to see it in action, I’ve added it to the comments for BMC blog posts… just scroll down to the bottom of the page.

The basics

We’ll start with the basics, building the singular/plural support. For this tutorial, I'm assuming that you're working with the comments module in the live template, but this could just as easily be applied to the ListPages module.

On the live template (category:_template) with the comments module, you will presumably want to say something along the lines of '12 comments'. To remove that pesky 's' when only one comment has been posted, you just need to wrap a span around the 's', and use the %%comments%% variable in the class name.

%%comments%% comment[[span class="sp%%comments"]]s[[/span]]

Making data form checkbox fields useful

Do something useful with checkbox fields in wikidot data forms with these helpful solutions.

Working out what to do with the checkbox field in wikidot data forms has puzzled me for months. The only output it gives is a 1 or 0, which is hardly useful for the user, even if they are completely literate in binary. So after seeing some creative ideas on the wikidot community, I came up with the following solutions.

Inline spans and a CSS module

The first solution uses spans wrapped around each of the possible answers (such as Yes/No or Agree/Disagree), which are given a class name that changes depending on whether or not the checkbox has been ticked. This is achieved by appending a 1 or 0 on the end of the class name, which is grabbed from the checkbox field with %%form_data{fieldName}%%. So we end up with something like this…

Do you agree? [[span class="yes%%form_data{Checkbox}%%"]]Yes[[/span]][[span class="no%%form_data{Checkbox}%%"]]No[[/span]].

Then, all we have to do is toggle the display of the classes depending on whether the checkbox has been selected or not (i.e 1 or 0):

.yes1 {display:inline;}
.yes0 {display:none;}
.no1 {display:none;}
.no0 {display:inline;}

Premium themes still coming... just not yet.

Release of BMC Premium Themes has been delayed

I’ve decided not to release any premium themes just yet, mainly because I’m not 100% happy with the couple that I’ve got just about complete. Now that I’m back at university, I just don’t have the time to sit down and iron out a few little bugs in the code, and I don’t feel happy selling a product that I know has a bug in it. But don’t worry, I’m still dedicated to bringing premium themes to wikidot, and all things going well, I should have them ready by the end of the year.

I will continue to post new articles on this blog in the meantime, even if they’re not as frequent as I would like. And I have a couple of other data form related applications that I’m developing that will be ready soon.

I thank you all for your patience… even if you weren't planning on getting a premium theme.

Now back to trying to figure out how to use SecondLife. (It's for a uni assignment, I swear! No really, it is.)


CSS Button Generator using Wikidot Data Forms

Another showcase of the power of wikidot data forms

So Wikidot’s little baby, the data form, seems to be pretty popular at the moment as we all discover the power of the not-even-finished-yet implementation. There are some wonderful applications of data forms out there, and today I’m bringing you another - a CSS button generator. The form lets you build custom buttons for your wikidot site by selecting from a list of options for properties such as background colour, shadow, border radius, text size and more.

Most of the data is handled as a select field type, so that the %%form_raw{field}%% can then be passed into the code block (to show the user the code) and CSS module (to generate the preview). The colour fields use the text field type and a regular expression on the match property to only allow valid hexadecimal colour codes.

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.

Creating a pure CSS content slider

A simple content slider. No javascript. No flash. Just HTML and CSS3. Oh, and a bit of BMC.

When I was redesigning the homepage for this site, I really wanted to include a simple content slider that would integrate easily with the wikidot syntax and allow the content of the slides to be changed without much thought required, and possibly even automatically with the ListPages module. I have tried getting many javascript and jQuery sliders to work with wikidot, but the amount of time required to get them working properly, and their lack of integration with other parts of the site, put me off them. That, and my very limited knowledge of javascript. So I turned to something I am familiar with, even quite adept at, to create the slider. CSS3. (If you haven’t figured it out yet, the three boxes on the homepage slide to the left if you’re using Safari or Chrome). I know what you’re saying now. CSS3 only works in some browsers! The slider only works in Safari & Chrome! What good is that? Well, read on for my reasoning…

CSS slider preview

So yes, the slider does only work in Safari and Chrome because it uses webkit animations to slide the boxes. But that doesn’t mean it looks like a jumbled-up mess in other browsers. The slider is designed so that even without the animation, it still looks great and incorporates well with the rest of the site. It even looks good in IE6!
When viewed in a non-webkit browser, the user simply sees the first three boxes. When viewed with Safari and Chrome, those first three boxes slide to the left after 25 seconds to reveal another three boxes. This means there is some content on the page that only a limited number of visitors will be able to see, but my reasoning was as follows: the content of the boxes is merely there to promote other parts of the site. There’s nothing in those boxes that is integral to user experience; they’re just glorified links. The animation enhances the user experience for those with modern browsers, as they deserve. And if something important needed to be put in the boxes, I can just place it in the one of the first three - everyone can see those three boxes.
Well, enough explaining myself, lets get on to the juicy stuff…

Recreating the feedback site's bug/wish button

Adding some interactivity to an otherwise static image using CSS.

Every time I visit the wikidot feedback site I expect some sort of user interaction from the bug/wish toggle button in the sidebar - instead it is a static image. So I decided to recreate the button with CSS. Below you can see the original image on the left versus the pure CSS version on the right. By hovering over or clicking the button, you can see how the CSS version adds some user interaction.


bugs wishes

The Markup

There are four main classes used to create the button: two ‘states’ for the toggles - link vs current; and two ‘positions’ - left and right, to maintain the curved corners on the correct side.

[[div class="bug-button"]]
[[span class="current left"]]bugs[[/span]] [[span class="link right"]][[[css3:wish-bug-button | wishes]]][[/span]]

Using these classes means that by simply swapping the ‘state’ classes while maintaining the ‘position’ classes allows for changing the state of the toggle without having to change the CSS. You'll see in the CSS below that the styles are added only to the span element for the current state, but are added to the anchor (a) element in the link state.

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.