How to modify HubSpot landing page template background to solid white

[Hermione_Book]

Need help removing gradient from HubSpot template

I’m working on customizing a HubSpot landing page template and running into an issue with the background. Right now it shows a gray gradient but I just want a plain white background instead.

Here’s what I have in my template code:

/* ----- Layout Settings ----- */

{% set main_bg_color = "#FFFFFF" %}
{% set secondary_bg_color = "#f5f5f5" %}
{% set container_width = 1200 %}
{% set border_style = "rounded" %}
{% set fixed_header = "Yes" %}
{% set back_to_top = "Yes" %}

/* ----- Theme Colors ----- */

{% set primary_bg = "#000000" %}
{% set primary_accent = "#00d4aa" %}
{% set primary_text = "#FFFFFF" %}
{% set secondary_accent = "#0056b3" %}
{% set secondary_text = "#444444" %}
{% set tertiary_accent = "#1e3a8a" %}
{% set header_bg = "#111111" %}
{% set header_text = "#ffffff" %}
{% set body_text = "#333333" %}
{% set link_default = "#00d4aa" %}
{% set link_active = "#2A2A2A" %}
{% set title_color = "#444444" %}
{% set alt_text = "#dddddd" %}
{% set custom_gradient = "background: rgba(30,58,138,1);
background: -moz-linear-gradient(30deg, rgba(30,58,138,1) 0%, rgba(16,185,129,0.9) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(30,58,138,1)), color-stop(100%, rgba(16,185,129,0.9)));
background: -webkit-linear-gradient(30deg, rgba(30,58,138,1) 0%, rgba(16,185,129,0.9) 100%);
background: -o-linear-gradient(30deg, rgba(30,58,138,1) 0%, rgba(16,185,129,0.9) 100%);
background: -ms-linear-gradient(30deg, rgba(30,58,138,1) 0%, rgba(16,185,129,0.9) 100%);
background: linear-gradient(30deg, rgba(30,58,138,1) 0%, rgba(16,185,129,0.9) 100%);" %}

I think I need to remove all the gradient stuff after the first background color setting but wanted to check if there’s a cleaner way to do this. Has anyone dealt with this before?

[danwilson85]

honestly, just ditch the custom_gradient variable completely and set your main_bg_color to white. hubspot templates usually fall back to the main background when there’s no gradient defined. if that doesn’t work, you’ve probably got css overrides in your stylesheet forcing the gradient.

[Tom_Artist]

Just override the custom_gradient variable - set it to an empty string or solid color. Don’t delete the gradient code, just change the custom_gradient line to something like {% set custom_gradient = “background: #FFFFFF;” %}. This keeps your template structure but forces white instead of the gradient. Works way better than hunting down every CSS rule that might have gradients. Also check for inline styles or other CSS files that could be overriding your background.

[davidw]

Check if the gradient’s being applied through CSS classes in your template body, not just the variable declaration. I’ve seen HubSpot templates where custom_gradient gets referenced all over the place - not just where you’d think. Search your whole template for “custom_gradient” or look for CSS classes calling background gradients directly. Sometimes there’s a separate hero section or container div with its own background styling. Just inspect element in your browser to see which CSS rule is creating the gradient, then trace it back to your template code.

[wanderingWeasel]

The Problem:

You’re trying to remove a gradient background from a HubSpot landing page template, but the custom_gradient variable isn’t behaving as expected, leaving a gray gradient instead of a plain white background. You’ve already defined main_bg_color as #FFFFFF in your template’s code.

TL;DR: The Quick Fix:

Override the custom_gradient variable to explicitly set a solid white background. Replace the existing custom_gradient line in your HubSpot template code with this:

{% set custom_gradient = "background: #FFFFFF;" %}

Understanding the “Why” (The Root Cause):

HubSpot templates often utilize variables like custom_gradient to apply styling. While you’ve set main_bg_color to white, the custom_gradient variable is likely overriding this setting due to its CSS implementation. By directly assigning a solid white background to custom_gradient, you ensure it takes precedence over any other gradient definitions within the template. Simply removing the custom_gradient variable might not work if other parts of your template or CSS depend on it. This approach cleanly overrides the existing gradient without altering your template’s structure, making it more maintainable in the long run.

Step-by-Step Guide:

1. Override the custom_gradient Variable: Open your HubSpot landing page template’s code editor. Locate the line defining the custom_gradient variable. Replace the existing code with the following:

   {% set custom_gradient = "background: #FFFFFF;" %}
   

2. Save and Publish: Save your changes to the template. Then, publish the updated template to your HubSpot landing page to see the changes reflected.

3. Inspect Element (Optional but Recommended): Use your browser’s developer tools (“Inspect Element” or similar) to check the applied styles on your landing page. Verify that the background property now correctly shows #FFFFFF and that no other CSS rules are overriding your white background. This step helps identify any potential conflicts that might persist after the fix.

Common Pitfalls & What to Check Next:

• CSS Overrides: Even after overriding custom_gradient, check your template for other CSS classes or inline styles that might be applying a gradient background. Use your browser’s developer tools to inspect the element and trace back the CSS rules applied to your page. Look for classes in the <body> or other containing divs that might override the custom_gradient.
• Multiple Templates: If you have a consistent branding requirement across several HubSpot templates, consider automating the process, as suggested in the original thread (see the post about Latenode).
• HubSpot Updates: Be aware that future HubSpot template updates could potentially break custom code or CSS overrides. Regularly review your templates after updates and reapply any necessary changes.

Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!