CSS Button Generator using Wikidot Data Forms

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.

The main downfall of the generator is that there is no live preview, so you have to save the page first to see what you button looks like, and then edit it again to make any changes. I’m not sure if live preview is planned for data forms, but it could be a very handy feature.

Okay, so enough chattering already, I’m guessing you’re all itching to make a button already? No? Well it’s your choice, but here’s the button anyway…

So go ahead and create a new set of buttons for your wikidot site… I'm eager to see some of your creations. And while you're here, feel free to leave any feedback about the generator. And while we're on the subject of data forms, do you have any other applications for them up your sleeve?

Edit: There's now a list of buttons others have created on the BMC Button Generator page.

Enjoy the article? Tweet it!

Discussion - No comments yet…21 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
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.