0
Under review

Identify Elements in Color Palette

Carlos E 4 years ago updated by Harry J (Products Manager) 4 years ago 1

Is it possible to display which element(s) are associated with each color in the palette? This way the user will know what components of the site are effected, before making changes to colors.

Answer

Answer
Under review


Thank you for your question, Carlos. To identify what elements are associated, you can view the themes SCSS file. You can find all of our themes on GitHub, which will show the relationship between the elements and what color they are assigned to.


You can view an example of that relationship here, in one of our newer themes, Swifty.


You can reference the color configuration documentation for further explanation of how it is applied within the theme itself.


The neutral color will always be the last color in the palette, and it is set within the themes config.php file.. An example of that can be found here within the themes configuration file.


This array would produce the color palette I have attached underneath of the code.:


array(
                        'default' => true,
                        'format' => 'palette-primary',
                        'neutral-color' => '#ffffff',
                        'colors' => array(
                                '#ca5215',
                                '#333333',
                                '#ca5215',
                                '#333333',
                                '#000000',
                        ),
                ),

http://easycaptures.com/fs/uploaded/1169/9273770610.png


When the SCSS compiles, it writes to css/color-palettes.css within the theme itself. This occurs whenever you make a change in the Customizer.


I will add a feature request to our planning board. The biggest obstacle would be figuring out the best place to display information like this.


You also have the option of using FireFox or Chrome, and their developer tools to view the styling, and color associated. Here is some information regarding using those.


https://developer.mozilla.org/en-US/docs/Tools


https://developer.chrome.com/devtools

Answer
Under review


Thank you for your question, Carlos. To identify what elements are associated, you can view the themes SCSS file. You can find all of our themes on GitHub, which will show the relationship between the elements and what color they are assigned to.


You can view an example of that relationship here, in one of our newer themes, Swifty.


You can reference the color configuration documentation for further explanation of how it is applied within the theme itself.


The neutral color will always be the last color in the palette, and it is set within the themes config.php file.. An example of that can be found here within the themes configuration file.


This array would produce the color palette I have attached underneath of the code.:


array(
                        'default' => true,
                        'format' => 'palette-primary',
                        'neutral-color' => '#ffffff',
                        'colors' => array(
                                '#ca5215',
                                '#333333',
                                '#ca5215',
                                '#333333',
                                '#000000',
                        ),
                ),

http://easycaptures.com/fs/uploaded/1169/9273770610.png


When the SCSS compiles, it writes to css/color-palettes.css within the theme itself. This occurs whenever you make a change in the Customizer.


I will add a feature request to our planning board. The biggest obstacle would be figuring out the best place to display information like this.


You also have the option of using FireFox or Chrome, and their developer tools to view the styling, and color associated. Here is some information regarding using those.


https://developer.mozilla.org/en-US/docs/Tools


https://developer.chrome.com/devtools