Step 1)

In your HubSpot account, Go to Marketing > Files and Templates > Design Tools


Step 2)

Open the blog template you purchased (e.g. Awwal - Blog Template) 


QUICK TIP: You can search the name of your template in the left sidebar, if you're not sure where to find the template.



Step 3)


Now, on the right sidebar find the stylesheet applied to your blog template and click Edit. 


QUICK TIP: You can also search the stylesheet in the left sidebar (e.g. Awwal_blog_template.css)






Step 4)


At the top of the stylesheet, we've added several variables to make things a little bit easier. Just change the color code here, It will be updated all over the template. You can control the color of most elements from here, below is the breakout of variables.




Let's break down which variable does what...


  • theme_color: This variable is for the main brand color (Affects 'Buttons' color, 'Topics' color, 'Links' color)
  • dark_color: Affects Buttons hover over color
  • light_color: Affects light backgrounds


  • heading_color: Pretty self explanatory, affects all titles (H1, H2, H3, H4, H5, H6)
  • text_color: Affects paragraphs
  • light_text_color: Affects low key texts


  • link_color: Affects color of links
  • link_hover_color: Affects the color that shows up when you hover over your links 


  • header_background_color: Affects header's main background
  • header_links_color: Affects header's nav menu links
  • header_links_hover_color: Affects header's nav menu links's hover color


  • footer_text_color:  Affects all text within footer (Not including nav menu links)
  • footer_background_color: Affects footer's main background
  • footer_links_color: Affects footer's nav menu links
  • footer_links_hover_color: Affects footer's nav menu links's hover color


  • main_background_color: Affects the blog's main background. (#FFF is the recommended color)



Step 4)

Publish changes and you're done.