Search code examples
htmlcsshubspot

HubSpot Design - Change background color of template


I have a template that I'm partially customizing for our landing pages in HubSpot. I want the background to be simply white, it currently appears to be a grayish gradient (see screenshot). The current code is:

 /* ----- Structure & Design ----- */

{% set site_background = "#FFFFFF" %}
{% set second_site_background = "#f3f3f3" %}
{% set wrapper = 1130 %}
{% set corners = "rounder" %}
{% set sticky_option = "Yes" %}
{% set scroll_top = "Yes" %}

/* ----- Base Colors ----- */

{% set base_background = "#111111" %}
{% set base_color = "#40e4b3" %}
{% set base_font_color = "#FFFFFF" %}
{% set second_base_color = "#062d70" %}
{% set second_base_font_color = "#333333" %}
{% set three_base_color = "#283c86" %}
{% set sticky_background = "#000000" %}
{% set sticky_background_link_color = "#ffffff" %}
{% set font_color = "#222222" %}
{% set link_color = "#40e4b3" %}
{% set link_hover_color = "#1A1A1A" %}
{% set heading_font_color = "#333333" %}
{% set second_font_color = "#e6e6e6" %}
{% set base_gradient = "/*background: rgba(40,60,134,1);
background: -moz-linear-gradient(45deg, rgba(40,60,134,1) 0%, rgba(69,162,71,0.89) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(40,60,134,1)), color-stop(100%, rgba(69,162,71,0.89)));
background: -webkit-linear-gradient(45deg, rgba(40,60,134,1) 0%, rgba(69,162,71,0.89) 100%);
background: -o-linear-gradient(45deg, rgba(40,60,134,1) 0%, rgba(69,162,71,0.89) 100%);
background: -ms-linear-gradient(45deg, rgba(40,60,134,1) 0%, rgba(69,162,71,0.89) 100%);
background: linear-gradient(45deg, rgba(40,60,134,1) 0%, rgba(69,162,71,0.89) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#283c86', endColorstr='#45a247', GradientType=1 );*/
background: rgba(10,36,82,0.99);
background: -moz-linear-gradient(-45deg, rgba(10,36,82,0.99) 0%,     rgba(10,36,82,0.99) 0%, rgba(43,78,136,0.99) 33%, rgba(44,79,138,0.99) 34%, rgba(43,218,165,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(10,36,82,0.99)), color-stop(0%, rgba(10,36,82,0.99)), color-stop(33%, rgba(43,78,136,0.99)), color-stop(34%, rgba(44,79,138,0.99)), color-stop(100%, rgba(43,218,165,1)));
background: -webkit-linear-gradient(-45deg, rgba(10,36,82,0.99) 0%, rgba(10,36,82,0.99) 0%, rgba(43,78,136,0.99) 33%, rgba(44,79,138,0.99) 34%, rgba(43,218,165,1) 100%);
background: -o-linear-gradient(-45deg, rgba(10,36,82,0.99) 0%, rgba(10,36,82,0.99) 0%, rgba(43,78,136,0.99) 33%, rgba(44,79,138,0.99) 34%, rgba(43,218,165,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(10,36,82,0.99) 0%, rgba(10,36,82,0.99) 0%, rgba(43,78,136,0.99) 33%, rgba(44,79,138,0.99) 34%, rgba(43,218,165,1) 100%);
background: linear-gradient(135deg, rgba(10,36,82,0.99) 0%, rgba(10,36,82,0.99) 0%, rgba(43,78,136,0.99) 33%, rgba(44,79,138,0.99) 34%, rgba(43,218,165,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a2452', endColorstr='#2bdaa5', GradientType=1 );"%}

I'm pretty sure I just neeed to delete everything after set site_background (first line) but if anyone has a better (or more correct) answer that would be super helpful. I've asked in the HubSpot forums, and tried the solution that they offer for email templates, found here.

Thank you! LT

Screenshot of Landing Page here


Solution

  • Try to remove this line

    {% set base_gradient