WP Engine Genesis Themes

Resources and help for the Genesis community

You are here: Genesis Framework / How to Customize and Troubleshoot CSS

How to Customize and Troubleshoot CSS

You can inspect the CSS of your site using your browser’s inspector tool. This will allow you customize the CSS and live-preview your changes, as well as troubleshoot any CSS issues that might be occurring on the site. You can experiment with the code until you have the customization just right or until you figure out what is causing the issue and then transfer the updated CSS to your site.

In this tutorial, we will use Chrome’s inspector tool to show you how to customize the background color of the Genesis eNews Extended widget that appears in the Primary Sidebar of the Genesis Sample child theme demo.

Note: See Additional Resources (at the bottom of this article) for information on how to use the inspector tool in your favorite browser.

In this article:

Step 1: Open the inspector tool.

Right click on the element you’d like to change and select Inspect as shown below.

The Chrome DevTools Elements panel will appear at the bottom of the screen (shown below) where you can see the HTML code of the page on the left and the CSS code for the selected element on the right.

Step 2: Enter and preview a new background color.

  1. In the CSS panel, click the background color hex code (#f5f5f5) to make it editable and then enter a new color’s hex code.
  2. If you don’t see the correct code in the CSS panel, click the Inspect button. Then point to the element and click on it to select it.

In the example shown below, we’ve changed the background color from #f5f5f5 to #cccccc.

You can experiment with multiple colors until you find the perfect one and you can use a site like https://www.colorhexa.com/ to find hex codes for the colors you’d like to try.

You’ll see a preview of the color change every time you enter a new hex code. However, only you can see this change. The new color will not be viewable on the live site until the code has been transferred to your site and saved.

Step 3: Transfer the new code to your site.

After you’ve found the perfect color, highlight the updated code, right click on it, and select Copy.

Then go to Appearance > Customize > Additional CSS to add it to your site.

  1. Paste the CSS code that you copied from the inspector tool. Note that since we are only customizing the background color in this example, we deleted the padding rule since it’s not going to be changed.
  2. Click Publish to save the code and publish it to your site.

Alternatively, you can edit your child theme’s style.css file on your computer using your favorite text editor and then upload the changes via FTP. See the FTP Guide for details on how to connect to your site via FTP and edit your child theme’s files.

Additional Resources

See the following resources for details on how to use the inspector tool in your favorite web browser: