topic Re: Background color change in global template for landing page in CMS Development

Background color change in global template for landing page

MarthaLord — Thu, 30 Apr 2020 19:28:54 GMT

I was referred here by text support. We could not see how to edit the code for the background in the global template footer. Can you help?

Here is the link to the Vast style CSS, provided by tech support:

https://app.hubspot.com/design-manager/1636334/code/26324735325

Thanks

Re: Background color change in global template for landing page

psdtohubspot — Fri, 01 May 2020 20:20:16 GMT

Hi @MarthaLord
We can't identify your issue from this Template/ Coded file link can you please schedule a call or send us Screenshot.

Maybe I can help you.

Re: Background color change in global template for landing page

Anton — Sat, 02 May 2020 11:31:35 GMT

Hi @MarthaLord,

this is the link to your template. unfortunatly nobody who hasn't access to your hub is able to look at it.

Please share a preiew link of the template(button on the left besides the publish button).

Since you're using vast -

open the css file which is applied to the template

go back to your template and open the footer global group.

It should have at least one class applied:

in this case it's .footer-background

Since you have everything needed open - look for the class

.footer-background{}

in the CSS file.

There should be some code like

background-color: #333333;

background-color: {{ darkColor }};

The first one is a so called "hex-color" code. You can either replace it with your desired hex-color or rgb(a) color code.

If you see the second one -

it's a so called hubl code. It's HubSpot specific code which is - most likly defined and the beginning of the CSS file.

It's used like this:

Setup at the beginning of the css(recommended to have it at the top):

{% set myNewRedColor = '#ff0000' %}

useage in this particular CSS file:

background-color: {{ myNewRedColor }};

(you can put it everywhere).

The benefit of the hubl is that you can set up a few colors at the beginning and put them everywhere. If you'll decide to change a color in the future you'll need to change it only at the top ( in the "set" row).

p.s.: If you don't find the class in the CSS - simply add it. I recommend you to add it at the very bottom of the CSS file.

best,

Anton

Re: Background color change in global template for landing page

MarthaLord — Mon, 04 May 2020 11:13:48 GMT

Thank you. Here is the screenshot. The color should be #1c3564, and it should not be the full width of the page. It should be the width of the email body.

Re: Background color change in global template for landing page

MarthaLord — Mon, 04 May 2020 11:32:37 GMT

Thank you. Because I don't do coding, I'm hesitant to make any changes, but I'll review your directions and attempt it. The footer is also wider (full page width) than it should be. How would I fix that?

Re: Background color change in global template for landing page

Anton — Mon, 04 May 2020 17:51:48 GMT

Hi @MarthaLord,

ok. So you mean the "contact us" part or "everything"(About, Header, Contact us)?

If it's "everything":

- simply add ".page center" to ".footer-background". It should look like this:

.footer-background .page-center{
background: #1c3564;
}

If just the "right column"(the place where the email information is displayed) and you haven't changed anything in the default classes:

.footer-container-wrapper .contact-us{
background: #1c3564;
}

If this won't work - please provide a preview link of the whole template (not just the footer group).

best,

Anton