{"id":118,"date":"2017-01-30T11:23:30","date_gmt":"2017-01-30T11:23:30","guid":{"rendered":"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/?p=118"},"modified":"2017-01-30T11:23:30","modified_gmt":"2017-01-30T11:23:30","slug":"customise-css-styles-by-inspection-elements","status":"publish","type":"post","link":"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/customise-css-styles-by-inspection-elements\/","title":{"rendered":"Customise CSS styles by Inspection Elements"},"content":{"rendered":"<p>If you want to make change on existing style of an element. You will need to find CSS selector of that element. The best way is to inspect site with browser developer tool. There are few tools which help you archive that.<\/p>\n<p><strong>Chrome Developer Tools<\/strong><\/p>\n<p>If you use Chrome, or have Chrome available, you already have built in browser tools to help you inspect your site.<\/p>\n<ul>\n<li>Here are more <a href=\"https:\/\/developers.google.com\/chrome-developer-tools\/\" target=\"_blank\">information<\/a><\/li>\n<li>Chrome Developer Tools <a href=\"https:\/\/developer.chrome.com\/devtools\/docs\/videos\" target=\"_blank\">Video Tutorials<\/a><\/li>\n<\/ul>\n<p><strong>Firebug Extension<\/strong><\/p>\n<p>Firebug is a browser extension built for Firefox, but also has light versions for Safari, Chrome, and Internet Explorer. You can download it for free from below link.<\/p>\n<ul>\n<li><a href=\"http:\/\/getfirebug.com\/\" target=\"_blank\">Firebug Browser Extension<\/a><\/li>\n<li>Firebug <a href=\"http:\/\/www.youtube.com\/watch?v=tdIk2PztcL0\" target=\"_blank\">Video Tutorials<\/a><\/li>\n<\/ul>\n<p><strong>Add Custom CSS to all pages<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-119\" src=\"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2559-10-18-at-6.40.02-PM.png\" alt=\"\" width=\"1014\" height=\"871\" srcset=\"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2559-10-18-at-6.40.02-PM.png 1014w, https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2559-10-18-at-6.40.02-PM-300x258.png 300w, https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2559-10-18-at-6.40.02-PM-768x660.png 768w, https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2559-10-18-at-6.40.02-PM-60x52.png 60w, https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2559-10-18-at-6.40.02-PM-150x129.png 150w\" sizes=\"(max-width: 1014px) 100vw, 1014px\" \/><\/p>\n<p>You can add global custom CSS code for all pages via Theme Setting &gt; Script and you can put the code into different screen size there.<\/p>\n<p><strong>Add Custom CSS styling to Content Builder module<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-120\" src=\"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-03-03-at-3.11.12-PM.png\" alt=\"\" width=\"445\" height=\"70\" srcset=\"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-03-03-at-3.11.12-PM.png 445w, https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-03-03-at-3.11.12-PM-300x47.png 300w, https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-03-03-at-3.11.12-PM-60x9.png 60w, https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-content\/uploads\/2017\/01\/Screen-Shot-2558-03-03-at-3.11.12-PM-150x24.png 150w\" sizes=\"(max-width: 445px) 100vw, 445px\" \/><\/p>\n<p>Some of content builder modules have &#8220;Custom CSS&#8221; field so you can enter CSS styling for example <em>font-size:14px<\/em> to overwrite styling of module content.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to make change on existing style of an element. You will need to find CSS selector of that element. The best way is to inspect site with browser developer tool. There are few tools which help you archive that. Chrome Developer Tools If you use Chrome, or have Chrome available, you already [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[69,70,71,72,73,74],"_links":{"self":[{"href":"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-json\/wp\/v2\/posts\/118"}],"collection":[{"href":"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":0,"href":"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-json\/wp\/v2\/posts\/118\/revisions"}],"wp:attachment":[{"href":"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-json\/wp\/v2\/media?parent=118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-json\/wp\/v2\/categories?post=118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandcarrental\/doc\/wp-json\/wp\/v2\/tags?post=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}