How to use standard_header_includes without loading layout.css

[tkruger]

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.

[albertsg · Accepted solution]

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!

[SBurnett28]

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. 

[harsimran]

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.

[SBurnett28]

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?

[harsimran]

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

[SBurnett28]

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.