{"id":10739,"date":"2022-09-11T17:16:06","date_gmt":"2022-09-11T17:16:06","guid":{"rendered":"https:\/\/themenectar.com\/docs\/salient\/?page_id=10739"},"modified":"2022-09-11T17:18:06","modified_gmt":"2022-09-11T17:18:06","slug":"add-new-theme-colors","status":"publish","type":"page","link":"https:\/\/themenectar.com\/docs\/salient\/add-new-theme-colors\/","title":{"rendered":"Add new theme colors"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:86px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<p>Adding additional colors to the Salient options panel can be handled through the child theme functions.php file. Note that each additional color will generate more CSS and increase the page size &#8211; it&#8217;s recommended to only register new colors if truly needed.<\/p>\n\n\n\n<ul><li><strong>Step 1:&nbsp;<\/strong>Open your child theme functions.php (salient-child\/functions.php)<\/li><li><strong>Step 2:&nbsp;<\/strong>Copy the below snippet into the bottom:<\/li><\/ul>\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;shadowfox&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">\nadd_filter(&#039;nectar_additional_theme_colors&#039;,&#039;salient_child_custom_theme_colors&#039;);\n\nfunction salient_child_custom_theme_colors() {\n  $custom_colors = array(\n    &quot;My Awesome Color&quot; =&gt; &#039;my-awesome-color&#039;,\n    &quot;The Best Color&quot; =&gt; &#039;the-best-color&#039;\n  );\n\n  return $custom_colors;\n}\n\n<\/pre><\/div>\n\n\n<ul><li><strong>Step 3:&nbsp;<\/strong>Modify $custom_colors array to add as many colors as needed. The key of each item will be the label that appears when editing elements in the page builder, and the value for each key will be the slug of the color.<\/li><\/ul>\n\n\n\n<div style=\"height:86px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Adding additional colors to the Salient options panel can be handled through the child theme functions.php file. Note that each additional color will generate more CSS and increase the page&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/10739"}],"collection":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/comments?post=10739"}],"version-history":[{"count":3,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/10739\/revisions"}],"predecessor-version":[{"id":10742,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/10739\/revisions\/10742"}],"wp:attachment":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/media?parent=10739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}