Wikidot Design & Development

Recent changes to Wikidot base CSS

Some changes to the wikidot-base.css file that you may have missed.

Okay, so this post comes in two parts. The first being a little realisation I just had - if you have two pieces of text you want to compare, why not use wikidot? Create a page and save it with the first piece of text. Then edit that page and replace it with the second. Now go to history, and compare the two versions - so simple, yet I have never thought of it before.

This leads nicely on to the second part of the post (which is significantly bigger, and thus gets the title all to itself) - I used the method described above to compare a version of the wikidot base CSS I had saved from April 15, 2010, with a version from today; and there a quite a few differences - some which have gone unannounced, and some that I cannot explain. Now some of these changes may have happened a couple of months ago, and some only yesterday, but nonetheless, I'll try to get through them all. Here goes…

New: h3 is now bold

I actually noticed this earlier today while working on the previous post - all of a sudden the post taglines were bold, and I couldn't figure out why. Well now I know - they sneakily changed the h3 font-weight from normal to bold.

h3 {
    font-weight: bold;
    font-size: 130%;

Customise the colour of CSS code

Change the way you look at CSS codes on your site by customising the colour of selectors, declarations, numbers and more.

#selector {
      property: value;
      property2: #fff;
      property3: 120px;

Through the magic of the internet, when you put some CSS on your wikidot site wrapped between [[code type="css"]] and [[/code]] (ie. in a code block), the code is automatically coloured, to help differentiate between different code items. But did you know that you can change the colour of those items? Just use the CSS selectors outlined in the table below in your custom theme to add some style to code blocks on your wikidot site.

Selector Changes colour of Example (bold)
.code .hl-default Default text If no other colour is specified
.code .hl-code Default text If no other colour is specified
.code .hl-brackets Curly Brackets #top-bar {
.code .hl-identifier Selectors #side-bar {
.code .hl-reserved Declaration Property border-top: none
.code .hl-special Pseudo Classes a:hover
.code .hl-string Declaration Value background: none
.code .hl-number Numbers width: 100%
.code .hl-var Variables color: #d5d5d5

There are more selectors than displayed above that are currently supported at wikidot, but I'm still trying to work out what some of them do. Once I've worked it out, I'll let you know.

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.