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.