Customizing Downloaded Templates

Occasional Contributor

How do you customize a downloaded template? I've found 2 templates that have the functionality I am looking for:




How do I customize these templates for my site? (Adding our site header/footer, our font/color scheme)

2 Replies 2
Community Superstar


Help other HubSpot searchers find this post quickly by accepting this solution today.


Q: How do I customize downloaded templates for my site (Adding our site header/footer, our font/color scheme)?


Short A: Typically, you'd reach out to the developer of the template for documentation & instructions around basic customizations.


Longer A:

Recommendation: If you can't reach the developer -- DO NOT USE THE TEMPLATE. (totally your call)


Also, maybe try -- a beautiful code-free HubSpot page builder -- for free.


Always happy to help you build on HubSpot.





Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Visit


Hope that helps.


Be well,

Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

Regular Advisor | Diamond Partner

For header/footer:

As those are two completly different templates(and not a template pack) I'm recomending to insert your logo in the site settings which can be found here:

- "settings-cog"( on the top-right of the HubSpot Top Nav-bar)

- Marketing

- Website

- Logos


The color sheme can be customized by editing the .css of the template. Normaly there is somewhere in the beginning something like(in my template pack it's around line 340 so search for it )

{% set primaryColor      = "#0e395a" %}    /* {# Primary Color    |  Ex. "color: {{ primaryColor }};" #} */
{% set secondaryColor    = "#ff365b" %}    /* {# Secondary Color  |  Ex. "color: {{ secondaryColor }};" #} */

{% set borderRadius         = "0px" %}    /* {# Gray Color  |  Ex. "color: {{ borderRadius }};" #} */

/* Typography */
{% set baseFontFamily    = "'Roboto Condensed', sans-serif" %}    /* {# Used on 'Headlines' in 'Base'  |  Ex. "font-family: {{ baseFontFamily }};" #} */
{% set bodyFontFamily    = "'Nunito Sans', sans-serif" %}    /* {# Used on 'body' in 'Base'  |  Ex. "font-family: {{ bodyFontFamily }};" #} */
{% set baseFontSize      = "18px" %}                       /* {# Used on 'body' in 'Base'  |  Ex. "font-size: {{ baseFontSize }};" #} */
{% set baseLineHeight    = "1.7" %}                        /* {# Used on 'body' in 'Base'  |  Ex. "line-height: {{ baseLineHeight }};" #} */



If you edit the hex code ("#0e395a") to another hex-code you will change the color of everything where the {{ primaryColor }} tag is used. 
If you want to find out, which color you have to edit just look it up with the inspector tool of your browser. For Chrome and Firefox it's "CTRL+Shift+i"(CMD+shift+i)



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