Use Inspect Element to make CSS changes

Understanding how to use Inspect Element is a life-changer for anyone looking to customize their website or blog. In this tutorial, I will show you how to use Inspect Element to make CSS changes.

To access it, click on the element you want to inspect, and clicking on “Inspect” in Chrome and Safari, or “Inspect Element” in Firefox. No plugins are needed.

Once you have identified the line numbers, navigate to your Additional CSS (Dashboard > Appearance > Customize > Additional CSS), and add in the CSS you want to modify. Once you’ve made the updates, click “Publish”.

I recently received a support ticket:

In the Pretty Happy theme by Pretty Darn Cute Design, how do I change the button color of the Newsletter subscription widget?

To answer this specific question for the Pretty Happy theme, we see by using “Inspect Element” that the button is on line 1724 of the stylesheet:

Before:

Once you’ve identified which section you’ll need to change, make the update, and then copy & paste the section you’ve changed, and add to your “Additional CSS”.

After:

On the Restored 316 Facebook group, someone recently asked:

Can someone please tell me where to change the font size and color for the slider and also the title of each post? Thanks.

To answer the specific questions in the Facebook Group post, regarding the Captivate theme:

To change the post title on your blog posts, using Inspect Element, we see that the post titles are controlled on line 839 of the theme’s stylesheet:

Once we have identified that, we would navigate to Dashboard > Appearance > Customize > Additional CSS, and add this:

.entry-title {
font-size: 30px;
}

Change the font size to your desired size (since the theme has it currently set at 30px), and then click the “Publish” button.

To change the background color of your slider, add this to your “Additional CSS”:

.home-featured {
background: #f7f9fc;
}

Changing the color to your desired color.

To change the font size of post titles in your Carousel, add this to your “Additional CSS”:

.home-carousel .title {
font-size: 20px;
}

Changing the font size to your desired size.

Can you tell me how to change the font style, size and color in the Captivating theme Nav menu?

The colors of the Navigation Menu can be changed in the Theme Customizer (Colors > Links), but that will impact colors of links, site-wide. If you are just wanting to change the colors of the navigation, add this to your “Additional CSS”:

.genesis-nav-menu a {
color: #333;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
color: #000;
}

Changing colors to your desired colors.

For the navigation, add this to your “Additional CSS”:

.genesis-nav-menu a,
.nav-primary a {
font-size: 16px;
}

Once again, changing the font-size to your desired size.

To change the font, once you have added your desired font to the theme, add this to your “Additional CSS”:

.genesis-nav-menu {
font-family: ‘Poppins’, sans-serif;
}

Replacing ‘Poppins’, sans-serif; with your desired font.

I’m using the Refined theme. Where do I change the font size for my menus?

For your primary navigation, add this to your “Additional CSS”:

.nav-primary a {
font-size: 12px;
}

For your other navigation:

.genesis-nav-menu {
font-size: 10px;

}

Changing font sizes to your desired size.

Hi all! I’m using the Captivating theme and all my author bio boxes have a light blue space around the outside of them. Where do I switch this?

Using “Inspect Element”, you’ll see that the CSS for the Author Box is on line 779 of the stylesheet:

.author-box {
background: #f7f9fc;
margin-bottom: 30px;
padding: 30px;
}

You can change this color by adding this to your “Additional CSS”:

.author-box {
background: #f7f9fc;
}

I’m using the Refined Theme and I want to put a categories menu on my sidebar but the color doesn’t match my site colors. Is there any way to change the menu color?

Using Inspect Element, we see that the menu background colors are contained in this section of our stylesheet:

.sidebar .widget li:nth-of-type(2n+1) {
background: #FAF9F7;
}

.sidebar .widget li:nth-of-type(2n) {
background: #f0ede5;
}

By adding this to our “Addtional CSS”, and updating the colors, we can match it out branding colors.

If you’re using the Restored 316 Captivating Theme, or any other theme built on the Genesis Framework, and are interested in having me implement this for you, send me a note!

Did you know I offer a theme setup service? Get your Restored 316 theme installed and set up like the demo in under 24 hours. Learn more here.