Wikidot Design & Development

...and done. Welcome back

Welcome to the all new css3.wikidot.com - the home of BMC WebDesign

It took me longer than I had expected, and there’s still a few things that need tweaking, but I am now pleased to present you with the all new site design for css3.wikidot.com.
Among the many changes that have taken place, here’s a few:

  • an all new home page (of which I am rather proud) - this adds some much needed functionality to default landing page.
  • new support documentation pages - they’re empty at the moment, but I’ll fill them up before releasing my premium themes.
  • a new theme request service built on wikidot data forms. I think I’ve got it pretty much sorted so that submissions can be kept private if wanted.

Site upgrades about to begin

If you watch this site, prepare to be inundated with emails.

In a couple of days time I will begin to give this site a makeover. In addition to a whole new design, I’ll be slightly rearranging the site to prepare for the imminent release of premium and custom themes.

The design will be cross-browser friendly to allow greater access, while still taking full advantage of the CSS3 features that I love. Once the upgrade is finished I'll outline the changes made right here.
New content to be added to the site will revolve around support documentation, a more organised way of presenting themes, and the infrastructure to allow a (hopefully) seamless custom theme request form, built using wikidot data forms. I've also made a much more functional home page that will replace the static page in use at the moment.

Remove RSS link from ListPages module

It has nearly been two weeks since my last post, mainly because I’m (supposed to be) studying for exams, but I just couldn’t resist myself, so here’s a very quick little tip.

RSS link

When you use the ListPages module to generate an RSS feed, a little icon with a link to that feed is automatically added to the bottom of the list-pages-box. But if you already have a more pronounced link to your RSS feed elsewhere on your site, you may want to remove this link. By just adding the code below, now you can…

.list-pages-box .feedinfo {
    display: none;
}

Change the text before page tags

Not happy with page tags:? Read on for details of how to change it…

Here’s another quick little entry to keep you entertained while you drink your coffee.

Have you ever wanted to change the wording that comes before the tags at the bottom of your wikidot page? Probably not, but if you ever do, now you’ll know how (well, if you decide to read the rest of the post, that is).

Using a little bit of CSS trickery, you can hide the default text that reads page tags: and replace it with anything of your liking - even big hairy toe, but it’s probably best to stick with something that’s relevant.

Customise footnotes and hovertips simultaneously

Kill two birds with one stone1 and customise footnotes and inbuilt hovertips at the same time with less than 20 lines of code.

While I’m busy researching for our first Guide Series post, I thought I had better give you all something to nibble on, so here’s a (very) quick guide to changing the appearance of footnotes and inbuilt hover tips (the tips that popup when you hover over the options in the default wikidot footer) - they use the same hovertip class, so we can customise the two at the same time. As always, you should change the colours used to match your site’s theme (unless the theme you chose for your site is blue, in which case you chose well).

So, using the hovertip class, we’ll define the background colour, change the colour of the border, round the corners and give it a drop shadow to give the appearance of it hovering over the page. Oh, and of course we’ll also add a gradient to the background.

Infobox with Pure CSS 3D Ribbon

Add some style to your site with this pure CSS3 infobox, featuring a 3D ribbon header. Oh, and did we say there’s no images!

Pure CSS Infobox

This is the content of the infobox. It is made with pure CSS - no images. Of course, you can change the colour of the background and header to match your site's theme.
Pretty cool, huh?

Infoboxes are a great way of displaying important information to visitors of your site - and they work even better when they’re easy on the eye. So today we’re brining you an infobox with a twist - it has a ribbon-style header that adds a touch of 3D class to your site. Plus, for the anti-photoshoppers out there, it’s made with pure CSS - which means you don’t need to worry about fiddling around with images or increasing the page loading time.

So how are we going to achieve this?, I hear you ask. Well, as you may or may not know, when browsers render a border, they are created as angles. If you increase the width of the border, that angle becomes a triangle. And by making all but one of the border sides transparent, you end up with a triangle on a transparent background. If you’d like to read more on this, there’s a great explanation here.
Now, back to the infobox. The image below shows the different components that will make up this box and header.

infobox-outline.png

Enhance the ratings module

Make the ratings module actually look good with this quick and easy fix.

The default ratings module, widely used across wikidot sites, is far from attractive and tends to blend into the page, making it difficult to spot and reducing the number of visitors that rate the page. Unfortunately, it is something that is rarely altered in custom themes, meaning you’re left with the default configuration. But never mind, because we’re here with a solution. Below we’ll run you through the alterations you need to make to customise the ratings box and make it stand out from the page, hopefully increasing the number of visitors that feel compelled to click the little + button.

The Markup

For those of you that don’t know how to implement the ratings on the site - here’s a quick guide. First, in your Site Manager (yoursite.wikidot.com/admin:manage), click the Page Ratings link in the left sidebar and enable page ratings for the categories you want to allow people to rate. Then, on each page you want the ratings module, just add the following code:

[[module Rate]]

Remember, that if you want to add the ratings module to an entire category, just add it to the live template (category:_template) - it’s much quicker.

The CSS

Okay, now for the cool part - let’s customise this baby and make it look good.

Our new sidebar

Another update to the site - a brand new sidebar & about this site slideout tip

I’ve never really been happy with the sidebar for this site. While the old one served its purpose well, it always just seemed to be in the way and a little hard on the eye. So I decided it was time to give it a makeover - in line with the other site adjustments made just a few days ago.

Taking inspiration from the many, many sites on the internet, I decided to go with separating the individual content of the sidebar into numerous containers - a technique popular among blogs, and one that I have always wanted to replicate in Wikidot. This type of design is not only easy on the eye, but also helps to distinguish the sidebar’s content. The new sidebar also allowed me to add some much needed colour to the site in the form of the headers of the sidebar boxes.
In redesigning the sidebar, I also took the liberty of increasing the site’s width from 900px to 1050px - a more comfortable width in my opinion (maybe just because of my widescreen computer?).

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.