Even with a theme that looks as good as Divi, there will always be things that you want to change, modify or customise… believe me.
Maybe you want to change the size of the font or the colour of the links or maybe you’d like to add a few rounded corners to your text widgets or reduce the gap between a few of the Divi theme Modules.
The good news is that you can do all that using CSS and the even better news is that CSS is pretty easy to understand – it’s made up of: the element you want to target, a big curly opening bracket, all the styles you want to modify and a big curly closing bracket… and this is what it looks like:
body {
font-size: 14px;
}
That piece of CSS consists of a selector (body) and a declaration (font-size: 14px;) and the declaration is split into two parts: a property (font-size:) and a value (14px;).
In this post I’ll show you how to find the property you want to modify, make the change, check what the change looks like and make the change permanent by saving the modified / custom CSS.
My Affiliate Links Disclosure
Hi everyone. Just to let you know that many of the links on this site are my affiliate links. What that means is that if you click one of them and buy something… I get a commission. It doesn’t cost you anything extra so I hope that you will use my links.
If you use Firefox hunt down that pesky CSS with Firebug
If you use Firefox and creepy crawly things don’t scare you then Firebug is the tool that will help you find the CSS you’re after.
Firebug is a Firefox add-on and this is how Firefox describe it:
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse.
You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
That’s what it is and this is the official Firebug download page.
Once you’ve installed Firebug take a look at this video by Carrie Dills a Genesis developer who regularly helps people out in the StudioPress forum.
Carrie’s video shows you how to use Firebug to find the CSS for a particular element and then change it in real time. She also shows you how to find where that particular chunk of CSS is located on your theme’s stylesheet.
Firebug is pretty easy to use, but let’s run through the main points that Carrie covered:
- Highlight the text – highlight the text that you want to examine, right click and click “Inspect element with Firebug”. That brings up the Firebug window at the bottom of your screen.
- Examine the Firebug window – the Firebug window is split into two panels. The HTML panel on the left and the CSS panel on the right. The CSS panel is the one we’re interested in.
- Change the CSS properties – in the CSS panel you can change or add new properties and preview the results in your browser in real time.
- Find the CSS in your stylesheet – in the CSS panel to the right of the selector there is a link to your stylesheet, which begins style.css, click that link and your stylesheet will open. Make a note of the line number for the style that you want to change permanently.
The changes that you make to your CSS using Firebug (or Chrome Developer tools) aren’t permanent, they disappear as soon as you refresh the page. That’s good news because it means that you can play around with your CSS without any fear of messing things up so go ahead and play around.
There are several ways to save your edits and make the changes permanent and I’ll look at those later on in the post.
Learning CSS… and maybe a little html
You may never be, or even want to be, a Divi or WordPress developer but knowing a bit of CSS and html can be useful and doing your own styling is very satisfying.
Here are a couple of free web resources to get you started:
CSS guides and tutorials graded as beginner, intermediate and advanced and all the resources use CSS3.
HTML guides and tutorials again graded as beginner, intermediate and advanced and all the resources use HTML5.
For Chrome users, ferret out your CSS with Chrome Developer tools
Right Chrome users if you’re feeling unloved and neglected now it’s your turn for a little tender loving care.
If you’re using Chrome as your browser you can use the Chrome Inspector (also known as Chrome Developer Tools) to inspect your CSS. The Chrome Inspector is almost identical to Firebug but it’s built into Chrome so you don’t have to download anything.
To guide you through how to use the Inspector here is a great video by Andrea Whitmer of Nuts and Bolts Media. Andrea provides WordPress services to bloggers and small businesses as well as producing fabulous videos.
Like I said “The Chrome Inspector is almost identical to Firebug… “ so if you want to play with my post title all you have to do is: highlight the post title, right click, click “Inspect element with Firebug”…. and away you go.
Identify your custom CSS with a commented out description
When you first start adding your own custom CSS it’s easy to remember what each piece does, but as you add more and more… it becomes more difficult.
Make life easier by adding a commented out description to each CSS snippet, and within the snippet, as shown below for two snippets that I use on this website.
The first snippet adds a box with rounded corners to my posts “read more” links and the second adds the word “Menu” above my hamburger menu when viewed on small screen sizes.
Save your custom CSS: stylesheet, ePanel or the Simple Custom CSS plugin
As I mentioned earlier, the changes that you make to your CSS using Firebug (or Chrome Developer tools) aren’t permanent, they disappear as soon as you refresh the page.
To make the changes permanent use one of these three methods:
- Modify your stylesheet – download your stylesheet using FTP, make the changes and upload back to your server. Make a backup copy of your stylesheet before you make any changes… just in case.
- Add your custom CSS to ePanel – if you’re using Divi, or any other Elegant Themes theme, then Navigate to your ePanel via Appearance > Divi Theme Options and from the ePanel General Settings tab go to the bottom of the page to Custom CSS and paste your custom CSS into that section and save.
- Use the Simple Custom CSS plugin – if you use the Simple Custom CSS plugin go to Appearance > Custom CSS and paste your CSS into the Custom CSS area and save.
You can use any of these methods but if you store your custom CSS in your theme’s stylesheet, you will lose it when you update your theme so the ePanel or the CSS plugin are the better choices.
Also Nick Roach of Elegant Themes says “For extensive CSS modifications we recommend that you always use a child theme” so you may want to take a look at Nick’s post How To Create A Child Theme, And Why You Should Be Using One.
Simple Custom CSS – An easy-to-use WordPress Plugin to add custom CSS styles that override Plugin and Theme default styles. This plugin is designed to meet the needs of administrators who would like to add their own CSS to their WordPress website.
CSS Hero plugin version 1.2 – the ultimate point and click all-in-one solution
The process I’ve described so far for modifying your CSS goes something like:
Find the selector you want to change using Firebug / Chrome Developer tools, copy and paste the selector and its attributes into the custom CSS section of the Elegant Themes ePanel, make the changes and check out what it looks like on the live site.
It’s no big deal but wouldn’t it be nice it you could carry out the whole process from a single control panel and watch the effects of your edits as you make them?
Enter CSS Hero the premium plugin that allows you to find, modify and save your custom CSS whilst browsing the actual page you want to edit and view the changes in real time.
That’s a big saving of both time and effort.
Rather than try and explain what CSS Hero does here is a great video from Colin the Dynamik Beaver which is a complete overview of the latest version of the CSS Hero plugin: version 1.2 – Rocket Mode.
CSS Hero version 1.2 – Rocket Mode
Rocket Mode allows CSS Hero to work with any WordPress theme. You can edit your theme’s CSS without having to carry out any configuration – see how Colin generates all the CSS elements in the video and as Colin says “…it’s so good that even my seventy year old grandmother…. could be modifying any WordPress theme in a matter of minutes”.
This feature is still in beta mode so the guys over at CSS Hero recommend using it carefully and being a tad patient with it.
Easily customize WordPress themes, live – CSS Hero is the definitive WordPress plugin to easily customize every property of your themes with an easy and intuitive point and click interface. CSS Hero
Take your pick: Firebug, Chrome Dev tools or the CSS Hero plugin
Although this is a Divi theme website and this post is aimed at Divi theme users, it applies equally to anyone using WordPress and who wants to customise their theme using a little custom CSS.
You can locate and modify your CSS using Firebug or Chrome Developer tools and make permanent changes using one of the three methods I’ve discussed or you can use the CSS Hero plugin if you want a point and click all-in-one solution.
Whichever method you choose I hope that you enjoyed the post and feel more confident making those CSS changes and if you’d like to share this post with others please use my social sharing icons below.
Credits:
My thanks and gratitude to:
Carrie Dills for her Firebug demo video
Andrea Whitmer for her Chrome Inspector/ Dev tools demo video
Colin the Dynamik Beaver for his fabulous overview of the CSS Hero plugin complete with Rocket Mode
