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

Global styles that get compiled into global/customizer stylesheets?

  • twopines
    April 4, 2025 at 10:05 am

    I’ve recently become inspired by some of the sites in the GP site library and came across a curious thing related to global CSS.

    When I dig into the Electrician site (as an example), I noticed that the inner header—which seems to be set as contained—has a different max-width than the root container which gets set in the Customize>Layout>Container>Container Width setting.

    This is an easy fix, I know—I would normally just add a new hook element to the wp_head, add the CSS, and display on the entire site.

    However, on the example site, it would seem the .inside-header.grid-container {max-width: 1264px;} is being compiled into the minified stylesheet where the rest of the global/customizer settings are being placed. When I add it with a hook element, the system puts it inline into the <head>.

    I would love to be able to compile some of these types of global customizer styles in with these other CSS styles like in this example site as I think it would be a more efficient way of adding global styles and to have less inline styles that can rarely be minified.

    Is this possible?
    Or is this just a scenario where changes like this have simply been hard coded into the theme files for example purposes? Thanks!

  • Ying
    April 4, 2025 at 10:15 am

    Hi there,

    I noticed that the inner header—which seems to be set as contained—has a different max-width than the root container which gets set in the Customize>Layout>Container>Container Width setting.

    If you go to customzier > layout > container, and set container alignment to text instead of boxes, the inner header max-width will be adjusted to 1200px which is the content container width set in customzier.

    As for the question about CSS, I’m not sure I fully understand. can you explain some more?

  • twopines
    April 4, 2025 at 10:20 am

    If you go to customzier > layout > container, and set container alignment to text instead of boxes, the inner header max-width will be adjusted to 1200px which is the content container width set in customzier.

    Definitely understood, thanks for the reiteration though. My main question was having the inner header by a different width than the content container—which again, I know I can do with a hook element easy.

    The CSS question comes when I can see the CSS handle being added within the GP minified CSS file as opposed to be added inline in the head like when I use a hook element.

    Hopefully this image helps better explain?
    GP global CSS

    And here’s what I’m seeing on my test site when I add via hook element:
    GP global CSS

  • Ying
    April 4, 2025 at 11:38 am

    . My main question was having the inner header by a different width than the content container—which again, I know I can do with a hook element easy.

    I usually won’t use hook element to insert CSS, you can use customizer > additional CSS (inline) or the style.css file in a child theme (external file), or create a global style (external file).

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