How To Use Google Chrome Developer Tools to Customize CSS in BoldGrid

The Google Chrome browser includes Developer Tools to assist with the development of a website. For instance, by using its device toolbar you can easily preview websites as they would display on various mobile devices. There are also tools that allow you to Inspect Elements on a page and make edits to the CSS live (without affecting your website for other visitors). This can be useful in developing and previewing CSS modifications to your existing website prior to making those changes live in the BoldGrid CSS Editor. In this guide, you will learn how to use Google’s DevTools to inspect an element, modify the CSS live, and add CSS changes to BoldGrid.

Opening Chrome Developer Tools

1. Open the Google Chrome browser. If your computer does not have this browser, you will need to install Google Chrome in order to utilize the DevTools included. 
2. Visit your website and navigate to a page that you want to make changes on.
3. To open Google Developer Tools you can follow any of the steps below:
   • Press the F12 key.
   • Select the Menu icon, hover over More Tools, and click on Developer tools.
   • Press Ctrl + Shift + I (for Windows/Linux) or Command + Option + I (for Mac).
   • Right-click on an element on your website page and select Inspect.

Now that you are familiar with accessing Google Developer Tools, you will be able to inspect CSS elements to modify them live.

Inspect an Element

Inspecting an element helps to identify the code needed to modify a particular object on your website. Google Developer Tools simplifies this process by displaying and highlighting the specific code that renders the element being inspected.

1. Open Google Developer Tools and click the Select Element icon from the top left.
2. Now, as you hover over elements on your page, they will be highlighted. Click on any object (text, heading, image, etc) that you would like to customize. Notice the Elements tab displays and highlights the HTML for the element.

Inspecting an element is the first step to implementing the code needed to modify the object you want. However, DevTools also allows you to modify the code live.

Making Live Changes to CSS

Google Chrome provides the ability to make changes to the CSS live from within the DevTools Console. This ensures that you are able to preview the changes yourself without affecting the appearance of your website for other visitors. There is no need to refresh your browser to see the changes, they are updated in real-time. In fact, if you refresh your browser after making changes in the Developer Tools console, your changes will be lost because the browser will reload the unmodified version of your website. Using Chrome for live CSS testing also ensures that your live website’s actual code remains untouched.

1. Navigate to a page of your website that you would like to modify the CSS for and inspect an element.
2. Click on the Computed tab. A list of attributes for the inspected element is displayed.
3. Hover over an attribute and click on the arrow icon that appears next to its value. You will be navigated to the Styles tab and the attribute for the selected element will flash briefly.
4. To change an attribute, you can simply click on the value and type in the new value you want. In our example, since we are changing a color attribute, a box displaying the current color value is displayed. Clicking on the box opens a color chooser to easily select a color to preview.

Adding Changes to CSS in BoldGrid

BoldGrid Inspirations are a great way to create your website quickly. However, depending on your personalized content, you may want to customize it further. If you want to edit the CSS for an Inspiration you have already installed, you can use BoldGrid’s Custom CSS Editor, located in the Advanced section of the Customizer.

1. Navigate to a page of your website that you would like to modify the CSS for and inspect an element.
2. Click on the Computed tab. A list of attributes for the inspected element is displayed.
3. Hover over an attribute and click on the arrow icon that appears next to its value. You will be navigated to the Styles tab and the attribute for the selected element will flash briefly.
4. Highlight the code surrounding the attribute and value, right-click on it, and then select Copy.
5. Log into your BoldGrid Administrative Dashboard.
6. Click on Customize from the menu to the left.
7. Click on Advanced.
8. Click to select the Custom JS & CSS option.
9. Under Custom Theme CSS click on the Open Editor button.
10. Press Ctrl + V (Command + V for Mac) to paste the code you copied, into the editor.
NOTE: It may be necessary to override the CSS by entering the following code:
!important;
before the closing brace “}” of the code you copied/pasted. For example:
Before:
.palette-primary a, .palette-primary .link-primary {
color: #337ab7;
}
After:
.palette-primary a, .palette-primary .link-primary {
color: #337ab7;
!important;
}
11. Click the X from the top right corner of the CSS editor to close it.
12. The page will update instantly with your customization(s) for you to preview. Once you are satisfied, click the Save & Publish button to save your changes.

Now that you are familiar with this neat tool found in your Google Chrome browser, you can unleash your CSS editing skills. If you are having trouble feel free to reach out to BoldGrid Support. Also, if you would like to recommend a CSS modification as a feature request for BoldGrid, please submit your feedback. Please be sure to include your version of BoldGrid/WordPress, Inspiration (Theme and Category), and an example (or detailed description) of the customization/feature request. Our developers are always looking for ways to improve and simplify your experience with BoldGrid, to ensure your success.