CMS Development

madsmoller
メンバー

Inline css issues

解決

Our sites have CSS inlined in the source code instead of generating a link to the css file. Our theme uses the following to add the css as a link.

 

 

{{ require_css(get_asset_url('../css/main.css')) }}

 

 

How do I change this behaviour?
We would like all those css lines in a css file and cached by CDN.


We have talked with the Theme Developer and they told us that its an issues in Hubspot for some of their clients.


4件の承認済みベストアンサー
Anton
解決策
ソートリーダー | Solutions Partner
ソートリーダー | Solutions Partner

Inline css issues

解決

Hi @madsmoller

yes. This is currently happening for several people in several portals. @TomM2 noticed this a few days ago. 
Let's include a few other devs from the community to this so they can check their portals @Jnix284@Teun@melindagreen

Two things I've tested the last couple of days:

 

{{ require_css(get_asset_url('../css/main.css')) }}
{# or theme-override.css #}

 

are getting "inlined" with this method. 

  • Renaming it to something that is not main.css or theme-overrides.css(like combined-styles.css or customization.css) might help but I don't suggest to do this unless you really know every file of your theme
  • I'm loading my css files differently on my website that's why I was very surprised when @TomM2 mentioned that in a chat...

 

For anyone wondering how I'm loading my CSS:

 

<link rel="preload" href="{{ (get_asset_url("../../css/main.css")) }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
   <link rel="stylesheet" href="{{ (get_asset_url("../../css/main.css")) }}">
</noscript>

<link rel="preload" href="{{ (get_asset_url("../../css/theme.css")) }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
   <link rel="stylesheet" href="{{ (get_asset_url("../../css/theme.css")) }}">
</noscript>

 

 

 

My recommendation:

Since this seems to be a bug/hickup that affects quite a lot of portals - HubSpot might be already working on a bug-fix. Therefore I wouldn't change anything in the next couple of days/September.

 

best, 

Anton

 

Edit:
I'm also tagging a few dev-community moderators. Maybe they have some insights on this or can help forward this issue towards HubSpot. 
@Jaycee_Lewis@kennedyp 

Anton Bujanowski Signature

元の投稿で解決策を見る

melindagreen
解決策
投稿者 | Platinum Partner
投稿者 | Platinum Partner

Inline css issues

解決

I'm not seeing it happen, even when I recompile my CSS files to the "possibly offending" filenames, but I have a fairly custom setup in the first place -- almost all of my theme builds are 100% bespoke and I've ripped out all of the theme overrides and theme options because our agency builds each theme for a single brand.

 

So at least this indicates that the problem is not 100% based on file name.......

元の投稿で解決策を見る

Jnix284
解決策
殿堂入り

Inline css issues

解決

@Anton for child themes, I change the require_css to:

 

    {% set overwrite_child_css_path = '../../child.css' %}

 

which forces the child.css to have the highest precedent in the theme and this is how it's showing now:

Jnix284_0-1725637292714.png

 

All of the theme CSS are either inline or like the above, with a few exceptions:

Jnix284_1-1725637363186.png

 

I know without doubt that this was not the case previously and something has changed, this was flagged in Lighthouse and wasn't an issue before:

Jnix284_2-1725637496065.png

 


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon

元の投稿で解決策を見る

TomM2
解決策
ソートリーダー | Platinum Partner
ソートリーダー | Platinum Partner

Inline css issues

解決

Thanks for the tag @Anton ! 

Just confirming from a theme developer who is experiencing this there have been no changes to the theme. 

There are other people not using this theme who seem to be experiencing this. 

 

I've seen this happen on marketing hub pro, content hub pro, content starter, and legacy marketing ent portals. 

I'd say I first noticed it around last week (probablt Aug 26 at the earliest). 

Tom Mahon
Technical Consultant | Solutions Engineer | Community Champion
Baskey Digitial

Book a consultation

Did my post help answer your query? Help the community (and me) by marking it as a solution.


元の投稿で解決策を見る

4件の返信
melindagreen
解決策
投稿者 | Platinum Partner
投稿者 | Platinum Partner

Inline css issues

解決

I'm not seeing it happen, even when I recompile my CSS files to the "possibly offending" filenames, but I have a fairly custom setup in the first place -- almost all of my theme builds are 100% bespoke and I've ripped out all of the theme overrides and theme options because our agency builds each theme for a single brand.

 

So at least this indicates that the problem is not 100% based on file name.......

Anton
解決策
ソートリーダー | Solutions Partner
ソートリーダー | Solutions Partner

Inline css issues

解決

Hi @madsmoller

yes. This is currently happening for several people in several portals. @TomM2 noticed this a few days ago. 
Let's include a few other devs from the community to this so they can check their portals @Jnix284@Teun@melindagreen

Two things I've tested the last couple of days:

 

{{ require_css(get_asset_url('../css/main.css')) }}
{# or theme-override.css #}

 

are getting "inlined" with this method. 

  • Renaming it to something that is not main.css or theme-overrides.css(like combined-styles.css or customization.css) might help but I don't suggest to do this unless you really know every file of your theme
  • I'm loading my css files differently on my website that's why I was very surprised when @TomM2 mentioned that in a chat...

 

For anyone wondering how I'm loading my CSS:

 

<link rel="preload" href="{{ (get_asset_url("../../css/main.css")) }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
   <link rel="stylesheet" href="{{ (get_asset_url("../../css/main.css")) }}">
</noscript>

<link rel="preload" href="{{ (get_asset_url("../../css/theme.css")) }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
   <link rel="stylesheet" href="{{ (get_asset_url("../../css/theme.css")) }}">
</noscript>

 

 

 

My recommendation:

Since this seems to be a bug/hickup that affects quite a lot of portals - HubSpot might be already working on a bug-fix. Therefore I wouldn't change anything in the next couple of days/September.

 

best, 

Anton

 

Edit:
I'm also tagging a few dev-community moderators. Maybe they have some insights on this or can help forward this issue towards HubSpot. 
@Jaycee_Lewis@kennedyp 

Anton Bujanowski Signature
TomM2
解決策
ソートリーダー | Platinum Partner
ソートリーダー | Platinum Partner

Inline css issues

解決

Thanks for the tag @Anton ! 

Just confirming from a theme developer who is experiencing this there have been no changes to the theme. 

There are other people not using this theme who seem to be experiencing this. 

 

I've seen this happen on marketing hub pro, content hub pro, content starter, and legacy marketing ent portals. 

I'd say I first noticed it around last week (probablt Aug 26 at the earliest). 

Tom Mahon
Technical Consultant | Solutions Engineer | Community Champion
Baskey Digitial

Book a consultation

Did my post help answer your query? Help the community (and me) by marking it as a solution.


Jnix284
解決策
殿堂入り

Inline css issues

解決

@Anton for child themes, I change the require_css to:

 

    {% set overwrite_child_css_path = '../../child.css' %}

 

which forces the child.css to have the highest precedent in the theme and this is how it's showing now:

Jnix284_0-1725637292714.png

 

All of the theme CSS are either inline or like the above, with a few exceptions:

Jnix284_1-1725637363186.png

 

I know without doubt that this was not the case previously and something has changed, this was flagged in Lighthouse and wasn't an issue before:

Jnix284_2-1725637496065.png

 


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon