Things to keep an eye out for when doing this

As a final note, I have gathered a few problems I often run in to, so beware:

  • CSS is a nested series of overrides, so sometimes you can’t work out what is overwriting what, and even though your additional CSS properties should override the template ones, something higher up is overriding it. In which case, though it is a bit code-ugly adding !important before the semicolon should help to override other styles. use with caution (this one is specially for Ciaran)
  • American spellings. color with no u, yes it’s annoying but the browser will not process British English spellings!
  • Use the inspector to help you check your code, it will suggest things, and warn you if something is invalid. If you get stuck, use examples from https://www.w3schools.com/
  • for anything that has a value in it (other than 0) make sure to add units, or you will confuse your browser, common units are %, em, px, and so on. It’s easy to forget but the browser needs to know ’10’ of what…
  • Colour on the web is normally stored in hexadecimal values notated with a #
    #000000 is black, and #ffffff is white, with the values stored going from 0-7 and then a-f, in 3 pairs. You can, if you like just use 3 values, but this lowers the number of colour gradations.
  • Alternatively, you can use RGB values if you use the following syntax rgb(255, 0, 0), if you like
  • If you want some transparency in your colours, you can add a fourth value to your colour so for example #0007 (#00000077) would be 50% transparent black, great if your design has overlays, but it can be expensive (i.e. slow) for the browser to compute, so use it sparingly. And as we saw (live) if anything is modifying transparency using a jquery, it won’t work!
  • Be wary of any theme element which is being animated in some way: If this is happening, it’s because you have some javascript modifying properties over time, which might interfere with what you are trying to do. A typical effect which fades an item in or out might break your CSS by overriding it.