topic Re: How do i add stylesheet to my sections and templates? in CMS Development

How do i add stylesheet to my sections and templates?

ADuka — Thu, 27 Mar 2025 15:40:05 GMT

Hello everyone,
I am trying to add a stylesheet to my section and template. I created a new css+Hubl file in ProjectFolder > CSS > Sections/Templates
I pick the same name that my Section/Template has starting with an underscore for the CSS file I created.
In my section, I gave my dnd-section like this:

{% dnd_section class="career-main-header-style", background_color="", width="12" %}

I used that class name in my section to style my section.

.career-main-header-style { padding-bottom: 5rem !important; background-color: red !important; }

I also add my css filename to ProjectFolder > CSS > Main.css

/* Sections Section CSS classes */ {% include './sections/_Career_Header_Section.css' %}

but the stylesheet is not working and the style doesn't apply to my section.
is there anything i am missing?
Is there any way i can style my sections and templates?

Re: How do i add stylesheet to my sections and templates?

BérangèreL — Fri, 28 Mar 2025 08:01:10 GMT

Hi @ADuka, I hope that you are well!

Thanks for asking the HubSpot Community!

1. Which template are you using? A HubSpot template or a third-party template?
2. What is the link to the page you are trying to add CSS to?

For information, here are some resources that might be of interest:

- Create, edit, and attach CSS files to style your site
- Understand the source of a page's styling

I'd love to put you in touch with some of our Top Experts: Hi @Anton, @BarryGrennan and do you have suggestions to help @ADuka, please?

Have a wonderful weekend and thanks so much in advance for your contributions! ❤️

Warmly,
Bérangère

Re: How do i add stylesheet to my sections and templates?

BarryGrennan — Fri, 28 Mar 2025 12:02:12 GMT

Hi @ADuka,

From what you describe here:

@ADuka wrote:
I created a new css+Hubl file in ProjectFolder > CSS > Sections/Templates

It seems your path to the css file is wrong here:

{% include './sections/_Career_Header_Section.css' %}

Right click on your css file and use copy path to get the full path to the file.

Also, I know

{% include "hubspot/styles/patches/recommended.css" %}

is mentioned in the hubspot documentation but I would have only ever used include for html content and testing it out now I can't get it to work.

I'd use require_css instead:

Edit: Ah, yes, the include method for css would only be used to compile your css files (as in main.css in the boilerplate). You can't use it in the context you're using it. Use the require_css method instead.

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

Re: How do i add stylesheet to my sections and templates?

GRajput — Fri, 28 Mar 2025 12:52:42 GMT

Hi @ADuka

1. {% dnd_section %} doesn't support the class attribute, so you can't use it there. Instead, you can add the class to {% dnd_area %}.

2. {% include %} cannot be used in HubSpot templates to add CSS styles. {% include %} is meant for HubL partials (e.g., reusable templates or modules) but not for CSS files.
Use {% require_css %} to load external or project CSS files.

This will apply CSS to your {% dnd_area %}.
If you want to apply CSS to {% dnd_section %}, you can do either inline CSS or target via CSS Using dnd-section Class:
.career-main-header-style .dnd-section{
background-color: red;
}

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!

Re: How do i add stylesheet to my sections and templates?

ADuka — Mon, 31 Mar 2025 21:12:27 GMT

Hi @GRajput
Thanks so much for your prompt reply
I tried to follow your instructions, but it still doesn't work
Would you please guide me on how to modify my files
this is my template

{{ get_asset_url('/ascent_strategy_theme/templates/CareerPage.html') }}

/* Templates Template design patterns */ {{ require_css(get_public_template_url("../css/templates/CareerPageTemplate.css")) }}

This is the stylesheet for my template
{{ get_asset_url('/ascent_strategy_theme/css/templates/CareerPage.css') }}

.background_animation_style { background-color: red; }

This is my main.css file
{{ get_asset_url('/ascent_strategy_theme/css/main.css') }}

/* Templates Template design patterns */ {{ require_css(get_public_template_url("../css/templates/CareerPageTemplate.css")) }}

would you please guide me on how to add the stylesheet to my template?

Re: How do i add stylesheet to my sections and templates?

ADuka — Mon, 31 Mar 2025 21:17:25 GMT

Hi @BérangèreL
Thanks so much for your prompt reply
I tried to follow your instructions, but it still doesn't work
Would you please guide me on how to modify my files
this is my template

{{ get_asset_url('/ascent_strategy_theme/templates/CareerPage.html') }}

/* Templates
Template design patterns
*/
{{ require_css(get_public_template_url("../css/templates/CareerPageTemplate.css")) }}

This is the stylesheet for my template
{{ get_asset_url('/ascent_strategy_theme/css/templates/CareerPage.css') }}

.background_animation_style {
  background-color: red;
}

This is my main.css file
{{ get_asset_url('/ascent_strategy_theme/css/main.css') }}

/* Templates
Template design patterns
*/
{{ require_css(get_public_template_url("../css/templates/CareerPageTemplate.css")) }}

would you please guide me on how to add the stylesheet to my template?

Re: How do i add stylesheet to my sections and templates?

BérangèreL — Tue, 01 Apr 2025 12:02:15 GMT

Hi @ADuka, I hope that you are well!

Thanks for sharing the code with us!

Hi @BarryGrennan and @GRajput do you have tips to help @ADuka, please?

Have a great day and thanks so much!

Warmly,
Bérangère

Re: How do i add stylesheet to my sections and templates?

BarryGrennan — Tue, 01 Apr 2025 12:50:27 GMT

{{ get_asset_url('/ascent_strategy_theme/templates/CareerPage.html') }}
/* Templates
Template design patterns
*/
{{ require_css(get_public_template_url("../css/templates/CareerPageTemplate.css")) }}
You say below that your css file is called CareerPage.css but here you call CareerPageTemplate.css
This is my main.css file
{{ get_asset_url('/ascent_strategy_theme/css/main.css') }}
/* Templates
Template design patterns
*/
{{ require_css(get_public_template_url("../css/templates/CareerPageTemplate.css")) }}
As above, you apear to be calling CareerPageTemplate.css where your file name is CareerPage.css but also in the context of main.css you would be compiling css so here you would use include. However you shouldn't need to have it both included in your main and called in the template, just one or the other.

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

Re: How do i add stylesheet to my sections and templates?

GRajput — Tue, 01 Apr 2025 13:26:36 GMT

Hi @ADuka

The CSS file path referenced in the HTML template appears to be incorrect.
You have mentioned the following path:

{{ get_asset_url('/ascent_strategy_theme/css/templates/CareerPage.css') }}

However, the actual path being loaded in the HTML template is:

{{ require_css(get_public_template_url("../css/templates/CareerPageTemplate.css")) }}

To ensure the correct stylesheet is applied, please verify and update the path accordingly.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!