Wikidot Design & Development

BMC Creative unleashed

Welcome to

I finally splashed out that hard earned $9.95 and bought a domain for the site - and to go with it, a semi re-branding of BMC WebDesign. You see, I always felt WebDesign was a little bit too specific - I could only really do one thing under that name… design for the web. But now, with BMC Creative, I can confidently commit all sorts of fraud business related entrepreneurship. Even though it may have happened on a whim, I'm happy with the new name and look forward to expanding what services I offer.

What I blog about here at will for the most part remain the same, however now that the domain isn't css3, I might start posting about more than just web design. Time will tell.

read more6 comments

tags — bmc site

Changing text selection colour

How to change the colour of text selections with CSS

This one's pretty simple - changing the colour of text selections to suit your theme.

/* Webkit */
::selection {
    background-color: rgba(255,111,111,0.9);
    color: #000;
/* Mozilla */
::-moz-selection {
    background-color: rgba(255,111,111,0.9);
    color: #000;

As above, it will change the text selection all across your site. For a more specific use, you can remove the selection background from images when they are dragged (which seems to occur by default in Firefox).

img::selection {background-color: transparent;}
img::-moz-selection {background-color: transparent;}

Try dragging the two images below (Safari/Chrome only; Firefox has this behaviour automatically):


Specific Notification System

Customised user messages the Wikidot way.

The premise is simple — you want to show a message to a user based on an action they have just performed. Ordinarily, you would create a new page containing the message, and perhaps some links to lead them elsewhere in the site. While this solution works just fine, it's not as streamlined as being able to show the message on an existing page of your site that the user would probably click through to anyway. Enter my Specific Notification System.

As always, the idea came to me just as I was dozing off to sleep, meaning I had to get up and act on it straight away, else I would never get some shut-eye. The system uses the recently revised limit="0" ListPages parameter to only show a message if a specific string is included in the URL, something we can control when a user completes a certain action.

So, to start things off, we setup a ListPages module with limit="@URL|0" - meaning by default no module body will be shown. Which page you select doesn't really matter, given we're not going to be using anything from the selected page itself. I also added a URL attribute prefix so as not to confuse other modules on the same page.

[[module ListPages category="blog" limit="@URL|0" urlAttrPrefix="i" separate="no"]]
[!-- Define message here --]

New site theme - 2011

Welcome to the new BMC Blog

After finally finding a few spare hours, I decided it was time to give this site a makeover. The old theme was beginning to get on my nerves a little - new bugs were showing up, the CSS was getting bloated and pages seemed to take longer to load. With the new theme, I decided to take the site back to its roots, with a focus on the blog itself. Not only is this reflected in the design of the theme, but I also removed a lot of unnecessary, sometimes never-completed pages from the site that served no real purpose.

With the new theme I’ve incorporated a couple of my latest wikidot ideas, which you’ll be able to see if you dig deep enough, and that I’ll share with you in the coming days.

While I’ve tried to complete as much as I can with minimal site down-time, the update to the site is still only partially completed, meaning some sections (such as the button generator) are currently unavailable. Once these more complex pages have been migrated to the new theme, I’ll open them back up.

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 +_favourite%%number%%]]
This app is in your favourites list. [[button set-tags -_favourite%%number%% text="Remove from favourites."]]

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

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

Secure user profile contact form

BMC Quickies

Quickie: Easily add a secure contact form to your per-site user profiles

On several sites I've seen per-site user profiles that have a link to PM this user, which leads to the user account page. Often this is less than ideal, because it means users have to leave the familiarity of your site for the Wikidot account page, which they may never have seen before. The alternative is to setup a MailForm module on your profile:_template page with to="%%created_by%%". I've tested this over at RoaringApps, and it works a-okay, only sending the message to the specified user.

Enhancing the pagepath field

Increase the usability of the pagepath data form field with a little bit of CSS trickery.

When I first started using the pagepath field in Wikidot data forms not all that long ago, I could not for the life of me figure out how it worked. I would enter a new name in the field and save the form - but where was that name I just entered? It was nowhere to be seen. Editing the form would confirm that it had not been saved - but why not? I'm sure I entered it.

The trick, of course, is to press the enter key after inputting the new page name. However, as far as I am aware, this is not documented anywhere. If I couldn't work it out, given I'm rather literate with the Wikidot way of life, what chance does an anonymous visitor have of knowing what to do when faced with the pagepath field. Enter CSS to the rescue.

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 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
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.