{"id":15720,"date":"2018-09-19T11:03:19","date_gmt":"2018-09-19T15:03:19","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=15720"},"modified":"2023-12-18T13:52:25","modified_gmt":"2023-12-18T18:52:25","slug":"customizing-the-color-palette","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-crio-supertheme-product-guide\/customizing-the-color-palette\/","title":{"rendered":"Customizing the Color Palette in BoldGrid Crio"},"content":{"rendered":"\n

$\"\"$ <\/p>\n

BoldGrid Crio gives you a variety of color palettes that you can use when creating a business website<\/a>. You have an Active Palette as well as a list of Saved Palettes. You will also have the ability to create a custom color palette, which is part of what designers refer to as their style guide when creating a website. The following article will walk you through the usage of color palettes within your Crio theme to help you understand how the color positions are applied to the elements within your BoldGrid Crio website.<\/p>\n

<\/iframe><\/p>\n<h2 id=\"creating-your-color-palette\">Creating Your Color Palette<\/h2>\n<ul>\n<li>In the Dashboard, navigate to <b>Appearance<\/b> → <b>Customize<\/b><\/li>\n<li>In the Customizer menu, navigate to <b>Colors<\/b><\/li>\n<\/ul>\n<p>In this Customizer section, you have the ability to set color positions 1 through 6, with a live preview of how the change affects your sites appearance. You can drag colors to different positions, as well as click them to open the color picker tool to change them.<\/p>\n<h2 id=\"to-customize-the-color-palette\">To Customize the Color Palette<\/h2>\n<ul>\n<li>In the Dashboard, navigate to <b>Appearance<\/b> → <b>Customize<\/b><\/li>\n<li>In the Customizer menu, navigate to <b>Colors<\/b><\/li>\n<\/ul>\n<h2 id=\"changing-colors-within-the-active-palette\">Changing Colors Within the Active Palette<\/h2>\n<ul>\n<li>Select a single color that you wish to change in the Active Palette<\/li>\n<li>Enter the numeric value for the color or select it from the <b>Color Picker<\/b><\/li>\n<li>Use the bottom slider to adjust color opacity<\/li>\n<li>Click <b>Done <\/b>to update the color<\/li>\n<li>Click the thumbtack symbol to add your Active Palette to the Saved Palettes list<\/li>\n<li>Click <b>Publish<\/b> to save your changes<\/li>\n<\/ul>\n<h2 id=\"using-the-suggested-palettes\">Using the Suggested Palettes<\/h2>\n<ul>\n<li>Click the <b>Suggest Palettes<\/b> button<\/li>\n<li>Select an available palette or click <b>Suggest Palettes<\/b> to generate a new options<\/li>\n<li>Click the lock icon under a color to keep it in future suggested palettes<\/li>\n<li>Select an available palette<\/li>\n<li>Click <b>Done<\/b><\/li>\n<li>Click <b>Publish<\/b> to save your changes<\/li>\n<\/ul>\n<h2 id=\"moving-colors-in-the-palette\">Moving Colors in the Palette<\/h2>\n<ul>\n<li>Hover over a color in your Active Palette<\/li>\n<li>Click and drag the color to reorder it in your list<\/li>\n<li>The Customizer preview updates with the new color arrangement<\/li>\n<li>Click <b>Publish<\/b> to save your changes<\/li>\n<\/ul>\n<h2 id=\"palette-positions\">Palette Positions<\/h2>\n<ul>\n<li>Position 1 = primary accent color<\/li>\n<li>Position 2 = secondary accent color<\/li>\n<li>Position 3 = designer’s choice<\/li>\n<li>Position 4 = designer’s choice<\/li>\n<li>Position 5 = neutral color<\/li>\n<li>Position 6 = neutral color used for the default site background<\/li>\n<\/ul>\n<p>Both Position 1 and Position 2 must be visible on the Neutral Color to ensure text is visible.<\/p>\n<p>The Neutral Color is listed as the 5th and 6th positions in the color palettes because the BoldGrid Post and Page Builder only has access to the first 5 colors of this palette when used in conjunction with Crio, while the 6th position is your base color set in the Customizer for your sites default background color. This allows you to duplicate the color within Blocks, giving you the options you need for creating modern designs for your <a href=\"https:\/\/www.boldgrid.com\/\">WordPress Website<\/a>.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>BoldGrid Crio gives you a variety of color palettes that you can use when creating a business website. You have an Active Palette as well as a list of Saved Palettes. You will also have the ability to create a custom color palette, which is part of what designers refer to as their style guide […]<\/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":"Customizing the Color Palette in Crio | BoldGrid Crio","bgseo_description":"BoldGrid Crio gives you a variety of color palettes that you can use when creating your website. You have an Active Palette as well as a list of Saved Palettes. You will also have the ability to create a custom color palette.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[573],"tags":[684,29],"class_list":["post-15720","post","type-post","status-publish","format-standard","hentry","category-boldgrid-crio-supertheme-product-guide","tag-color-palette","tag-customizer","feature-type-free","experience-level-getting-started"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15720","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=15720"}],"version-history":[{"count":7,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15720\/revisions"}],"predecessor-version":[{"id":121474,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15720\/revisions\/121474"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=15720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=15720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=15720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}