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.

GeneratePress GenerateBlocks

Load generate-style-inline-css last

  • pixelattack
    January 31, 2024 at 10:43 am

    Hello, I am creating a child theme and I apply some styles which I want them to override the main.css of the parent theme. I don’t want to use the !important flag. I managed this by adding a dependency (generate-style) in the wp_enqueue_style() function:

    add_action('wp_enqueue_scripts', 'mytheme_assets');

function mytheme_assets() {

  wp_enqueue_style( 'mytheme_editor_styles', get_stylesheet_directory_uri() . '/editor.css', array('generate-style'), '0.0.1', 'all' );
  wp_enqueue_style( 'mytheme_styles', get_stylesheet_directory_uri() . '/dist/css/main.css', array('generate-style'), '0.0.1', 'all' );

  wp_enqueue_script( 'mytheme_scripts', get_stylesheet_directory_uri() . '/dist/js/main.js', array(), '0.0.1', 'all', true );

}

    The issue I have is that I need to allow the user to override my child theme’s styles through the customizer and I cannot seem to find a way because of the order the styles are loaded:

    https://i.postimg.cc/yYs00W6B/Screenshot-2024-01-31-at-8-37-47-PM.png

    I need the style tag with the id generate-style-inline-css to come last but I guess it follows the main.min.css

    Any ideas?

  • Ying
    January 31, 2024 at 11:10 am

    Hi there,

    The issue I have is that I need to allow the user to override my child theme’s styles through the customizer

    Customizer > additional CSS (wp-custom-css) is loaded last, so it should override the child theme style.

  • pixelattack
    January 31, 2024 at 11:34 am

    Hello! Yes I know that but if they try to update the styles from the typography or color panels which the majority do they are not applied.

  • Fernando
    January 31, 2024 at 4:13 pm

    Hi there,

    So basically, you need to load the child theme CSS before the theme’s stylesheet? If so, can you try this snippet?:

    add_action( 'wp_enqueue_scripts', 'generate_remove_scripts' );
function generate_remove_scripts() 
{
    wp_dequeue_style( 'generate-child' );
}

add_action( 'wp_enqueue_scripts', 'generate_move_scripts', 1);
function generate_move_scripts() 
{
    if ( is_child_theme() ) :
        wp_enqueue_style( 'generate-child', get_stylesheet_uri(), true, filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    endif;
}

    Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

    Let us know how it goes.

  • pixelattack
    January 31, 2024 at 10:36 pm

    Hi Fernando!

    So basically, you need to load the child theme CSS before the theme’s stylesheet?

    Not exactly.. I need the child theme’s styles before the theme’s inline styles – in the style tag – that get generated when a user uses the panels in the customizer (color, typography etc) but after the main.min.css file of the parent theme.

    If I remove any dependency files from the dependencies array, I can have the child’s stylesheets load first. When I add the generate-style as a dependency in the dependencies array like so array('generate-style') then I can get the child’s stylesheets to load after the parent’s theme styles. Have a look at the image:

    https://i.postimg.cc/0NrxvV2j/Untitled.png

    styles order

    So basically, the order will be:

    main.min.css (the main styles of the GP theme)
    child_styles.css (the child theme’s stylesheets)
    <style> … inline styles … </style> (the styles the user adds through the customizer)
    <style> … inline styles … </style> (the styles the user adds through the additional CSS panel in the customizer.)

    The way it is set up I can have my styles overwrite GP’s styles which is good, but I don’t respect the user’s styles. If change the order then I need to add important flags all over my stylesheet to overwrite GP’s styles but then again due to the important flags my styles overwrite styles the user may add in the future.

  • David
    February 1, 2024 at 3:52 am

    Hi there,

    i don’t think thats possible, as GP Premium specifically loads the child theme styles after any dynamic CSS generation. If we didn’t do that, then it would break the expected behaviour of the child theme styles.

    What styles are you loading from the Child Theme that pose a problem ?

  • pixelattack
    February 1, 2024 at 10:48 pm

    Hello!

    If we didn’t do that, then it would break the expected behaviour of the child theme styles.

    Regarding your point about maintaining the expected behavior of child theme styles, I completely understand the importance of consistency. However, it’s crucial to balance this with providing users the ability to customize their site effectively. When users are presented with customization options, it’s expected that those adjustments will reflect visibly in the site’s appearance.

    What styles are you loading from the Child Theme that pose a problem ?

    The issue arises when attempting to override specific styles from the parent theme in the child theme, particularly regarding typography and color.

    For instance, if I define a background color in the child theme to establish a cohesive design, but users are unable to alter this color through their customization options, it creates a disconnect in the user experience.

    On the other hand if I don’t define a background color it means that I’m unable to set even basic elements in the child theme and it feels like I am not fully leveraging the potential of child themes.

    After all, they’re meant to give us the freedom to personalize our site’s look and feel, but not at the expense of the user’s experience.

    All I am saying is that the order should be:

    1. WordPress
    2. Parent theme styles
    3. Child theme styles
    4. User customizations

    Combining both parent styles and user customizations seems counterintuitive to me.

    So.. I may refrain from defining styles in the child theme for elements the user can override. I think that is the solution for me.

    Thank you for your time and understanding!

  • David
    February 2, 2024 at 4:13 am

    For the colors, you can load the global color palette via the child theme functions:

    https://docs.generatepress.com/article/define-default-global-colors/

    That would allow you to customize both the palette, and change the default theme color settings. And the user still can override them in the customizer.

    Let us know if that helps

  • pixelattack
    February 2, 2024 at 4:20 am

    That helps a lot indeed! Thanks David..

  • David
    February 2, 2024 at 6:22 am

    You’re welcome!

  • pixelattack
    February 2, 2024 at 10:24 am

    Really enjoyed setting up the color defaults etc. I only have one question..

    Where is the body color options in this list?

    https://github.com/tomusborne/generatepress/blob/3.1.3/inc/defaults.php#L123-L190

    There needs to be:

    Body background color
    Body text color
    Body links color
    Body links on hover color

  • pixelattack
    February 3, 2024 at 12:20 am

    Hello! The only questions I have regarding setting the default global colors are two.

    There are no defaults for the body colors and how can I set them as the others colors.

    ‘navigation_search_background_color’ => ”,
    ‘navigation_search_text_color’ => ”,

    These two keys are not associated with the search modal from Layout/Primary Navigation/Enable navigation search modal. Is it referring to something else? The search panel in the customizer has 3 colors. Field background, Field Text.

    Here is the function with all the available keys for anyone interested:

    
function gp_color_defaults( $defaults ) {
// Top Bar
$defaults['top_bar_background_color'] = '';
$defaults['top_bar_text_color'] = '';
$defaults['top_bar_link_color'] = '';
$defaults['top_bar_link_color_hover'] = '';

// Header
$defaults['header_background_color'] = '';
$defaults['header_text_color'] = '';
$defaults['header_link_color'] = '';
$defaults['header_link_hover_color'] = '';
$defaults['site_title_color'] = '';
$defaults['site_tagline_color']= '';

// Primary Navigation
$defaults['navigation_background_color'] = '';
$defaults['navigation_background_hover_color'] = '';
$defaults['navigation_background_current_color'] = '';
$defaults['navigation_text_color']  = '';
$defaults['navigation_text_hover_color'] = '';
$defaults['navigation_text_current_color'] = '';

$defaults['subnavigation_background_color'] = '';
$defaults['subnavigation_background_hover_color']  = '';
$defaults['subnavigation_background_current_color'] = '';
$defaults['subnavigation_text_color'] = '';
$defaults['subnavigation_text_hover_color'] = '';
$defaults['subnavigation_text_current_color'] = '';

// Buttons
$defaults['form_button_background_color'] = '';
$defaults['form_button_background_color_hover'] = '';
$defaults['form_button_text_color'] = '';
$defaults['form_button_text_color_hover'] = '';

// Content
$defaults['content_background_color'] = '';
$defaults['content_text_color'] = '';
$defaults['content_link_color'] = '';
$defaults['content_link_hover_color'] = '';
$defaults['content_title_color'] = '';
$defaults['blog_post_title_color'] = '';
$defaults['blog_post_title_hover_color'] = '';
$defaults['entry_meta_text_color'] = '';
$defaults['entry_meta_link_color'] = '';
$defaults['entry_meta_link_color_hover'] = '';
$defaults['h1_color'] = '';
$defaults['h2_color'] = '';
$defaults['h3_color'] = '';
$defaults['h4_color'] = '';
$defaults['h5_color'] = '';
$defaults['h6_color'] = '';

// Forms
$defaults['form_background_color'] = '';
$defaults['form_background_color_focus'] = '';
$defaults['form_text_color'] = '';
$defaults['form_text_color_focus'] = '';
$defaults['form_border_color'] = '';
$defaults['form_border_color_focus'] = '';

// Sidebar Widgets
$defaults['sidebar_widget_background_color'] = '';
$defaults['sidebar_widget_text_color'] = '';
$defaults['sidebar_widget_link_color'] = '';
$defaults['sidebar_widget_link_hover_color'] = '';
$defaults['sidebar_widget_title_color'] = '';

// Footer Widgets
$defaults['footer_widget_background_color'] = '';
$defaults['footer_widget_text_color'] = '';
$defaults['footer_widget_link_color'] = '';
$defaults['footer_widget_link_hover_color'] = '';
$defaults['footer_widget_title_color'] = '';

// Footer Bar
$defaults['footer_background_color'] = '';
$defaults['footer_text_color'] = '';
$defaults['footer_link_color'] = '';
$defaults['footer_link_hover_color'] = '';

// Back to Top
$defaults['back_to_top_background_color'] = '';
$defaults['back_to_top_background_color_hover'] = '';
$defaults['back_to_top_text_color'] = '';
$defaults['back_to_top_text_color_hover'] = '';

return $defaults;
}

add_filter( 'generate_color_option_defaults', 'gp_color_defaults');
  • David
    February 4, 2024 at 5:17 am

    The base colors are loading into CSS here:

    https://github.com/tomusborne/generatepress/blob/513d21a557da677cd02f1a82af5f550f2781618c/inc/css-output.php#L26-L33

    And the Search Modal has its own CSS function:

    https://github.com/tomusborne/generatepress/blob/513d21a557da677cd02f1a82af5f550f2781618c/inc/structure/search-modal.php#L50-L94

  • pixelattack
    February 4, 2024 at 8:26 am

    Hey David,

    and how can I set the new color defaults for these?

  • David
    February 4, 2024 at 9:04 am

    Before i look into that, is there a need to set the defaults?
    Out of the box the Theme assigns a global color to the body and most other core elements.
    If you maintain those global color names in your palette then you don’t need to set the defaults, just the global color values.

  • pixelattack
    February 4, 2024 at 10:19 pm

    The theme sets a global color for the background, text, links, and hovered links. Specifically, it sets the base-2, accent, and contrast colors to the body. However, these names aren’t suitable because other elements have been assigned different color names, and we need consistency.

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