Using additional CSS to tweak a site
Ok so you’ve found a theme you really like, are really happy with it, but then you think, but I’d like to just move that, tweak that, change a colour. This is how you do that with out breaking everything!
To do this all you need is a modern browser, access to your page, a guide, for when you are stuck, such as https://www.w3schools.com/ and a basic understanding of HTML and CSS.
To begin formatting the page, go to the front end of your site and select customise. Most good themes have a lot of settings, but the reason for this talk is they don’t always have enough!
Then once in, go to aditional CSS, and you can write directly in here.
So why not edit your theme?
If you are familiar with CSS styling, then why not edit the theme itself? There’s 2 real reasons:
- It’s bad practice. If it’s a public theme, any time the theme is updated, it will wipe all your changes, this way will stay if the theme updates, though in theory you may need to tweak it if any of your changes get overwritten. You could stop updating the theme, but this is bad for security as updates may patch flaws in the theme.
- This method also allows for play, experimentation and for rapid prototyping in a way which only shows to you, unless you hit save.
So how do I know what to write?
This is the tricky part, but the key to this is your browser, right select ‘inspect’ will bring up your browsers code inspector. In here you’ll see a crazy nest of code which at first looks indecipherable, so next we’ll look at the basics of what does what and show you how to edit in here, and then copy the changes into your ‘additional CSS’ area.