Wikidot Design & Development

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.