[Resolved] Default customizer colours

Home Forums Support [Resolved] Default customizer colours

Home Forums Support Default customizer colours

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #2439477
    David

    Hi, for the past year I have used the following two functions to set the default customizer colours in functions.php, and the front end has always updated accordingly. With a new dev site I’ve set up today, function 2 below is updating the site preview in appearance > customize > colours, but not the actual front end. I’ve double-checked and there is no caching issue. Could you please help? I’m wonderding wheter something has changed in a recent GP update to stop this working?

    // FFDV Generate default GP colour palette for customizer
    add_filter( ‘generate_option_defaults’, ‘ffdv_filtered_colour_palette’ );
    add_filter( ‘option_generate_settings’, ‘ffdv_filtered_colour_palette’ );

    function ffdv_filtered_colour_palette( $palette ) {

    $palette[‘global_colors’] = array(
    array(
    ‘name’ => __( ‘Grey’, ‘pms’ ),
    ‘slug’ => ‘grey’,
    ‘color’ => ‘#101011’,
    ),
    array(
    ‘name’ => sprintf( __( ‘Grey %s’, ‘pms’ ), ‘2’ ),
    ‘slug’ => ‘grey-2’,
    ‘color’ => ‘#323233’,
    ),
    array(
    ‘name’ => sprintf( __( ‘Grey %s’, ‘pms’ ), ‘3’ ),
    ‘slug’ => ‘grey-3’,
    ‘color’ => ‘#5c5c5d’,
    ),
    array(
    ‘name’ => sprintf( __( ‘Grey %s’, ‘pms’ ), ‘4’ ),
    ‘slug’ => ‘grey-4’,
    ‘color’ => ‘#a7a8aa’,
    ),
    array(
    ‘name’ => sprintf( __( ‘Grey %s’, ‘pms’ ), ‘5’ ),
    ‘slug’ => ‘grey-5’,
    ‘color’ => ‘#d7d8d9’,
    ),
    array(
    ‘name’ => sprintf( __( ‘Grey %s’, ‘pms’ ), ‘6’ ),
    ‘slug’ => ‘grey-6’,
    ‘color’ => ‘#e9e9ea’,
    ),
    array(
    ‘name’ => sprintf( __( ‘Grey %s’, ‘pms’ ), ‘7’ ),
    ‘slug’ => ‘grey-7’,
    ‘color’ => ‘#f2f2f2’,
    ),
    array(
    ‘name’ => __( ‘Blue’, ‘pms’ ),
    ‘slug’ => ‘blue’,
    ‘color’ => ‘#102d69’,
    ),
    array(
    ‘name’ => sprintf( __( ‘Blue %s’, ‘pms’ ), ‘2’ ),
    ‘slug’ => ‘blue-2’,
    ‘color’ => ‘#344c7f’,
    ),
    array(
    ‘name’ => sprintf( __( ‘Blue %s’, ‘pms’ ), ‘3’ ),
    ‘slug’ => ‘blue-3’,
    ‘color’ => ‘#0093d3’,
    ),
    array(
    ‘name’ => sprintf( __( ‘Blue %s’, ‘pms’ ), ‘4’ ),
    ‘slug’ => ‘blue-4’,
    ‘color’ => ‘#40aede’,
    ),
    array(
    ‘name’ => sprintf( __( ‘Blue %s’, ‘pms’ ), ‘5’ ),
    ‘slug’ => ‘blue-5’,
    ‘color’ => ‘#e5f4fb’,
    ),
    array(
    ‘name’ => __( ‘Green’, ‘pms’ ),
    ‘slug’ => ‘green’,
    ‘color’ => ‘#95c11f’,
    ),
    array(
    ‘name’ => sprintf( __( ‘Green %s’, ‘pms’ ), ‘2’ ),
    ‘slug’ => ‘green-2’,
    ‘color’ => ‘#b0d157’,
    ),
    array(
    ‘name’ => __( ‘Base’, ‘pms’ ),
    ‘slug’ => ‘base’,
    ‘color’ => ‘#ffffff’,
    ),

    );

    return $palette;

    }

    // FFDV Generate extended default GP colour options for customizer
    add_filter( ‘generate_color_option_defaults’, ‘ffdv_ext_filtered_colour_defaults’ );
    add_filter( ‘option_generate_settings’, ‘ffdv_ext_filtered_colour_defaults’ );
    function ffdv_ext_filtered_colour_defaults( $ext_col_defaults ) {

    $ext_col_defaults[‘top_bar_background_color’] = ”;
    $ext_col_defaults[‘top_bar_text_color’] = ”;
    $ext_col_defaults[‘top_bar_link_color’] = ”;
    $ext_col_defaults[‘top_bar_link_color_hover’] = ”;
    $ext_col_defaults[‘header_background_color’] = ‘var(–base)’;
    $ext_col_defaults[‘header_text_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘header_link_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘header_link_hover_color’] = ‘var(–blue-2)’;
    $ext_col_defaults[‘site_title_color’] = ‘var(–grey)’;
    $ext_col_defaults[‘site_tagline_color’] = ‘var(–grey-3)’;
    $ext_col_defaults[‘navigation_background_color’] = ”;
    $ext_col_defaults[‘navigation_text_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘navigation_background_hover_color’] = ”;
    $ext_col_defaults[‘navigation_text_hover_color’] = ‘var(–blue-2)’;
    $ext_col_defaults[‘navigation_background_current_color’] = ”;
    $ext_col_defaults[‘navigation_text_current_color’] = ‘var(–gold)’;
    $ext_col_defaults[‘subnavigation_background_color’] = ‘var(–grey-7)’;
    $ext_col_defaults[‘subnavigation_text_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘subnavigation_background_hover_color’] = ‘var(–grey-5)’;
    $ext_col_defaults[‘subnavigation_text_hover_color’] = ‘var(–blue-2)’;
    $ext_col_defaults[‘subnavigation_background_current_color’] = ”;
    $ext_col_defaults[‘subnavigation_text_current_color’] = ‘var(–gold)’;
    $ext_col_defaults[‘navigation_search_background_color’] = ”;
    $ext_col_defaults[‘navigation_search_text_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘content_background_color’] = ”;
    $ext_col_defaults[‘content_text_color’] = ‘var(–grey)’;
    $ext_col_defaults[‘content_link_color’] = ‘var(–grey)’;
    $ext_col_defaults[‘content_link_hover_color’] = ‘var(–grey-3)’;
    $ext_col_defaults[‘content_title_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘blog_post_title_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘blog_post_title_hover_color’] = ‘var(–blue-2)’;
    $ext_col_defaults[‘entry_meta_text_color’] = ‘var(–grey-3)’;
    $ext_col_defaults[‘entry_meta_link_color’] = ‘var(–grey-3)’;
    $ext_col_defaults[‘entry_meta_link_color_hover’] = ‘var(–grey-5)’;
    $ext_col_defaults[‘h1_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘h2_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘h3_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘h4_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘h5_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘h6_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘sidebar_widget_background_color’] = ‘var(–grey-7)’;
    $ext_col_defaults[‘sidebar_widget_text_color’] = ‘var(–grey)’;
    $ext_col_defaults[‘sidebar_widget_link_color’] = ‘var(–grey)’;
    $ext_col_defaults[‘sidebar_widget_link_hover_color’] = ‘var(–grey-3)’;
    $ext_col_defaults[‘sidebar_widget_title_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘footer_widget_background_color’] = ‘var(–grey-7)’;
    $ext_col_defaults[‘footer_widget_text_color’] = ‘var(–grey)’;
    $ext_col_defaults[‘footer_widget_link_color’] = ‘var(–grey)’;
    $ext_col_defaults[‘footer_widget_link_hover_color’] = ‘var(–grey-3)’;
    $ext_col_defaults[‘footer_widget_title_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘footer_background_color’] = ‘var(–base)’;
    $ext_col_defaults[‘footer_text_color’] = ‘var(–grey-3)’;
    $ext_col_defaults[‘footer_link_color’] = ‘var(–grey-3)’;
    $ext_col_defaults[‘footer_link_hover_color’] = ‘var(–grey-4)’;
    $ext_col_defaults[‘form_background_color’] = ‘var(–base)’;
    $ext_col_defaults[‘form_text_color’] = ‘var(–grey)’;
    $ext_col_defaults[‘form_background_color_focus’] = ”;
    $ext_col_defaults[‘form_text_color_focus’] = ‘var(–grey)’;
    $ext_col_defaults[‘form_border_color’] = ‘var(–grey-5)’;
    $ext_col_defaults[‘form_border_color_focus’] = ‘var(–grey-4)’;
    $ext_col_defaults[‘form_button_background_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘form_button_background_color_hover’] = ‘var(–blue-2)’;
    $ext_col_defaults[‘form_button_text_color’] = ‘var(–base)’;
    $ext_col_defaults[‘form_button_text_color_hover’] = ‘var(–base)’;
    $ext_col_defaults[‘back_to_top_background_color’] = ‘var(–blue)’;
    $ext_col_defaults[‘back_to_top_background_color_hover’] = ‘var(–blue-2)’;
    $ext_col_defaults[‘back_to_top_text_color’] = ‘var(–base)’;
    $ext_col_defaults[‘back_to_top_text_color_hover’] = ‘var(–base)’;

    return $ext_col_defaults;

    }

    Thanks!
    David

    #2439667
    Ying
    Staff
    Customer Support

    Hi David,

    Can you link us to a page and point us to where this issue is?

    #2439670
    David

    Hi Ying, it’s on a local dev site at the moment but I’ll get this moved to a public link and send over the details, thanks…

    #2439709
    Ying
    Staff
    Customer Support

    Meanwhile, can you re-post your code and wrap it with the code tag so I can check the format?

    #2439748
    David
    // FFDV Generate default GP colour palette for customizer
    add_filter( 'generate_option_defaults', 'ffdv_filtered_colour_palette' );
    add_filter( 'option_generate_settings', 'ffdv_filtered_colour_palette' );
    
    function ffdv_filtered_colour_palette( $palette ) {
        
    	$palette['global_colors'] = array(
    		array(
                'name' => __( 'Grey', 'pms' ),
                'slug' => 'grey',
                'color' => '#101011',
            ),
            array(
                'name' => sprintf( __( 'Grey %s', 'pms' ), '2' ),
                'slug' => 'grey-2',
                'color' => '#323233',
            ),
            array(
                'name' => sprintf( __( 'Grey %s', 'pms' ), '3' ),
                'slug' => 'grey-3',
                'color' => '#5c5c5d',
            ),
    		array(
                'name' => sprintf( __( 'Grey %s', 'pms' ), '4' ),
                'slug' => 'grey-4',
                'color' => '#a7a8aa',
            ),
            array(
                'name' => sprintf( __( 'Grey %s', 'pms' ), '5' ),
                'slug' => 'grey-5',
                'color' => '#d7d8d9',
            ),
    		array(
                'name' => sprintf( __( 'Grey %s', 'pms' ), '6' ),
                'slug' => 'grey-6',
                'color' => '#e9e9ea',
            ),
            array(
                'name' => sprintf( __( 'Grey %s', 'pms' ), '7' ),
                'slug' => 'grey-7',
                'color' => '#f2f2f2',
            ),
    		array(
                'name' => __( 'Blue', 'pms' ),
                'slug' => 'blue',
                'color' => '#102d69',
            ),
            array(
                'name' => sprintf( __( 'Blue %s', 'pms' ), '2' ),
                'slug' => 'blue-2',
                'color' => '#344c7f',
            ),
    		array(
                'name' => sprintf( __( 'Blue %s', 'pms' ), '3' ),
                'slug' => 'blue-3',
                'color' => '#0093d3',
            ),
    		array(
                'name' => sprintf( __( 'Blue %s', 'pms' ), '4' ),
                'slug' => 'blue-4',
                'color' => '#40aede',
            ),
    		array(
                'name' => sprintf( __( 'Blue %s', 'pms' ), '5' ),
                'slug' => 'blue-5',
                'color' => '#e5f4fb',
            ),
    		array(
                'name' => __( 'Green', 'pms' ),
                'slug' => 'green',
                'color' => '#95c11f',
            ),
            array(
                'name' => sprintf( __( 'Green %s', 'pms' ), '2' ),
                'slug' => 'green-2',
                'color' => '#b0d157',
            ),
    		array(
                'name' => __( 'Base', 'pms' ),
                'slug' => 'base',
                'color' => '#ffffff',
            ),
    		
        );
    	
    	return $palette;
    	
    }
    
    // FFDV Generate default GP colour options for customizer
    add_filter( 'generate_option_defaults', 'ffdv_filtered_colour_defaults' );
    add_filter( 'option_generate_settings', 'ffdv_filtered_colour_defaults' );
    function ffdv_filtered_colour_defaults( $col_defaults ) {
    
        $col_defaults['background_color'] = 'var(--base)';
    	$col_defaults['text_color'] = 'var(--grey)';
    	$col_defaults['link_color'] = 'var(--grey)';
    	$col_defaults['link_color_hover'] = 'var(--grey-3)';
    	$col_defaults['link_color_visited'] = 'var(--grey)';
    	
    	return $col_defaults;
    
    }
    
    // FFDV Generate extended default GP colour options for customizer
    add_filter( 'generate_color_option_defaults', 'ffdv_ext_filtered_colour_defaults' );
    add_filter( 'option_generate_settings', 'ffdv_ext_filtered_colour_defaults' );
    function ffdv_ext_filtered_colour_defaults( $ext_col_defaults ) {
    	
    	$ext_col_defaults['top_bar_background_color'] = '';
        $ext_col_defaults['top_bar_text_color'] = '';
        $ext_col_defaults['top_bar_link_color'] = '';
        $ext_col_defaults['top_bar_link_color_hover'] = '';
        $ext_col_defaults['header_background_color'] = 'var(--base)';
        $ext_col_defaults['header_text_color'] = 'var(--blue)';
        $ext_col_defaults['header_link_color'] = 'var(--blue)';
        $ext_col_defaults['header_link_hover_color'] = 'var(--blue-2)';
        $ext_col_defaults['site_title_color'] = 'var(--grey)';
        $ext_col_defaults['site_tagline_color'] = 'var(--grey-3)';
        $ext_col_defaults['navigation_background_color'] = '';
        $ext_col_defaults['navigation_text_color'] = 'var(--blue)';
        $ext_col_defaults['navigation_background_hover_color'] = '';
        $ext_col_defaults['navigation_text_hover_color'] = 'var(--blue-2)';
        $ext_col_defaults['navigation_background_current_color'] = '';
        $ext_col_defaults['navigation_text_current_color'] = 'var(--green)';
        $ext_col_defaults['subnavigation_background_color'] = 'var(--grey-7)';
        $ext_col_defaults['subnavigation_text_color'] = 'var(--blue)';
        $ext_col_defaults['subnavigation_background_hover_color'] = 'var(--grey-5)';
        $ext_col_defaults['subnavigation_text_hover_color'] = 'var(--blue-2)';
        $ext_col_defaults['subnavigation_background_current_color'] = '';
        $ext_col_defaults['subnavigation_text_current_color'] = 'var(--green)';
        $ext_col_defaults['navigation_search_background_color'] = '';
        $ext_col_defaults['navigation_search_text_color'] = 'var(--blue)';
        $ext_col_defaults['content_background_color'] = '';
        $ext_col_defaults['content_text_color'] = 'var(--grey)';
        $ext_col_defaults['content_link_color'] = 'var(--grey)';
        $ext_col_defaults['content_link_hover_color'] = 'var(--grey-3)';
        $ext_col_defaults['content_title_color'] = 'var(--blue)';
        $ext_col_defaults['blog_post_title_color'] = 'var(--blue)';
        $ext_col_defaults['blog_post_title_hover_color'] = 'var(--blue-2)';
        $ext_col_defaults['entry_meta_text_color'] = 'var(--grey-3)';
        $ext_col_defaults['entry_meta_link_color'] = 'var(--grey-3)';
        $ext_col_defaults['entry_meta_link_color_hover'] = 'var(--grey-5)';
        $ext_col_defaults['h1_color'] = 'var(--blue)';
        $ext_col_defaults['h2_color'] = 'var(--blue)';
        $ext_col_defaults['h3_color'] = 'var(--blue)';
        $ext_col_defaults['h4_color'] = 'var(--blue)';
        $ext_col_defaults['h5_color'] = 'var(--blue)';
        $ext_col_defaults['h6_color'] = 'var(--blue)';
        $ext_col_defaults['sidebar_widget_background_color'] = 'var(--grey-7)';
        $ext_col_defaults['sidebar_widget_text_color'] = 'var(--grey)';
        $ext_col_defaults['sidebar_widget_link_color'] = 'var(--grey)';
        $ext_col_defaults['sidebar_widget_link_hover_color'] = 'var(--grey-3)';
        $ext_col_defaults['sidebar_widget_title_color'] = 'var(--blue)';
        $ext_col_defaults['footer_widget_background_color'] = 'var(--grey-7)';
        $ext_col_defaults['footer_widget_text_color'] = 'var(--grey)';
        $ext_col_defaults['footer_widget_link_color'] = 'var(--grey)';
        $ext_col_defaults['footer_widget_link_hover_color'] = 'var(--grey-3)';
        $ext_col_defaults['footer_widget_title_color'] = 'var(--blue)';	
        $ext_col_defaults['footer_background_color'] = 'var(--base)';
        $ext_col_defaults['footer_text_color'] = 'var(--grey-3)';
        $ext_col_defaults['footer_link_color'] = 'var(--grey-3)';
        $ext_col_defaults['footer_link_hover_color'] = 'var(--grey-4)';	
        $ext_col_defaults['form_background_color'] = 'var(--base)';
        $ext_col_defaults['form_text_color'] = 'var(--grey)';
        $ext_col_defaults['form_background_color_focus'] = '';
        $ext_col_defaults['form_text_color_focus'] = 'var(--grey)';
        $ext_col_defaults['form_border_color'] = 'var(--grey-5)';
        $ext_col_defaults['form_border_color_focus'] = 'var(--grey-4)';
        $ext_col_defaults['form_button_background_color'] = 'var(--blue)';
        $ext_col_defaults['form_button_background_color_hover'] = 'var(--blue-2)';
        $ext_col_defaults['form_button_text_color'] = 'var(--base)';
        $ext_col_defaults['form_button_text_color_hover'] = 'var(--base)';
        $ext_col_defaults['back_to_top_background_color'] = 'var(--blue)';
        $ext_col_defaults['back_to_top_background_color_hover'] = 'var(--blue-2)';
        $ext_col_defaults['back_to_top_text_color'] = 'var(--base)';
        $ext_col_defaults['back_to_top_text_color_hover'] = 'var(--base)';
    	
        return $ext_col_defaults;
    
    }
    

    As mentioned, it’s updating the site preview and customizer, but not the front end. I’ve used it in previous builds with no issues. Thanks!

    #2439805
    Ying
    Staff
    Customer Support

    I just tested the code, it works properly on my end, I’m using GP 3.2.4 and GP premium 2.2.1.

    I don’t think the code has any issues.

    Can you try disabling all other plugins and custom functions to test?

    #2439876
    David

    Will do, and I’ll report back, thanks!

    #2439915
    Ying
    Staff
    Customer Support

    Keep us updated 🙂

    #2441538
    David

    Hi Ying, I disabled everything except GP and my child thene containing this code and have the same issue… The colours update in the customizer preview but not on the front end. Would it still lbe beneficial for me to upload the site to a test domain for you? Thanks!

    #2441912
    Ying
    Staff
    Customer Support

    Yes, if you can create a staging site for us, that’ll be very helpful.

    Let me know!

    #2453642
    David

    Sorry about the delay Ying… private info attached to the post. Just to recap, changing the colour variables in functions.php normally updates the customizer and the front end, but they are only updating in the customizer. I use this method on a few sites without any issues and have ruled out plugin conflicts or caching. I’m considering maybe a conflict between GP and the lastest version of WP? Thanks!

    #2453688
    Ying
    Staff
    Customer Support

    Hi David,

    Can you let me know which colour on which page (front end) doesn’t work correctly?

    #2453722
    David

    Hi Ying, I’ve tried various ones. For example:

    header_background_color: I set to blue-3 and it updates in the customizer but not on the front end.
    same for footer_background_color and most other options I’ve tried.
    Simple example would be to get these to load on the home page.

    It’s as if the front end is not reading the customizer before loading.

    Thanks!

    #2455082
    Ying
    Staff
    Customer Support

    Did you change the colors in the customizer or in the code?

    #2455177
    David

    In the code, and the customizer normally reads the code and updates the front end immediately on refresh.

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.