{"id":526,"date":"2020-05-20T13:37:28","date_gmt":"2020-05-20T13:37:28","guid":{"rendered":"https:\/\/academy.bricksbuilder.io\/?post_type=bricks_article&#038;p=526"},"modified":"2023-05-11T12:09:12","modified_gmt":"2023-05-11T12:09:12","slug":"theme-styles","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/theme-styles\/","title":{"rendered":"Theme Styles"},"content":{"rendered":"\n<p>Adjust the default styling of your site layout, elements, colors, links, typography, etc. throughout your site via Theme Styles for a consistent and easy-to-maintain design system for your entire site.<\/p>\n\n\n\n<p>Access the Theme Styles by clicking the <strong>Settings<\/strong> (gear) icon in the builder toolbar. Then go to <strong>Theme Styles<\/strong>.<\/p>\n\n\n\n<p>To create your own Theme Style, click the <strong>Create<\/strong> (plus) icon and provide a name.<\/p>\n\n\n\n<p>Apply any styling changes you want in the control groups below (like setting your fonts under &#8220;Typography&#8221;, etc.).<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Theme Styles | Bricks\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/UgoMtcacMus?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>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conditions\">Conditions<\/h2>\n\n\n\n<p>Open the <strong>Conditions<\/strong> control group to tell Bricks where on your site this theme style should be used.<\/p>\n\n\n\n<p>To apply a theme style to your entire website open the <strong>Conditions<\/strong> control group, click <strong>Add Condition<\/strong>, and select <strong>Entire Website<\/strong>.<\/p>\n\n\n\n<p>You can set as many theme style conditions as you want.<\/p>\n\n\n\n<p>Let&#8217;s say you want to apply a Theme Style to two specific landing pages and your home page. You simply add a condition, click on Individual, and select your two landing pages. Then you add another condition and select <strong>Front page<\/strong>.<\/p>\n\n\n\n<p>These are the available control groups:<\/p>\n\n\n\n<ul>\n<li>CONDITIONS<\/li>\n\n\n\n<li>GENERAL<\/li>\n\n\n\n<li>COLORS<\/li>\n\n\n\n<li>CONTENT<\/li>\n\n\n\n<li>LINKS<\/li>\n\n\n\n<li>TYPOGRAPHY<\/li>\n\n\n\n<li>ELEMENT &#8211; SECTION<\/li>\n\n\n\n<li>ELEMENT &#8211; CONTAINER<\/li>\n\n\n\n<li>ELEMENT &#8211; BLOCK<\/li>\n\n\n\n<li>ELEMENT &#8211; DIV<\/li>\n\n\n\n<li>ELEMENT &#8211; ACCORDION<\/li>\n\n\n\n<li>ELEMENT &#8211; ALERT<\/li>\n\n\n\n<li>ELEMENT &#8211; BUTTON<\/li>\n\n\n\n<li>ELEMENT &#8211; CAROUSEL<\/li>\n\n\n\n<li>ELEMENT &#8211; CODE<\/li>\n\n\n\n<li>ELEMENT &#8211; COUNTER<\/li>\n\n\n\n<li>ELEMENT &#8211; DIVIDER<\/li>\n\n\n\n<li>ELEMENT &#8211; FORM<\/li>\n\n\n\n<li>ELEMENT &#8211; HEADING<\/li>\n\n\n\n<li>ELEMENT &#8211; ICON BOX<\/li>\n\n\n\n<li>ELEMENT &#8211; IMAGE<\/li>\n\n\n\n<li>ELEMENT &#8211; IMAGE GALLERY<\/li>\n\n\n\n<li>ELEMENT &#8211; LIST<\/li>\n\n\n\n<li>ELEMENT &#8211; NAV MENU<\/li>\n\n\n\n<li>ELEMENT &#8211; POST CONTENT<\/li>\n\n\n\n<li>ELEMENT &#8211; META DATA<\/li>\n\n\n\n<li>ELEMENT &#8211; POST NAVIGATION<\/li>\n\n\n\n<li>ELEMENT &#8211; RELATED POSTS<\/li>\n\n\n\n<li>ELEMENT &#8211; TAXONOMY<\/li>\n\n\n\n<li>ELEMENT &#8211; POST TITLE<\/li>\n\n\n\n<li>ELEMENT &#8211; PRICING TABLES<\/li>\n\n\n\n<li>ELEMENT &#8211; PROGRESS BAR<\/li>\n\n\n\n<li>ELEMENT &#8211; SEARCH<\/li>\n\n\n\n<li>ELEMENT &#8211; SIDEBAR<\/li>\n\n\n\n<li>ELEMENT &#8211; SLIDER<\/li>\n\n\n\n<li>ELEMENT &#8211; ICON LIST<\/li>\n\n\n\n<li>ELEMENT &#8211; SVG<\/li>\n\n\n\n<li>ELEMENT &#8211; TABS<\/li>\n\n\n\n<li>ELEMENT &#8211; TEAM MEMBERS<\/li>\n\n\n\n<li>ELEMENT &#8211; TESTIMONIALS<\/li>\n\n\n\n<li>ELEMENT &#8211; TEXT<\/li>\n\n\n\n<li>ELEMENT &#8211; VIDEO<\/li>\n\n\n\n<li>ELEMENT &#8211; WORDPRESS<\/li>\n\n\n\n<li>WOOCOMMERCE &#8211; BUTTON<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"exclude\">Exclude condition<\/h3>\n\n\n\n<p><meta charset=\"utf-8\">Since Bricks 1.3.6 you&#8217;ll be able to set exclude conditions for any theme style. To exclude a specific condition you need to toggle the exclude control. Excluding a certain condition will let Bricks know that if the condition applies in a certain scenario, then that theme style won&#8217;t be used.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"287\" height=\"563\" data-lightbox=\"true\"  src=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2020\/05\/theme-style-exclude-condition.png\" alt=\"\" class=\"wp-image-2030\" srcset=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2020\/05\/theme-style-exclude-condition.png 287w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2020\/05\/theme-style-exclude-condition-153x300.png 153w\" sizes=\"(max-width: 287px) 100vw, 287px\" \/><figcaption class=\"wp-element-caption\">Use this theme style everywhere except for the Privacy Policy page<\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"export\">Export<\/h2>\n\n\n\n<ol>\n<li>Inside the builder go to <code>Settings &gt; Theme styles<\/code><\/li>\n\n\n\n<li>Select the theme style you wish to export<\/li>\n\n\n\n<li>Click the <strong>Edit<\/strong> (pencil) icon<\/li>\n\n\n\n<li>Click the <strong>Export<\/strong> (download) icon<\/li>\n\n\n\n<li>Download the generated JSON file to your computer<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"import\">Import<\/h2>\n\n\n\n<ol>\n<li>Inside the builder go to <code>Settings &gt; Theme styles<\/code><\/li>\n\n\n\n<li>Click the <strong>Create<\/strong> (plus) icon<\/li>\n\n\n\n<li>Click the <strong>Import<\/strong> (upload) icon<\/li>\n\n\n\n<li>Select the theme style JSON file from your computer, and upload it<\/li>\n<\/ol>\n\n\n\n<p>If a theme style with the same name already exists in your installation, the import will fail. This is to prevent any theme styles with identical names.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Style Hierarchy<\/h2>\n\n\n\n<p>Bricks automatically applies the most specific styles to your site. Theme Styles are preceded by page settings (as they are more specific). And page settings are preceded by elements settings on an individual page. This allows you to easily mix and match styles to your exact requirements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adjust the default styling of your site layout, elements, colors, links, typography, etc. throughout your site via Theme Styles for a consistent and easy-to-maintain design system for your entire site. Access the Theme Styles by clicking the Settings (gear) icon in the builder toolbar. Then go to Theme Styles. To create your own Theme Style, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":171,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/526"}],"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\/526\/revisions"}],"predecessor-version":[{"id":4266,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/526\/revisions\/4266"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}