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 (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

CSS variables

  • Jaime Martinez (WordPress developer)

    Hi GeneratePress,

    I think this is more of a feature request / helpfull for all you developers out there that use GP as their foundation to start new projects.

    Have you thought about saving the values set via the Customizer as CSS variables?
    E.g. You can set the height of a featured image, but that’s assign to 1 class.

    .resize-featured-image .post-image img {
      height: 300px;
      object-fit: cover;

    Not I have a build a faux archive-loop via the query-loop block and want to set the featured image there at the same height as I have set for the “blog archive”. But the moment my client changes this value to 400px, I also need to change this hard-coded CSS.

    But if I could do height: var(--gp-featured-image--height); then voila!

    Same goes for other values like the container width.

    I want the sticky header inside-header set to the same max width as the container, while yet it’s set to the full width of the window. Now I need to set it to 1200px, but if I change this through the Customizer, then my hard-coded 1200px doesn’t change with it.

    That same goes for grid values / padding values.

    You catch my drift?

    Kind regards,

    Jaime Martinez

  • Hi there,

    Now I need to set it to 1200px

    No, you don’t need to if you use the earth icon to set the max-width, it automatically loads GP’s content container width.

    As for the featured image size, you can create CSS variations like this:

    function get_featured_image_size() {
    	     $atts = generate_get_blog_image_attributes();
    	     $height = $atts['height'];
    	     $width = $atts['width'];
             echo  '<style title="set-global-feature-image-size">:root {
    add_action('wp_head', 'get_featured_image_size');

    You can modify the code to add width as well if you need.

    Not sure about the Grid/paddings values, what do you mean? Can you explain some more?

  • Jaime Martinez (WordPress developer)

    Hi Ying, thank you for your anwser.

    Thank for the header tip, will check that out.

    About the script example, yes, that’s how I will solve it, but why not incorparate this by default in GeneratePress making it available for all developers / people who use GP.

    I mean, WordPress even has a variable for the height (--wp-admin--admin-bar--height) of the admin-bar, which is super handy. Structuring your code like that, makes it even more developers friendly out of the box, instead of that every GP user needs write and research all these variables.

    Is this something I need to open in the GitHub repo as a feature. Because issues there are labeled as “feature”.

    Kind regards!

  • Jaime Martinez (WordPress developer)

    A, there is already a issue opened about this approuch and will close this thread.

    Thank you for all the help!

  • Thanks for the suggestions and you are welcome 🙂

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