Customizing Downloaded Templates

[Kwaltrip]

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

Blog

Resources

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

[Anton]

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)

[MFrankJohnson]

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 Belch.io -- a beautiful code-free HubSpot page builder -- for free.

Always happy to help you build on HubSpot.

Best,
Frank

---

www.MFrankJohnson.com