Archived topic
Global colors & integration with page builders
3 replies · Started by Krzysztof on October 22, 2021
Hello,
I'm playing with the new global color option and the possibility to add new custom colors - I'm doing this primarily in the context of using a page builder (Beaver Builder) and the possibility to apply these theme based colors to my BB layouts. I find that this is possible with the custom colors as they are applied to the global style as :root variables, which makes it easy to style BB modules/elements via custom CSS. Fantastic - now I have live colors via the theme's customizer!
However, the customizer's color section have some default sections, like Header, Navigation, Buttons, Content, Forms, etc. - and I see that the colors set there are not added to the global :root variables - which is a great pity since it would be even greater if I could use the category colors and for example apply button colors via the Button section colors, not the custom colors on top.
Is there any way (like via code) to be be able to apply the category colors as root variables to global styles?
Additionally - is there a way to add the text labels below the custom colors (perhaps also reduce the number of color dots per row), so that you don't have to hover over each one, if you don't remember which color is which?
Thanks for the great work and new fantastic functionalities.
Hi there,
thanks for testing and the great feedback on the color system.
Dynamic colors can only be defined in the Global Colors pallet.
And then you need to assign those colors to the various elements.
On a clean install of GP you will find the default color pallet has already been applied to some of the theme elements for you. And we are updating the Sites in our Library to have global colors already assigned.
Hmmm... interesting, so just to be clear you would like the color label to always be visible ? Or would you want to see the full color variable ?
Thanks David for your reply.
After rethinking this the global color pallet would be sufficient for my needs (using a page builder) - I'd add colors there and apply the variables in my child theme's styles file (+ disable the dedicated theme color sections that I would not use when using a page builder).
As far as making the labels visible and making the custom color palette better visible (+ disable the unused color sections), I applied some simple styling to the customizer via the below snippet (perhaps it could be useful for someone in the future):
// Styles to the WordPress Customizer
function my_customizer_styles() { ?>
<style>
#customize-control-generate_settings-global_colors .generate-color-manager--item {
flex: 1 0 40%;
margin-bottom: 10px!important;
}
#customize-control-generate_settings-global_colors button.components-button:before {
content: attr(aria-label);
position: absolute;
left: 33px;
top: 5px;
width: 100px;
text-align: left;
color: black;
font-size: 11px;
}
#customize-control-generate_header_colors_title,
#customize-control-generate_primary_navigation_colors_title,
#customize-control-generate_navigation_search_colors_title,
#customize-control-generate_buttons_colors_title,
#customize-control-generate_forms_colors_title,
#customize-control-generate_footer_widgets_colors_title,
#customize-control-generate_footer_bar_colors_title {
display: none!important;
}
</style>
<?php }
add_action( 'customize_controls_print_styles', 'my_customizer_styles', 999 );This does the job for me and the global custom colors become a really great function in the theme!
Thanks for the great development on my favorite (and only) theme :)
Thats great to hear and thanks for sharing your solution !! :)
