Wikidot Design & Development

Set tags button - first look

BMC Quickies

Quickie: First impressions of the new set tags buttons

The latest feature to arrive at Wikidot is the set tags button, which allows you to add or remove a tag or tags with a simple button action. The first impressions are good, especially given it hasn't even been officially launched yet. I'm excited to see what everyone comes up with, and what new functionality can be developed off the back of what seems a rather simple feature. To get you all started, here's my first take at setting the button to work - creating a personalised favourites list.

[!-- In a Live template --]
[[module ListUsers users="."]]
[[iftags -_favourite%%number%%]]
[[button set-tags +_favourite%%number%% text="add to my favourites"]]
[[/iftags]]

[[iftags +_favourite%%number%%]]
This app is in your favourites list. [[button set-tags -_favourite%%number%% text="Remove from favourites."]]
[[/iftags]]
[[/module]]

[!-- In user profile page --]
+++ My favourites list
[[module ListPages tags="_favourite%%name%%" separate="no"]]
* %%title_linked%%
[[/module]]

I'm interested to know what you other wikidot gurus have in mind for the new button. Consider this a brainstorming session… go!

Four CSS features of RoaringApps explained

From a site filled with CSS3 goodness, here’s some handy little tricks for you to try out.

While developing RoaringApps.com over the past couple of months, I came across some neat little tricks, both in CSS and wikidot. In the next couple of posts, I plan to share these little gems with you. Today, it's four of my favourite CSS discoveries.

1. Linear gradients for vertical divider - forum posts

The forum post containers have a dividing line running vertically down the left side, separating the author’s info from the content of the post. Using border-right on the post info div soon runs out when there’s a long post, so I turned to linear gradients to make sure the line runs all the way from top to bottom. The trick is to use multiple colour stops, with two sharing the same percentage value to give an instant (rather than gradual) change of colour.

RoaringApps forum post

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.

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.

bug-wish-feedback.png

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]]
[[/div]]

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.