How to customize background and font colours in custom templates?

[Elias_Rizk]

Hi - I want to change the background and font colours in the headers and footers of my custom template. What would be the best way to go about it? The templates were built with HubL. 

Thanks,

[Ty]

Hi Elias,

One of the possible solutions you could use is setting a class name on those pages that the template generates. You can do this by going to Content > Design Manager > Edit Page > Body CSS

From the pop up, you can set a defining class, such as "custom-page" or anything you want to define these pages by. It's important to remember that classes can only use hyphen and underscores, not spaces.

Now that you have a custom class inputted, you can hit save. Next is styling your footer, so hop into your main CSS file and find the section of code for your footer. I took at look at your site and saw your footer has the class of "custom-footer". So you could use this line of code to target the text elements (h1-6 / p) on your customer footer, only on pages with the custom class you specified earlier.

.your-custom-class .custom-footer h1, 
.your-custom-class .custom-footer h2, 
.your-custom-class .custom-footer h3, 
.your-custom-class .custom-footer h4, 
.your-custom-class .custom-footer h5, 
.your-custom-class .custom-footer h6,
.your-custom-class .custom-footer p{
	color: red; /* Use whatever color/hex code you want here */
}  

Of course, you will need to replace '.your-custom-class' with whatever you chose to use from step one, but the .custom-footer' pre-selector should work for your website.

I hope this helps you out! Let me know if you need any more help 🙂

-- Ty

[MarketingMike]

How does one "hop into your main CSS body"? Are these the style sheets? When inserting the text elements (h1-6 / p), which number corresponds to each text element?

Specifically, I'm attempting to modify the background color of a global footer originally produced by Hubspot to our branded colors. 

[Ty]

Hi @MarketingMike,

I have answers for all 3 of your questions 🙂

CSS File

The CSS file I was referring to is the company file you have that controls your style. I took a look at your website / portal, and for your website, the file would be the `main.css' file. If this is your first time playing in a CSS file, I would HIGHLY recommend you create a copy of the original in case you have to revert for some reason in the future. 

Text Elements
The text elements are kind of different on everyone's webpage, but when a browser is looking at your site, those are the order of how it will read it.

H1 - Most important, should be your biggest text, you want to try and keep this to 1 maxinum per page

H2 - Second important, usually is your subhead under the H1

H3 - Third most important, usually seen as headers to different sections on the same page

H4 - H5 - Respective order, but people usually use these to highlight certain text, such as bold or italicize

H6 - Sixth importan to your browser, is usually used as a 'source', should be the smallest headline.

p - This is your paragraph tag, it will be read seperately to your headlines, these sizes on the p tag should stay consisten throughout your website.

Changing Background Color on Footer

If you take a look at that main.css file in your portal, you should see all the css that controls how your site looks.

I found the part that would be affecting your footer, it is called ".footer" on line 452. It looks like this:

.footer {
    background: #5D5F6D;
    margin-top: 0px;
    color: white;
    padding-left: 20px;
}

You will be changing the part that says "background:", just replace the '5D5F6D" with the hex code of the color you would like. That should change it across your whole site!

Let me know if you need any more help and I'll be happy to take a look!

-- Ty

[mohammed]

I am unable to put the background image to total emailer like this. Any One please help in this.

[Elias_Rizk]

Thank you Ty - I made a few changes but there are things that I am not knowing how to modify making my blog and info pages inconsistent with the home page.

Elias R.