CMS Development

MarthaLord
Participant

Background color change in global template for landing page

SOLVE

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

1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Background color change in global template for landing page

SOLVE

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). 

Bildschirmfoto 2020-05-04 um 19.50.02.png

 

 

best, 

Anton

Anton Bujanowski Signature

View solution in original post

0 Upvotes
5 Replies 5
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Background color change in global template for landing page

SOLVE

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 

Bildschirmfoto 2020-05-02 um 13.17.23.png

 

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-backgroundin 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;

or 

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

Anton Bujanowski Signature
0 Upvotes
MarthaLord
Participant

Background color change in global template for landing page

SOLVE

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?

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Background color change in global template for landing page

SOLVE

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). 

Bildschirmfoto 2020-05-04 um 19.50.02.png

 

 

best, 

Anton

Anton Bujanowski Signature
0 Upvotes
psdtohubspot
Key Advisor

Background color change in global template for landing page

SOLVE

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. 

0 Upvotes
MarthaLord
Participant

Background color change in global template for landing page

SOLVE

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.screenshot of template footer.PNG

0 Upvotes