Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Use some custom css variables as Generatepress theme settings?

  • Hi,
    I made a custom css file with some css variables for fonts and spacing, like –h1 and –space-l.

    How could I use it so that Generatepress ‘loads’ them as default values? They should be able to be altered afterwords but would be nice to have them allready as defaults based on my css file with css variables.

    How does that work with global colors. Default generatepress color palette has 7 values. If I have more and would use this method, would the be ‘made automatically’?

  • Hi there,

    1. you can use a filter like this to set GP’s default color pallette, you can add more than 7 values:

    //gp dynamic color default values
    add_filter( 'option_generate_settings', function( $settings ) {
        $settings['global_colors'] = [
            [
                'name' => __( 'Contrast', 'generatepress' ),
                'slug' => 'contrast',
                'color' => '#222222',
            ],
            [
                'name' => sprintf( __( 'Contrast %s', 'generatepress' ), '2' ),
                'slug' => 'contrast-2',
                'color' => '#575760',
            ],
            // And so on..
        ];
    
        return $settings;
    } );

    2. For the typography, you can use variations in the fields, here’s a screenshot for your reference:
    https://app.screencast.com/DApEQqOk8Tdjy

  • Hi,
    About 2. “For the typography, you can use variations in the fields”

    Is there a filter like for colors to set them?

  • Yes, you can use the generate_font_option_defaults filter like this:

    // Custom function to modify the default font options
    function custom_generate_font_option_defaults( $defaults ) {
        // Modify the default font options as needed
        $defaults['font_body'] = 'Arial';
        $defaults['font_body_category'] = 'sans-serif';
        $defaults['font_body_variants'] = '400,700';
        $defaults['body_font_weight'] = '400';
        $defaults['body_font_transform'] = 'uppercase';
        $defaults['body_font_size'] = '16';
        $defaults['body_line_height'] = '1.6'; // no unit.
        $defaults['paragraph_margin'] = '1.6'; // em.
        $defaults['font_top_bar'] = 'Arial';
        $defaults['font_top_bar_category'] = 'sans-serif';
        $defaults['font_top_bar_variants'] = '400,700';
        $defaults['top_bar_font_weight'] = '400';
        $defaults['top_bar_font_transform'] = 'uppercase';
        $defaults['top_bar_font_size'] = '14';
        // Add more modifications as needed for other elements
    
        return $defaults;
    }
    add_filter( 'generate_font_option_defaults', 'custom_generate_font_option_defaults', 20 ); 
    

    For more elements, check GP’s original code here:https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/defaults.php#L205

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