{"id":214,"date":"2015-03-03T03:57:06","date_gmt":"2015-03-03T03:57:06","guid":{"rendered":"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/?p=214"},"modified":"2016-01-16T05:20:26","modified_gmt":"2016-01-16T05:20:26","slug":"customise-css-styles-by-inspection-elements","status":"publish","type":"post","link":"https:\/\/themes.themegoods.com\/grandportfolio\/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 theme<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-952\" src=\"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-content\/uploads\/2015\/03\/Screen-Shot-2559-01-16-at-12.20.07-PM.png\" alt=\"Screen Shot 2559-01-16 at 12.20.07 PM\" width=\"523\" height=\"639\" srcset=\"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-content\/uploads\/2015\/03\/Screen-Shot-2559-01-16-at-12.20.07-PM.png 523w, https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-content\/uploads\/2015\/03\/Screen-Shot-2559-01-16-at-12.20.07-PM-246x300.png 246w, https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-content\/uploads\/2015\/03\/Screen-Shot-2559-01-16-at-12.20.07-PM-49x60.png 49w, https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-content\/uploads\/2015\/03\/Screen-Shot-2559-01-16-at-12.20.07-PM-123x150.png 123w\" sizes=\"(max-width: 523px) 100vw, 523px\" \/><\/p>\n<p>Go to Theme Setting &gt; Script. It allow you to add custom CSS to certain elements styling. There are 4 options available for Desktop,\u00a0iPad Portrait, iPhone Landscape, iPhone Portrait views.<\/p>\n<p><strong>Add Custom CSS styling to Content Builder module<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-321\" src=\"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-content\/uploads\/2015\/03\/Screen-Shot-2558-03-03-at-3.11.12-PM.png\" alt=\"Screen Shot 2558-03-03 at 3.11.12 PM\" width=\"445\" height=\"70\" srcset=\"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-content\/uploads\/2015\/03\/Screen-Shot-2558-03-03-at-3.11.12-PM.png 445w, https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-content\/uploads\/2015\/03\/Screen-Shot-2558-03-03-at-3.11.12-PM-300x47.png 300w, https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-content\/uploads\/2015\/03\/Screen-Shot-2558-03-03-at-3.11.12-PM-60x9.png 60w, https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-content\/uploads\/2015\/03\/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":{"footnotes":""},"categories":[36],"tags":[57,53,55,56,54],"_links":{"self":[{"href":"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-json\/wp\/v2\/posts\/214"}],"collection":[{"href":"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-json\/wp\/v2\/comments?post=214"}],"version-history":[{"count":5,"href":"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-json\/wp\/v2\/posts\/214\/revisions"}],"predecessor-version":[{"id":953,"href":"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-json\/wp\/v2\/posts\/214\/revisions\/953"}],"wp:attachment":[{"href":"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-json\/wp\/v2\/media?parent=214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-json\/wp\/v2\/categories?post=214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themes.themegoods.com\/grandportfolio\/doc\/wp-json\/wp\/v2\/tags?post=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}