Archived topic
Assigning the color value entered in Elements to another div
7 replies · Started by onalti on January 27, 2022
i need to assign the color value of this element to another div.
Element Type > Header > Site Header >Navigation Colors > Navigation Text
elements/class-hero.php
I found something similar on the forum. but it got wrong values.
https://generatepress.com/forums/topic/how-to-get-a-preset-colour-via-php/#post-1508634
function db_custom_css_output() {
$color_settings = wp_parse_args(
get_option( 'generate_settings', array() ),
generate_get_color_defaults()
$css = new GeneratePress_Pro_CSS;
$css->set_selector( '.top-contact' );
$css->add_property( 'color', esc_attr( $color_settings['navigation_text_color'] ) );
return apply_filters( 'db_custom_css_output', $css->css_output() );
}
// Enqueue custom styles within generate-style-inline-css
add_action( 'wp_enqueue_scripts', function() {
wp_add_inline_style( 'generate-style', db_custom_css_output() );
}, 100 );
Hi. I need something like this too, but I can't get the Navigation Text color value. What should I use instead of $generate_settings['navigation_text_color'] .
elements/class-hero.php
$css->set_selector( '.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li > a, .header-wrap #mobile-header:not(.toggled):not(.navigation-stick) .main-nav > ul > li > a, .header-wrap .main-navigation:not(.toggled):not(.navigation-stick) .menu-toggle, .header-wrap .main-navigation:not(.toggled):not(.navigation-stick) .menu-toggle:hover, .main-navigation:not(.toggled):not(.navigation-stick) .mobile-bar-items a, .main-navigation:not(.toggled):not(.navigation-stick) .mobile-bar-items a:hover, .main-navigation:not(.toggled):not(.navigation-stick) .mobile-bar-items a:focus' );
}
$css->add_property( 'color', esc_attr( $options['navigation_text_color'] ) );Hi there,
i have asked Tom to take a look at the best option.
Hi there,
This is difficult as it's connected to the Header Element itself - being able to hook/filter into that wasn't something we really anticipated.
Where is the div you're targeting? Inside the Header Element?
Hi there, Thank you for your interest. I am very glad that I use generatepress premium.
<div class="header-wrap">
<nav class="auto-hide-sticky....>
<div class="inside-navigation">"in here" Hi Tom,
Is there a valid method? It's important for me.
I don't think there is a progmatic solution for this.
As an alternative you could use CSS Variables. Which GP 3.1 Colors module uses:
https://docs.generatepress.com/article/global-colors-overview/
The color fields in the Header Element will accept a color variable.
eg.
var(--my-color-variable)
I guess we have no choice but to add the div class manually. As it will be done again in every update. It would be really nice if we could inject such features from outside, then it would be really flexible and useful.
elementler/class-hero.php
if ( function_exists( 'generate_is_using_flexbox' ) && generate_is_using_flexbox() ) { $css->set_selector( '.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li > a, .header-wrap #mobile-header:not(.toggled):not(.navigation-stick) .main-nav > ul > li > a, .header-wrap .main-navigation:not(.toggled):not(.navigation-stick) .menu-toggle, .header-wrap .main-navigation:not(.toggled):not(.navigation-stick) .menu-toggle:hover, .main-navigation:not(.toggled):not(.navigation-stick) .menu-bar-item:not(.close-search) > a' );
Does the CSS Variable method not achieve what you require ?
