- This topic has 7 replies, 3 voices, and was last updated 5 years, 2 months ago by
Tom.
-
AuthorPosts
-
April 7, 2021 at 2:00 pm #1725414
George
I am trying to use the background body color set in the Customizer inside a CSS selector. I can see from this page where the background color is set:
$wp_customize->add_setting( 'generate_settings[background_color]', array( 'default' => $defaults['background_color'], 'type' => 'option', 'sanitize_callback' => 'generate_sanitize_hex_color', 'transport' => 'postMessage', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'generate_settings[background_color]', array( 'label' => __( 'Background Color', 'generatepress' ), 'section' => 'body_section', 'settings' => 'generate_settings[background_color]', ) ) );So inside my functions.php, I have:
function gp_customize_css() { ?> <style type="text/css"> body:not(.full-width-content).single-post .site-main article { border-bottom: 60px solid <?php echo get_theme_mod('generate_settings[background_color]'); ?> !important; } </style> <?php } add_action('wp_head', 'gp_customize_css');I don’t see my color inherited, though. Am I missing something?
April 7, 2021 at 6:02 pm #1725539Elvin
StaffCustomer SupportHi there,
Can you link us to the page in question to check if this
gp_customize_css()outputs anything on the actual page? This should give us a clue.If I may suggest:
What happens if you wrap
add_action('wp_head', 'gp_customize_css');with after_setup_theme?Example:
add_action( 'after_setup_theme', function(){ add_action('wp_head', 'gp_customize_css'); } );April 8, 2021 at 3:11 am #1725934George
The
gp_customize_css()outputs the code normally apart from the color value. So, it basically generates:
border-bottom: 60px solid !important;Wrapping the function with
after_setup_themedidn’t work.I have actually successfully added custom Customizer color options for various settings and displayed them just fine:
// Extra Customizer color settings function gp_customize_color( $wp_customize) { $wp_customize->add_section( 'gp_comment_section', array( 'title' => $wp_customize->get_panel( 'generate_colors_panel' ) ? __( 'Comments', 'generatepress' ) : __( 'Colors', 'generatepress' ), 'priority' => 80, 'panel' => $wp_customize->get_panel( 'generate_colors_panel' ) ? 'generate_colors_panel' : false, ) ); $wp_customize->add_setting( 'gp_comment_color', array( 'default' => '#ff4b4b', 'sanitize_callback' => 'generate_sanitize_hex_color', 'transport' => 'refresh', ) ); $wp_customize->add_setting( 'gp_background_link_color_hover', array( 'default' => '#fcefe7', 'sanitize_callback' => 'generate_sanitize_hex_color', 'transport' => 'refresh', ) ); $wp_customize->add_setting( 'gp_blog_box_shadow_color', array( 'default' => '#FEC445', 'sanitize_callback' => 'generate_sanitize_hex_color', 'transport' => 'refresh', ) ); $wp_customize->add_setting( 'gp_blog_post_title_underine_hover_color', array( 'default' => '#005D55', 'sanitize_callback' => 'generate_sanitize_hex_color', 'transport' => 'refresh', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gp_comment_color', array( 'label' => __( 'Base Color', 'generatepress' ), 'section' => 'gp_comment_section', 'settings' => 'gp_comment_color', ) ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gp_background_link_color_hover', array( 'priority' => 20, 'label' => __( 'Background Link Color Hover', 'generatepress' ), 'section' => 'body_section', 'settings' => 'gp_background_link_color_hover', ) ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gp_blog_box_shadow_color', array( 'priority' => 20, 'label' => __( 'Blog Box Shadow Color', 'generatepress' ), 'section' => 'body_section', 'settings' => 'gp_blog_box_shadow_color', ) ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gp_blog_post_title_underine_hover_color', array( 'priority' => 20, 'label' => __( 'Blog Post Title Underline Hover Color', 'generatepress' ), 'section' => 'body_section', 'settings' => 'gp_blog_post_title_underine_hover_color', ) ) ); } add_action('customize_register', 'gp_customize_color'); //Output Customizer CSS function gp_customize_css() { ?> <style type="text/css"> .comments-title::before, .comment-reply-title::before { background-color: <?php echo get_theme_mod('gp_comment_color'); ?>; } .comment-content .reply a::after, .comment-content .reply a:hover { color: <?php echo get_theme_mod('gp_comment_color'); ?>; } .comment-content .reply a::after, .comment-content .reply a:hover { color: <?php echo get_theme_mod('gp_comment_color'); ?>; } .entry-content a:hover, .author-container .by-author a:hover { background-color: <?php echo get_theme_mod('gp_background_link_color_hover'); ?>; } .entry-content p a, .entry-content ul li a, .author-container .by-author a { border-bottom: 6px solid <?php echo get_theme_mod('gp_background_link_color_hover'); ?>; box-shadow: inset 0px -2px 0px <?php echo get_theme_mod('gp_background_link_color_hover'); ?>; } .blog .dynamic-content-template .blog-container:hover { box-shadow: 5px 5px 0 <?php echo get_theme_mod('gp_blog_box_shadow_color'); ?>; } .blog .dynamic-content-template:hover h2 a { background: linear-gradient(to right,<?php echo get_theme_mod('gp_blog_post_title_underine_hover_color'); ?> 0,<?php echo get_theme_mod('gp_blog_post_title_underine_hover_color'); ?> 100%); background-position: 0 85%; background-repeat: repeat-x; background-size: 100% 2px; -webkit-transition: background-image .25s ease; transition: background-image .25s ease; } body:not(.full-width-content).single-post .site-main article:not(.comment-body) { border-bottom: 60px solid <?php echo get_theme_mod('generate_settings[background_color]'); ?> !important; } </style> <?php } add_action('wp_head', 'gp_customize_css');All other CSS apart from the dynamic color from the following CSS, work:
body:not(.full-width-content).single-post .site-main article:not(.comment-body) { border-bottom: 60px solid <?php echo get_theme_mod('generate_settings[background_color]'); ?> !important;Somehow the
gp_customize_cssfunction does not recognise the default GP background color.April 9, 2021 at 5:24 am #1727478George
Still looking for a solution to this. Not sure if and how to include
add_action( 'customize_register', 'generate_customize_register' );, maybe Tom would know…April 9, 2021 at 8:22 am #1727884Tom
Lead DeveloperLead DeveloperInstead of
get_theme_mod(), try this:generate_get_option( 'background_color' );April 9, 2021 at 9:03 am #1727932George
Hey Tom. Still no luck.
@media (min-width: 769px) { body:not(.full-width-content).single-post .site-main article:not(.comment-body) { border-bottom: 60px solid <?php generate_get_option( 'background_color' ); ?>; } }outputs
border-bottom: 60px solid;April 9, 2021 at 10:12 am #1727998George
Ok, it works, Tom. Forgot to echo it!
@media (min-width: 769px) { body:not(.full-width-content).single-post .site-main article:not(.comment-body) { border-bottom: 60px solid <?php echo generate_get_option( 'background_color' ); ?>; } }Thank you!
April 10, 2021 at 9:51 am #1729018Tom
Lead DeveloperLead DeveloperNo problem! 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.