topic Re: How to use standard_header_includes without loading layout.css in CMS Development

How to use standard_header_includes without loading layout.css

tkruger — Mon, 21 Feb 2022 15:04:10 GMT

I am building a template, and want to use "{{ standard_header_includes }}" so it will include any google analytics, and additional header from the settings but I don't want it to load its own layout.css. Is there a way to tell it now to?

Based on this https://developers.hubspot.com/docs/cms/hubl/variables#required-page-template-variables

I want to use my own layout.css though. It is odd because the boilerplate template comes with a layout.css but also has this included.

When using {{ standard_header_includes }}

You get in your header the following:

That is what I am trying to prevent.

Re: How to use standard_header_includes without loading layout.css

albertsg — Mon, 21 Feb 2022 18:01:36 GMT

Hi @tkruger, you can set your own variable to be equal to "standard_header_includes", then loop through every line in the variable and if it includes the CSS file then don't add it to your template.

Something like this:

{% set custom_header_includes = standard_header_includes|split('\n') %} {% for line in custom_header_includes %} {% unless line is string_containing 'the-file-to-exclude.css' %} {{line}} {% endunless %} {% endfor %}

By doing this you would be adding all the necessary code except the CSS.

We do something similar in several of our pages and it works for us.

Hope this helps!

Re: How to use standard_header_includes without loading layout.css

SBurnett28 — Tue, 14 Mar 2023 13:36:39 GMT

Hi there,

I've tried to do this but I get an error saying, "Template cannot include the tag {{ standard_header_includes }} more than once."

This is what the template looks like:

I've only called standard_header_includes once.

Re: How to use standard_header_includes without loading layout.css

harsimran — Thu, 16 Mar 2023 20:06:44 GMT

Hello @SBurnett28 , Try removing the {{ custom_header_includes }}, the content of the "standard_header_includes" is already being added to the page via for loop.

Re: How to use standard_header_includes without loading layout.css

SBurnett28 — Fri, 17 Mar 2023 09:18:21 GMT

Ah right you are, silly me. Ultimately though the styles are still added to the page as it seems they're being added through style tags directly, rather than through a stylesheet link?

Re: How to use standard_header_includes without loading layout.css

harsimran — Fri, 17 Mar 2023 19:48:55 GMT

These styles are added by the page editor and can be removed by editing the page section/modules in the page designer.

Re: How to use standard_header_includes without loading layout.css

SBurnett28 — Mon, 20 Mar 2023 09:02:05 GMT

I can see that, but the point is I don't want it to do that and I want to use my own code for that. For example, I would like to be able to go to a section and select centre vertical alignment, and my own code would handle that rather than the page editor. Say I would like to use grid instead of flex, I can't overwrite the page editor because of all the !important tags and I can't prevent someone from coming in and potentially selecting an alignment from the options and messing up the layout. If there were no !important tags it would be easily changed, but alas.

Re: How to use standard_header_includes without loading layout.css

SantiagoMilano — Thu, 06 Mar 2025 16:28:22 GMT

Hello! This doesn't prevent HubSpot for adding their own CSS since the style is being added by <style> tag. I'm trying to customize a form and there is no way to override those styles. I've tried many solution but seems like the only answer is to prevent that <style> tag to being added. Any ideas on how to achieve this?