How to apply css styles to Hubspot Boilerplate

SOLVE
joshdev99
Member

I am trying to override the default header.html in /templates/layouts/header.html but whenever I try to write css code for class in that html file it doesn't apply. 

0 Upvotes
1 Accepted solution

Accepted Solutions
Anton
Solution
Key Advisor | Diamond Partner

Hi @joshdev99

the header.html is "just" a socalled global-partial element. This means that it will be loaded into the base.html(templates/layouts/base.html) file into the  

{% block header %}
header.html global-partial
{% end_block header %}

part.

This part is inside the <body>-tag. Sure you can have <style>-tags in the <body> tag, but it isn't very recommended to place <style>-tags there. 

 

 

you have multiple options how to apply own styling to any .html file or own class in the boilerplate. 

  1. go to the related CSS file and change it there - not really recommended because in most cases the "theme-override.css" will override it with the settings(fields.json) from the boilerplate.
  2. create a new CSS file and link it in the main.css file after the related file. e.g. if "_header.css" is in line 5 then place your new CSS file in some line below line 5. Also not recommended because "theme-override.css" will always load as last CSS file and override many things. 
  3. Write your custom code directly in the "theme-override.css" - not the best thing because this file contians mostlikely only all the settings from fields.json
  4. create a new CSS file and place it after the "theme-override.css" in the layout.html(the file that contains the default layout and all needed files for the theme) - not the best solution imo but should work. 

--- more advanced options

  1. Change the default settings in fields.json of the theme - by doing this you don't have to worry about creating custom CSS
  2. add your own fields/options to fields.json and extend the "theme-override.css" - most likely the most "difficult" way but if you plan to give the "non-developer" user the ability to apply changes without going to the design-manager and messing around with CSS files almost the only option (beside creating configuration options in modules)

 

Adding/Modifying the fields.json is not as difficult as it seems. You can find all possible options in the Module and Theme Fields Types documentation and Module and Theme Fields Overview(would start here)

 

If you want to go the fields.json route and you're not as familiar with json files the process should be:

  1. add one field/option to the fields.json file
  2. save it
  3. open/reload the theme configuration (settings/website/themes/your-theme)
  4. look if the field/option works properly
  5. open/reload the theme-override.css and add your newly added option 
  6. repeat step 1-5

 

Hope this helps

 

 

best, 

Anton




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

2 Replies 2
dennisedson
Community Manager

@Anton , any sage advice you can offer here?

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
Anton
Solution
Key Advisor | Diamond Partner

Hi @joshdev99

the header.html is "just" a socalled global-partial element. This means that it will be loaded into the base.html(templates/layouts/base.html) file into the  

{% block header %}
header.html global-partial
{% end_block header %}

part.

This part is inside the <body>-tag. Sure you can have <style>-tags in the <body> tag, but it isn't very recommended to place <style>-tags there. 

 

 

you have multiple options how to apply own styling to any .html file or own class in the boilerplate. 

  1. go to the related CSS file and change it there - not really recommended because in most cases the "theme-override.css" will override it with the settings(fields.json) from the boilerplate.
  2. create a new CSS file and link it in the main.css file after the related file. e.g. if "_header.css" is in line 5 then place your new CSS file in some line below line 5. Also not recommended because "theme-override.css" will always load as last CSS file and override many things. 
  3. Write your custom code directly in the "theme-override.css" - not the best thing because this file contians mostlikely only all the settings from fields.json
  4. create a new CSS file and place it after the "theme-override.css" in the layout.html(the file that contains the default layout and all needed files for the theme) - not the best solution imo but should work. 

--- more advanced options

  1. Change the default settings in fields.json of the theme - by doing this you don't have to worry about creating custom CSS
  2. add your own fields/options to fields.json and extend the "theme-override.css" - most likely the most "difficult" way but if you plan to give the "non-developer" user the ability to apply changes without going to the design-manager and messing around with CSS files almost the only option (beside creating configuration options in modules)

 

Adding/Modifying the fields.json is not as difficult as it seems. You can find all possible options in the Module and Theme Fields Types documentation and Module and Theme Fields Overview(would start here)

 

If you want to go the fields.json route and you're not as familiar with json files the process should be:

  1. add one field/option to the fields.json file
  2. save it
  3. open/reload the theme configuration (settings/website/themes/your-theme)
  4. look if the field/option works properly
  5. open/reload the theme-override.css and add your newly added option 
  6. repeat step 1-5

 

Hope this helps

 

 

best, 

Anton




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post