-1

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

gudok
  • 4,029
  • 2
  • 20
  • 30
le_tay
  • 3
  • 3

1 Answers1

0

Try to remove this line

{% set base_gradient
cs95
  • 379,657
  • 97
  • 704
  • 746
Labib Muhammad Jamal
  • 26
  • 4
  • it's very long (over 200000) characters so I can't post in a comment or as an answer :/ I'll try deleting the base_gradient line though and see if I can post the code in several comments to follow here – le_tay Dec 27 '18 at 16:00
  • and share link here – Labib Muhammad Jamal Dec 27 '18 at 16:02
  • Just tried that, nothing happened (gray area still gray). – le_tay Dec 27 '18 at 16:03
  • https://jsfiddle.net/2h9scd4g/ – le_tay Dec 27 '18 at 16:07
  • Thank you for taking the time, I appreciate it! – le_tay Dec 27 '18 at 16:14
  • Are you trying to change background for "service section"? – Labib Muhammad Jamal Dec 27 '18 at 16:19
  • And can you also please share html code for the template by viewing source code? You can paste html code in the same fiddle you made in html portion. – Labib Muhammad Jamal Dec 27 '18 at 16:20
  • Trying to change the whole pre-set background, it's a light gray color and it's automatically there when I remove or change out an image. Adding the HTML now: https://jsfiddle.net/2h9scd4g/1/ – le_tay Dec 27 '18 at 17:28
  • As you can see in this preview (http://info.ensightplus.com/field-service-software?hs_preview=xCYqtnZU-6871557218), every section has either a full-width image or a gray background. When I change out the default image (the man at his desk) the gray appears. I added an image to the bottom section ("More than a Software") and although it's got a white background (not a transparent png), the gray seems to show through. – le_tay Dec 27 '18 at 17:32
  • You have shared login page html for hubspot source, I am asking html code for the template landing page as you mentioned in the question and on which you are working on it right now. Could you please share that html code on fiddle? – Labib Muhammad Jamal Dec 27 '18 at 17:35
  • Ah sorry, I'll send the template source – le_tay Dec 27 '18 at 17:37
  • Check this link [link] (https://www.useloom.com/share/3a37039c611044ab8c88aaa7ffca87b2) – Labib Muhammad Jamal Dec 27 '18 at 17:41
  • Check above video link its resolved. I show css code in the video, which you need to change, than it will resolve the issue. – Labib Muhammad Jamal Dec 27 '18 at 17:44
  • Just looked at your linked video, is that the background for the whole page, or just the section that's being inspected? – le_tay Dec 27 '18 at 17:45
  • Its only for the section not for whole page. – Labib Muhammad Jamal Dec 27 '18 at 17:47
  • Ok I'll test it, if each section has the same color I can most likely just locate all instances and change each one. Thanks for your help – le_tay Dec 27 '18 at 17:49
  • It worked! I found the color in the css header and changed it to white, it applied everywhere. – le_tay Dec 27 '18 at 17:51
  • Welcome, as you see css hierarchy .row-fluid .landing-hero:before, this mean css is only specific for the section, and you do need to locate all intances and change them, you can only locate the one in the css file named Sahara_2017_Style.css and change opacity to 0, its so simple and the issue will resolve. – Labib Muhammad Jamal Dec 27 '18 at 17:55