Default customizer colours

This topic has 23 replies, 3 voices, and was last updated 1 month, 3 weeks ago by David.

Viewing 15 posts - 1 through 15 (of 24 total)

1 2 →

Author

Posts
November 28, 2022 at 9:59 am #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

November 28, 2022 at 11:53 am #2439667

Ying
Staff
Customer Support

Hi David,

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

November 28, 2022 at 11:56 am #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…

November 28, 2022 at 12:15 pm #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?

November 28, 2022 at 12:38 pm #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!
November 28, 2022 at 1:11 pm #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?

November 28, 2022 at 2:05 pm #2439876

David

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

November 28, 2022 at 2:28 pm #2439915

Ying
Staff
Customer Support

Keep us updated 🙂

November 29, 2022 at 10:01 am #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!

November 29, 2022 at 2:57 pm #2441912

Ying
Staff
Customer Support

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

Let me know!

December 7, 2022 at 12:59 pm #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!

December 7, 2022 at 1:30 pm #2453688

Ying
Staff
Customer Support

Hi David,

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

December 7, 2022 at 2:13 pm #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!

December 8, 2022 at 1:45 pm #2455082

Ying
Staff
Customer Support

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

December 8, 2022 at 3:03 pm #2455177

David

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

Posts

Viewing 15 posts - 1 through 15 (of 24 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Default customizer colours

Popular Articles

Start building better websites today.