Adjusting background color on Email subscription preferences page?

Hi all,

I am looking to adjust the background of my company’s Email subscriptions page to a default solid color.

I implemented the following code in the HTML header section across all pages, but am not seeing anything come through (it’s still showing the custom-coded yellow that was implemented back in the fall of 2020):

<style>
body {
background-color: black;
}
</style>

Attached a screenshot to show where I implemented the simple CSS code. Any guidance would be greatly appreciated!

- David C.

Hey @DCath

Do you happen to have a link to the page so we can see?

@jonchim can definitely help you out ( I put you on the spot, Jon :upside_down_face:)

Hi! It’s our email subscription page – let me know if that link works for you.
* David
This message may contain confidential, proprietary and/or legally privileged information of the Columbus Crew. If it has been sent to you in error, please inform the sender of the error, and immediately delete this message from your system. Thank you.

haha thank you @dennisedson :wink:

@DCath looks like you just need to remove -color from background-color in the styles in the head and just use background, that should do the trick

body {
background: black;
}

Perfect, thanks!
While I have your attention…
Any advice on manually overriding the logo/crest we have placed in the top-left? Even if it’s just removing the crest, as opposed to replacing it, any advice would be great appreciated. Thanks!
This message may contain confidential, proprietary and/or legally privileged information of the Columbus Crew. If it has been sent to you in error, please inform the sender of the error, and immediately delete this message from your system. Thank you.

no problem @DCath

You can hide it with css and/or update it in the branding section in hubspot settings. This should do the trick

.logo__custom {
 display: none;
}

Thanks Jon! I adjusted the favicon through the branding section, but the update did not go through for the main logo when I adjusted through the branding section.

However, the code you provided did work should I need to remove the logo in a pinch.

My next question -- what’s the proper way to utilize the simple CSS code should I want to put in a different logo? I imagine I need to upload the file somewhere, then plug the file into the code? Just not sure how.

Thanks!

Hey @DCath

If you are in a page editor and you click on contents in the left hand column, you should see a global header.

Clicking into that will lead you to where you logo is living. You can override the default logo set in your settings here. Because this is a global module, it will affect all pages using it.

We had a custom-coded template for our pages (we basically don’t use any individual landing pages, and I’m only concerned about updating our Email subscriptions page), so it appears any default override I try to employ through the Branding tab is null. Though, with code adjustments in the Site header HTML on the Templates tab, those do take effect, hence me wanting to know how to add a logo file as a custom code snippet within this:

<style>
 .logo__custom { display: none; }

 body {
 background: black;
 }
 </style>

Of course, I would be swapping out the none

I just emailed as a reply, but reposting on the thread here.

We don’t really use any landing pages through HubSpot, but the domain in question is info.columbuscrewsc.com, and that template is utilized for our Email subscription preferences page, which is the primary page I am concerned about, since that is the primary page in which I’d like to override the default logo placement.

Hi @DCath ,

Please add this code in the backend template open the design tool find your template and add this code in Additional <head> markup.
Sharing a video for your convenience:

https://www.loom.com/share/7dc6c91eb8bf4aff921b4d4c3a0f9639

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.