How do i add stylesheet to my sections and templates?

[ADuka]

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?

[GRajput · Accepted solution]

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!

[BarryGrennan · Accepted solution]

---

{{ 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

[GRajput · Accepted solution]

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!

[ADuka]

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?

[GRajput · Accepted solution]

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!

[BarryGrennan]

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:

{{ require_css(get_asset_url('PATH TO YOUR CSS FILE')) }}

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

[BérangèreL]

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

[ADuka]

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?

[BarryGrennan · Accepted solution]

---

{{ 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

[BérangèreL]

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