How To Use Google Chrome Developer Tools to Customize CSS in BoldGrid | 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. Google Chrome Web Browser DetailsOpen 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. Example Site: Gallery PageVisit 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.
    • Open Developer tools from More tools menu inside of Main MenuSelect 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).
    • Open Developer tools using InspectRight-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. Developer tools Select Element button highlightedOpen Google Developer Tools and click the Select Element icon from the top left.
  2. Page Title element inspected and code highlightedNow, 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. Page Title element inspected and code highlightedNavigate to a page of your website that you would like to modify the CSS for and inspect an element.
  2. Computed tab displayed and highlightedClick on the Computed tab. A list of attributes for the inspected element is displayed.
  3. Color attribute selected and highlightedHover 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. Page Title color attribute changed live and highlightedTo 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. Page Title element inspected and code highlightedNavigate to a page of your website that you would like to modify the CSS for and inspect an element.
  2. Computed tab displayed and highlightedClick on the Computed tab. A list of attributes for the inspected element is displayed.
  3. Color attribute selected and highlightedHover 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. Color attribute code Copy menu option highlightedHighlight the code surrounding the attribute and value, right-click on it, and then select Copy.
  5. BoldGrid Username and Password fields and Login button highlightedLog into your BoldGrid Administrative Dashboard.
  6. Customize option highlightedClick on Customize from the menu to the left.
  7. Advanced option highlightedClick on Advanced.
  8. Custom JS CSS highlightedClick to select the Custom JS & CSS option.
  9. Open Editor button highlightedUnder Custom Theme CSS click on the Open Editor button.
  10. CSS Editor paste codePress Ctrl + V (Command + V for Mac) to paste the code you copied, into the editor.
  11. X Close CSS Editor buttonClick the X from the top right corner of the CSS editor to close it.
  12. Save and Publish button highlightedThe 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.

 

Get more for free by signing up with BoldGrid Central Create Account

Leave a Reply