This article was last updated on the December 21, 2016.
Adding Custom CSS
We're going to be changing the color of our prompt box title for this tutorial.
First of course, we'll need to know what the CSS class or div ID is for the specific part we want to change, there's a few ways you can do this, we won't be going in depth into that within this article, but you can use Firebug which is for Firefox, you can find that add-on here. Alternatively you can use Chrome developer tools, which there's a great guide to here.
If you've chosen to go with Firebug, there's a great tutorial on that here.
In our case, the code we need to use is:
Now we have the code we need, let's head to the Customizer, once you've opened up the Customizer, click on Custom
Enter your CSS in your Custom CSS area, like this:
As soon as you enter the CSS code, you'll see the changes reflected in the preview area of the Customizer like this:
If you're happy with the changes go ahead and click on Save & Publish at the top of the Customizer.
Then we can see that shows a browser message when we enter it like this:
Enter the code you want and then click on Save & Publish.
Formatting in the customizer
When possible in the customizer, always try to format your code, it's make it much easier to read and understand, rather than a jumbled up mess. Ideally you should write the code first using a text editor, such as [Notepadd++](Notepad link) (Windows) or [Coda](Coda link) (Mac)
This ensures, if for some reason you need a developer to debug your site, or anything else, that the code is easy to read and understand.
Congrats! Through this article, you've learnt more about the WordPress customizer and how to use the different aspects of the custom code section to further enhance your site and make edits.