The Google Chrome browser includes Developer Tools<\/em> 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<\/strong>.<\/p>\n

Opening Chrome Developer Tools<\/h2>\n
\n
$\"Google$ <\/a>Open the Google Chrome browser. If your computer does not have this browser, you will need to install Google Chrome<\/a> in order to utilize the DevTools included. \n
<\/div>\n<\/li>\n
$\"Example$ <\/a>Visit your website and navigate to a page that you want to make changes on.\n
<\/div>\n<\/li>\n
To open Google Developer Tools you can follow any of the steps below:\n
\n
Press the F12<\/strong> key.<\/li>\n
$\"Open$ <\/a>Select the Menu<\/strong> icon, hover over More Tools<\/strong>, and click on Developer tools<\/strong>.\n
<\/div>\n<\/li>\n
Press Ctrl + Shift + I<\/strong> (for Windows\/Linux) or Command + Option + I<\/strong> (for Mac).<\/li>\n
$\"Open$ <\/a>Right-click on an element on your website page and select Inspect<\/strong>.\n<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
Now that you are familiar with accessing Google Developer Tools, you will be able to inspect CSS elements to modify them live.<\/p>\n
<\/p>\n
Inspect an Element<\/h2>\n
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.<\/p>\n
\n
$\"Developer$ <\/a>Open Google Developer Tools and click the Select Element<\/strong> icon from the top left.\n
<\/div>\n<\/li>\n
$\"Page$ <\/a>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<\/em> tab displays and highlights the HTML for the element.\n<\/div>\n<\/li>\n<\/ol>\n
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.<\/p>\n
<\/p>\n
Making Live Changes to CSS<\/h2>\n
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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
NOTE:<\/b> In this tutorial, we will be modifying the color of the Page Titles<\/em> displayed on certain pages. The code in this guide is unique to the website developed for the screenshots in our examples. You should use the unique code you find while inspecting an element to modify your CSS accordingly.<\/div>\n
\n
\n
\n
\n
\n
$\"Page$ <\/a>Navigate to a page of your website that you would like to modify the CSS for and inspect an element.\n
<\/div>\n<\/li>\n
$\"Computed$ <\/a>Click on the Computed<\/strong> tab. A list of attributes for the inspected element is displayed.\n
<\/div>\n<\/li>\n
$\"Color$ <\/a>Hover over an attribute and click on the arrow icon that appears next to its value. You will be navigated to the Styles<\/strong> tab and the attribute for the selected element will flash briefly.\n
<\/div>\n<\/li>\n
$\"Page$ <\/a>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.\n
<\/div>\n<\/li>\n<\/ol>\n
<\/p>\n
Adding Changes to CSS in BoldGrid<\/h2>\n
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<\/strong> for an Inspiration you have already installed, you can use BoldGrid’s Custom CSS Editor<\/a>, located in the Advanced<\/i> section of the Customizer<\/i>.<\/p>\n
\n
\n
\n
$\"Page$ <\/a>Navigate to a page of your website that you would like to modify the CSS for and inspect an element.\n
<\/div>\n<\/li>\n
$\"Computed$ <\/a>Click on the Computed<\/strong> tab. A list of attributes for the inspected element is displayed.\n
<\/div>\n<\/li>\n
$\"Color$ <\/a>Hover over an attribute and click on the arrow icon that appears next to its value. You will be navigated to the Styles<\/strong> tab and the attribute for the selected element will flash briefly.\n
<\/div>\n<\/li>\n
$\"Color$ <\/a>Highlight the code surrounding the attribute and value, right-click on it, and then select Copy<\/strong>.\n
<\/div>\n<\/li>\n
$\"BoldGrid$ <\/a>Log into your BoldGrid Administrative Dashboard<\/a>.\n
<\/div>\n<\/li>\n
$\"Customize$ <\/a>Click on Customize<\/strong> from the menu to the left.\n
<\/div>\n<\/li>\n
$\"Advanced$ <\/a>Click on Advanced<\/strong>.\n
<\/div>\n<\/li>\n
$\"Custom$ <\/a>Click to select the Custom JS & CSS<\/strong> option.\n
<\/div>\n<\/li>\n
$\"Open$ <\/a>Under Custom Theme CSS<\/em> click on the Open Editor<\/strong> button.\n
<\/div>\n<\/li>\n
$\"CSS$ <\/a>Press Ctrl + V<\/strong> (Command + V<\/strong> for Mac) to paste the code you copied, into the editor.\n<\/div>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
NOTE:<\/b> It may be necessary to override the CSS by entering the following code:
\n`!important;<\/code> \nbefore the closing brace “}” of the code you copied\/pasted. For example: \nBefore: \n.palette-primary a, .palette-primary .link-primary { \ncolor: #337ab7; \n}<\/code> \nAfter: \n.palette-primary a, .palette-primary .link-primary { \ncolor: #337ab7; \n!important; \n}<\/code><\/div>\n`\n\n\n\n\n<\/a>Click the X<\/strong> from the top right corner of the CSS editor to close it.\n<\/div>\n<\/li>\n <\/a>The page will update instantly with your customization(s) for you to preview. Once you are satisfied, click the Save & Publish<\/strong> button to save your changes.\n<\/div>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nNOTE:<\/b> Be sure to check all your other pages and elements to preview the new appearance and check that the CSS modification did not change something unexpectedly.<\/div>\n\n\n\n\nNow that you are familiar with this neat tool found in your Google Chrome browser, you can unleash your CSS editing skills.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":" 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 […]<\/p>\n","protected":false},"author":215,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[151],"tags":[],"class_list":["post-10237","post","type-post","status-publish","format-standard","hentry","category-wordpress-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/10237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=10237"}],"version-history":[{"count":46,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/10237\/revisions"}],"predecessor-version":[{"id":163355,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/10237\/revisions\/163355"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=10237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=10237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=10237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Inspect an Element<\/h2>\nInspecting 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.<\/p>\n