{"id":9829,"date":"2017-09-15T14:17:10","date_gmt":"2017-09-15T18:17:10","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=9829"},"modified":"2023-12-13T13:54:09","modified_gmt":"2023-12-13T18:54:09","slug":"how-to-use-the-custom-css-editor","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-themes\/how-to-use-the-custom-css-editor\/","title":{"rendered":"How to use the Custom CSS Editor"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><div class=\"video-responsive\">\n<p><iframe loading=\"lazy\" title=\"Crio - Using the custom CSS editor\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/x2wNizpc-II?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/div>\n<p>BoldGrid is completely customizable and allows you to change the style of elements used on your website. The proper way to make these custom CSS changes is to use the <strong>Custom CSS Editor<\/strong>. This guide will show you how to use the Advanced tools within the Customizer for adding <b>Custom CSS<\/b> to change the style of elements on your BoldGrid website. To illustrate this, we will be adding a stroke and a text shadow to the Home page&rsquo;s Call to Action&rsquo;s heading. <\/p>\n<p>&nbsp;<\/p>\n<div class=\"alert alert-info\" role=\"alert\">For tips on using CSS styling with your text, we recommend using <a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\">the guide located here at w3.org<\/a><\/div>\n<h2 id=\"how-to-use-the-custom-css-editor-\">How to use the Custom CSS Editor <\/h2>\n<ol class=\"article-list\">\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login-300x142.png\" alt=\"\" width=\"300\" height=\"142\" class=\"alignright size-medium wp-image-9839\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login-300x142.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login-768x365.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login-1024x486.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login-250x119.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login-550x261.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login-800x380.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login-379x180.png 379w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login-632x300.png 632w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login-1053x500.png 1053w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-01-login.png 1567w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><a href=\"https:\/\/www.boldgrid.com\/support\/boldgrid-inspirations-plugin-product-guide\/logging-in\/\" target=\"_blank\" rel=\"noopener noreferrer\">Login to your BoldGrid site<\/a>\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize-300x142.png\" alt=\"\" width=\"300\" height=\"142\" class=\"alignright size-medium wp-image-9840\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize-300x142.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize-768x365.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize-1024x486.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize-250x119.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize-550x261.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize-800x380.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize-379x180.png 379w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize-632x300.png 632w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize-1053x500.png 1053w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/08\/9829-02-customize.png 1567w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Select Customize\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced-300x198.png\" alt=\"\" width=\"300\" height=\"198\" class=\"alignright size-medium wp-image-11444\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced-300x198.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced-768x506.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced-1024x674.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced-250x165.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced-550x362.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced-800x527.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced-273x180.png 273w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced-456x300.png 456w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced-759x500.png 759w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-03-advanced.png 1446w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Select Advanced\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss-300x198.png\" alt=\"\" width=\"300\" height=\"198\" class=\"alignright size-medium wp-image-11445\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss-300x198.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss-768x506.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss-1024x674.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss-250x165.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss-550x362.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss-800x527.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss-273x180.png 273w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss-456x300.png 456w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss-759x500.png 759w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-04-customcss.png 1446w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Select Custom JS &amp; CSS\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode-300x198.png\" alt=\"\" width=\"300\" height=\"198\" class=\"alignright size-medium wp-image-11446\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode-300x198.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode-768x506.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode-1024x674.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode-250x165.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode-550x362.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode-800x527.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode-273x180.png 273w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode-456x300.png 456w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode-759x500.png 759w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-05-addcsscode.png 1446w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>In the CSS Editor, add your Custom Style. For this example, we are customizing the &ldquo;h1&rdquo; class for the home page&rsquo;s Call To Action heading by adding a text stroke and shadow.\n<pre>.h1 {\r\n-webkit-text-stroke-width: 1px;\r\n-webkit-text-stroke-color: #864200;\r\ntext-shadow:\r\n      3px 3px 0 #000,\r\n     -1px -1px 0 #000,  \r\n      1px -1px 0 #000,\r\n     -1px 1px 0 #000,\r\n      1px 1px 0 #000;\r\n}<\/pre>\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish-300x198.png\" alt=\"\" width=\"300\" height=\"198\" class=\"alignright size-medium wp-image-11447\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish-300x198.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish-768x506.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish-1024x674.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish-250x165.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish-550x362.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish-800x527.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish-273x180.png 273w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish-456x300.png 456w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish-759x500.png 759w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2017\/11\/9829-06-save-publish.png 1446w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Select Publish\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<div style=\"clear: both;\">.<\/div>\n\n<\/ol>\n<p>&nbsp;<\/p>\n<p>Congratulations! You now know how to change the style of elements using the <strong>Custom CSS Editor<\/strong> in the Advanced Customizer Tools. This method can be used to style, or override existing styles on any element within your BoldGrid website. <\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>BoldGrid is completely customizable and allows you to change the style of elements used on your website. The proper way to make these custom CSS changes is to use the Custom CSS Editor. This guide will show you how to use the Advanced tools within the Customizer for adding Custom CSS to change the style [&hellip;]<\/p>\n","protected":false},"author":529,"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":"How to use the Custom CSS Editor","bgseo_description":"This guide will illustrate how to use BoldGrid's Custom CSS Editor in the Customizer for adding Custom CSS to change the style of elements. ","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[764],"tags":[],"class_list":["post-9829","post","type-post","status-publish","format-standard","hentry","category-boldgrid-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/9829","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\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=9829"}],"version-history":[{"count":13,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/9829\/revisions"}],"predecessor-version":[{"id":121257,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/9829\/revisions\/121257"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=9829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=9829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=9829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}