[Resolved] Theme Defaults Override in Child Theme for Colour Vars

Home Forums Support [Resolved] Theme Defaults Override in Child Theme for Colour Vars

Home Forums Support Theme Defaults Override in Child Theme for Colour Vars

  • This topic has 19 replies, 4 voices, and was last updated 2 months ago by Tom.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #2241272
    David

    Hi, I have renamed all the default var names of colours in the customizer (contrast, accent, etc) and now all the Generatepress default colours are broken (e.g. contrast has no corresponding CSS value any more). I’m assuming I need to override the theme defaults in my child theme with a function/filter (or is there a better way to do it?!) to map old vars to new, but am new to Generatepress and could really do with some help! I didn’t realise that renaming the vars would not only break the customizer settings but also the default styles. Thanks!

    #2241297
    David
    Staff
    Customer Support

    Hi there,

    we did add a Lock and a warning to the the CSS variable name field:

    Changing this name will break styles that are using it to define its color.

    Did that not show up ?

    Options:

    1. remap the colors used in the Customizer > Colors to your new variable name colors.
    This is unavoidable if you want to use your own naming convention.

    2. Add back the original colors to the color pallete. Here are the names and the hex values:

    :root {
        --contrast: #222222;
        --contrast-2: #575760;
        --contrast-3: #b2b2be;
        --base: #f0f0f0;
        --base-2: #f7f8f9;
        --base-3: #ffffff;
        --accent: #1e73be;
    }

    You omit the initial -- from the name in the field as GP will add that.

    #2241690
    David

    Hi David, yes the warning showed up but I thought that was just for the customiser settings, not the core css. Can you please help me with option 1 from your 2 options? Thanks!

    #2241760
    David
    Staff
    Customer Support

    Where else did you have the Global Colors assigned ? As they are only used in the Customizer, unless you either specifically use them in the Block Editor or in your own CSS.

    #2241767
    David

    Just to explain a little further, I changed the var names as mentioned, then when I loaded up the front end, as an example I could see in the main GP css file in the developer tools on my browser:

    body { color: var(–contrast); }

    …and contrast is no longer in use as I changed the names. I assumed that I would be able to filter the theme defaults in my child theme somehow. Apologies, I’m new to Generatepress after moving from Genesis.

    Thanks!

    #2242904
    David

    To add a bit of clarity David, I changed the customiser colours which worked to a degree, but when I clicked ‘default’ it tried to reset to the original browser names e.g. contrast, accent etc. I want to be able to redefine the variables AND defaults from the ground via my child theme. Thanks…

    #2243142
    David
    Staff
    Customer Support

    Ah ok. If you want do the changes via the Child theme:

    1. generate_option_defaults filter can be used to set the default Global Color Pallete:

    https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/defaults.php#L20

    Which has has the global_colors array:

    https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/defaults.php#L69-L108

    And an example of the filter in use for setting default colors can be seen here:

    https://generatepress.com/forums/topic/changing-global-colors-programatically/#post-2122087

    2. generate_color_option_defaults filter can be used to set the default assignment of those colors to the various theme elements:

    https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/defaults.php#L121

    It includes the array of all defaults. And Tom shares another snippet here showing that filter in use:

    https://generatepress.com/forums/topic/changing-global-colors-programatically/page/2/#post-2124898

    #2245210
    David

    Hi David,

    I’ve cleared out all preset colour options and defaults from the customizer and then added the code below to my child theme functions file, but I cannot seem to get the customizer to read these defaults (by which I mean there are no colour tabs or defaults set). Dynamic CSS cache is off. As mentioned earlier, all I am trying to achieve is to set a default colour palette and then match the default colour options to the new var names.

    // FFDV Generate default colour options for customizer
    add_filter( 'generate_option_defaults', function( $defaults ) {
        
    	$defaults['global_colors'] = array(
            array(
                'name' => __( 'Base', 'qias' ),
                'slug' => 'base',
                'color' => '#ffffff',
            ),
    		array(
                'name' => __( 'Grey', 'qias' ),
                'slug' => 'base',
                'color' => '#101011',
            ),
            array(
                /* translators: Grey number */
                'name' => sprintf( __( 'Grey %s', 'qias' ), '2' ),
                'slug' => 'grey-2',
                'color' => '#323233',
            ),
            array(
                /* translators: Grey number */
                'name' => sprintf( __( 'Grey %s', 'qias' ), '3' ),
                'slug' => 'grey-3',
                'color' => '#5c5c5d',
            ),
    		array(
                /* translators: Grey number */
                'name' => sprintf( __( 'Grey %s', 'qias' ), '4' ),
                'slug' => 'grey-4',
                'color' => '#a7a8aa',
            ),
            array(
                /* translators: Grey number */
                'name' => sprintf( __( 'Grey %s', 'qias' ), '5' ),
                'slug' => 'grey-5',
                'color' => '#d7d8d9',
            ),
    		array(
                /* translators: Grey number */
                'name' => sprintf( __( 'Grey %s', 'qias' ), '6' ),
                'slug' => 'grey-6',
                'color' => '#e9e9ea',
            ),
            array(
                /* translators: Grey number */
                'name' => sprintf( __( 'Grey %s', 'qias' ), '7' ),
                'slug' => 'grey-7',
                'color' => '#f2f2f2',
            ),
    		array(
                'name' => __( 'Blue', 'qias' ),
                'slug' => 'blue',
                'color' => '#201547',
            ),
            array(
                /* translators: Blue number */
                'name' => sprintf( __( 'Blue %s', 'qias' ), '2' ),
                'slug' => 'blue-2',
                'color' => '#413862',
            ),
    		array(
                'name' => __( 'Gold', 'qias' ),
                'slug' => 'gold',
                'color' => '#b0aa7e',
            ),
            array(
                /* translators: Gold number */
                'name' => sprintf( __( 'Gold %s', 'qias' ), '2' ),
                'slug' => 'gold-2',
                'color' => '#c4bf9e',
            ),
        );
    
        return $defaults;
    
    } );
    
    // FFDV Map default colour options to customizer
    add_filter( 'generate_color_option_defaults', function( $defaults ) {
    
        $defaults['background_color'] = 'base';
    	$defaults['text_color'] = 'grey-1';
    	$defaults['link_color'] = 'grey-1';
    	$defaults['link_color_hover'] = 'grey-3';
    	$defaults['link_color_visited'] = 'grey-1';
    
        return $defaults;
    
    } );

    Thanks!
    David

    #2245743
    David

    Hi David, any help you can provide with this above would be much appreciated as it’s preventing me from moving forward with my design at present. To confirm, I expected the code above in functions.php (child theme) to populate some default customizer color tabs and remap 4 of the default values. Thanks! David

    #2245750
    Fernando
    Customer Support

    Hi David,

    Another option is if you try to recreate the default colors manually by adding new Global Colors as such: https://share.getcloudapp.com/mXuxmRz4, and naming the with the previous/names color variable names, the elements/blocks would be able to read them.

    For instance, one default color you mentioned is var(–contrast). If you create a new Global Color named contrast, this should also work and fix the elements/blocks with color issues using var(–contrast).

    The default colors are:
    contrast
    contrast-2
    contrast-3
    base
    base-3
    accent

    Kindly let us know what you think.

    #2245754
    David

    Hi Fernando,

    This isn’t an option for me I’m afraid. I just need to be able to make the 2 functions above work as expected so that my theme is customised programatically. Thanks!

    #2245828
    David
    Staff
    Customer Support

    I tested your code and the first snippet works as expected and is loading the default color pallet for me.
    The second snippet needs the actually css value to be passed to the variable – see here for an example:

    https://generatepress.com/forums/topic/changing-global-colors-programatically/page/2/#post-2128716

    #2245886
    David

    Hi David,

    Function 1: I;ve just managed to get this working using:
    add_filter( ‘generate_option_defaults’, ‘ffdv_filtered_options’ ); AND add_filter( ‘option_generate_settings’, ‘ffdv_filtered_options’ ); (One of Tom’s posts mentioned you may have to set both.)

    Function 2: I’ve tried adding the css values as you suggested but no luck:

    (a) There is no colour auto-populated in e.g. ‘Background colour’ in the customizer
    (b) If I click ‘Default’ in the customizer next to ‘Background’, it loads ‘var(–base-2)’ which is one of the GP defaults, not my new defaults.

    Just for clarity, it’s this that is still not working:

    add_filter( 'generate_color_option_defaults', function( $defaults ) {
        $defaults['background_color'] = 'var(--base)';
    	$defaults['text_color'] = 'var(--grey-1)';
    	$defaults['link_color'] = 'var(--grey-1)';
    	$defaults['link_color_hover'] = 'grey-3';
    	$defaults['link_color_visited'] = 'var(--grey-1)';
        return $defaults;
    } );

    Thanks!

    #2245940
    David
    Staff
    Customer Support

    Hmmm… so the filter is working as i can see the values being updated in the array.
    But they are not being loaded in the customizer panel itself.
    I am going to pass this over to Tom to take a look if thats ok ?

    #2245992
    David

    Thanks David, look forward to Tom’s reply…

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