{"id":2088,"date":"2021-12-15T08:28:27","date_gmt":"2021-12-15T08:28:27","guid":{"rendered":"https:\/\/academy.bricksbuilder.io\/?post_type=bricks_article&#038;p=2088"},"modified":"2022-07-27T07:04:31","modified_gmt":"2022-07-27T07:04:31","slug":"builder-mode","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/builder-mode\/","title":{"rendered":"Builder Mode (Custom)"},"content":{"rendered":"\n<p>Starting with Bricks 1.3.7 you can customize the builder mode (color scheme) to your liking by tweaking a few CSS variables. <\/p>\n\n\n\n<p>You first have to set the &#8220;Builder Mode&#8221; under Bricks \u2192 Settings \u2192 Builder to &#8220;Custom&#8221; and save your settings. <\/p>\n\n\n\n<p>The following new setting called &#8220;Builder Mode (Custom)&#8221; should now appear:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"721\" data-lightbox=\"true\"  src=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2021\/12\/bricks-setting-builder-mode-custom-1024x721.png\" alt=\"Builder Mode: Custom\" class=\"wp-image-2090\" srcset=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2021\/12\/bricks-setting-builder-mode-custom-1024x721.png 1024w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2021\/12\/bricks-setting-builder-mode-custom-300x211.png 300w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2021\/12\/bricks-setting-builder-mode-custom-768x541.png 768w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2021\/12\/bricks-setting-builder-mode-custom.png 1040w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Below you can find an example CSS snippet that contains all relevant builder CSS variables:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>&#91;data-builder-mode=custom] {\n  --builder-bg: #f6f4f2;\n  --builder-bg-2: #efebe6;\n  --builder-bg-3: #e7e1da;\n  --builder-bg-accent: #EED8FD;\n\n  --builder-color: #2e271e;\n  --builder-color-description: #76634c;\n  --builder-color-accent: #7209B7;\n  --builder-color-accent-inverse: #fff;\n\n  --builder-color-knob: #c8baaa;\n  --builder-border-color: #d8cec2;\n  --builder-placeholder-opacity: .33;\n\n  --bricks-tooltip-bg:   #16130f;\n  --bricks-tooltip-text: #f6f4f2;\n}<\/code><\/pre>\n\n\n\n<p>If you copy the CSS above, paste it into your &#8220;Builder Mode (Custom)&#8221; setting, and save your settings, your builder should look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" data-lightbox=\"true\"  src=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2021\/12\/bricks-screenshot-builder-mode-custom-1024x576.png\" alt=\"\" class=\"wp-image-2091\" srcset=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2021\/12\/bricks-screenshot-builder-mode-custom-1024x576.png 1024w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2021\/12\/bricks-screenshot-builder-mode-custom-300x169.png 300w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2021\/12\/bricks-screenshot-builder-mode-custom-768x432.png 768w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2021\/12\/bricks-screenshot-builder-mode-custom-1536x864.png 1536w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2021\/12\/bricks-screenshot-builder-mode-custom.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Bricks builder with a custom color scheme (mode)<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Resources<\/h3>\n\n\n\n<ul><li>Color palettes: <a rel=\"noreferrer noopener\" href=\"https:\/\/coolors.co\/palettes\/trending\" target=\"_blank\">https:\/\/coolors.co\/palettes\/trending<\/a><\/li><li>Color palettes: <a rel=\"noreferrer noopener\" href=\"https:\/\/colorhunt.co\" target=\"_blank\">https:\/\/colorhunt.co<\/a><\/li><li>Generate color shades &amp; tints: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.colorhexa.com\" target=\"_blank\">https:\/\/www.colorhexa.com<\/a><\/li><\/ul>\n\n\n\n<p>Note: In custom builder mode, Code element&#8217;s background color changes to a light color scheme.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Starting with Bricks 1.3.7 you can customize the builder mode (color scheme) to your liking by tweaking a few CSS variables. You first have to set the &#8220;Builder Mode&#8221; under Bricks \u2192 Settings \u2192 Builder to &#8220;Custom&#8221; and save your settings. The following new setting called &#8220;Builder Mode (Custom)&#8221; should now appear: Below you can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":104,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/2088"}],"collection":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article"}],"about":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/types\/bricks_article"}],"author":[{"embeddable":true,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/users\/1"}],"version-history":[{"count":7,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/2088\/revisions"}],"predecessor-version":[{"id":2839,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/2088\/revisions\/2839"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=2088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}