Adding multiple css files to blog detail pages

[SnS_Nathan]

Hey Devs,

I have 3 blogs on my website that each need different styling. I use a child theme where i created a css file per blog and loaded them next to my main css file (CLEAN X KOO), using the settings menu (view screenshot). However, the custom stylesheets don't load when i view the page.

UPDATE: i've been able to link te stylesheets at the template level so now all styling for the listing pages comes through. Only the styling for the detail-pages doesn't work yet.

Please tell me if i am missing something or if there are better ways to go about this.

Thank you for your input!

[BarryGrennan · Accepted solution]

Hi @SnS_Nathan, 

I can't fully speak to why that's not working (or indeed how it's supposed to work) but in modern HTML + HubL templates this wouldn't be the standard way to add css. This might perhaps be a throwback to the old Drag and Drop Templates

In HTML + HubL templates you'd typically add your css to either your base.html file like:

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

or add it right into your themes main.css file like:

{% include './elements/_typography.css' %}

As you mention you have three separate blogs that need separate styling, I'm going to assume each has a different template. If that's the case you could call different css files for each inside the template like:

{% require_head %}
 {{ require_css(get_asset_url("../../css/blog3.css")) }}
{% end_require_head %}

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[SnS_Nathan]

Hi Barry,
turns out i was using one template for all three blogs. I duplicated the template to create 3 individual ones and attached the required css file, works flawlessly now.

Thank you for the quick response!