Wikidot Design & Development

Site Launch - RoaringApps.com

Application compatibility for Mac OS X Lion the wikidot way.

Today I am very pleased to announce the launch of my latest wikidot project, RoaringApps.com. This site was deemed special enough for me (a notorious scrooge when it comes to money) to splash out and buy a domain name.

Yes, it is a shameless attempt at recreating the popularity of http://snowleopard.wikidot.com - but it's worth it, I swear. You see, it always frustrated me how the aforementioned site was so popular, but did not use wikidot to its greatest potential. So I went about creating RoaringApps, and what was a going to be a small little project grew, and grew, and grew… into the most technically advanced wikidot site I have created thus far.

Word wrap in error blocks

BMC Quickies

Quickie: Fix over-hanging URLs in wikidot error blocks.

Recently, RSS feeds have been having some trouble loading, and they're sometimes replaced with an error block that explains this. One problem though: the URL is often too long for the containing div.

Error processing the feed "http://blog.wikidot.com/feed/pages/category/blog/t/Wikidot+Blog". The feed can not be accessed or contains errors.

How do we fix this? Word wrap!

Extend length of external theme input box

BMC Quickies

Quickie: Make the site manager a little more user friendly with this quick little code snippet.

The input box for external themes in the site manager has always annoyed me; it's hardly big enough to fit even the smallest of URLs (excluding relative URLs). You may or may not be equally annoyed by this. Either way, here's how to fix it:

#sm-appearance-external-url {
    width: 450px;
}

Add that in a CSS module on your admin:manage page, or in your site's custom CSS, and enjoy the freedom that a larger input box brings.

2010 in Review

2010 in review banner

A look back at the year that was 2010.

As another year draws to a close, I decided it would be nice to reflect back on the year that was here at wikidot, and in particular this here little blog. For me, it is hard to believe that only nine months ago I started up css3.wikidot.com as a place to document my continued learning of CSS and the wonderful wikidot platform. It started off with a rather rough theme that probably only worked properly in Safari and Chrome, but as my knowledge of CSS and web design has grown, so too has the design of this site, and it should now display correctly in most major browsers, even if it’s still a little rough in IE.

Alongside the blog I said I was going to release some new themes for wikidot, and then promptly released just one theme in about 8 months. This has since changed, and there are now a number of quality BMC themes available on the wikidot themes site, each a little better than the last as my knowledge of CSS continues to develop. I want to continue to provide the community with quality free themes, and early in 2011 you will hopefully see a number of new BMC themes.

Subtle CSS3 box shadows

Create a sophisticated infobox with subtle CSS3 box shadows.

After reading an article about a page-curling CSS3 box shadow, I was thinking of other ways to make use of the versatile property; this is what I came up with - a sophisticated infobox with shadows that make it pop.

shadow-box-all.png

Add a tweet button to your wikidot site

Go viral on twitter by integrating simple sharing on your wikidot site.

twitter share popup

I've just added a new snippet to the ever-growing list of user-contributed code at snippets.wikidot.com that allows you to easily add the official Twitter tweet button to your wikidot site. All you have to do is use the following code…

[[include :snippets:tweet-button
|url=http://example.com
|text=Check out this awesome page on @wikidot
|via=twitter-username
|count=vertical
]]

Animated page entry with CSS3

Create a subtle yet effective page load effect with pure CSS3.

With the continued development of modern browsers, more and more things are possible with CSS3 animations, and they grow ever more complex. Yet it is the simple things that may be most effective in enhancing user experience. Today we’ll look at one of these very simple ways of using CSS3 animations - using them to progressively fade in a page’s content.

Building on the example used by Apple recently with the release of the Beatles on iTunes, we’ll build a very simple ‘teaser’ page that fades in.

Wikidot saving page dialogues

The easiest way to style wikidot saving page dialogues.

When making a wikidot theme, one of the hardest things to style is the saving page dialogue, because until now, the only way to see it properly has been to save a page over and over, and try to catch a glimpse before it disappears again. Well, at least this is how I did it. Until a couple of weeks ago, that is, when I decided there must be an easier way. So I made a html document that shows the dialogues permanently. It's a little bit rough, but it gets the job done.

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.