Changing Footer Color

Hi Sherree,

can you please provide a link to your website?

Oops! It was late when I posted, apologies for not including my site address.

Site is https://www.talaconsulting.com

I also have another question. I’m using color #430F26 (it’s the color in my logo) as the color for panels that are labeled “new service” and “business bites.” It is also the color of the h1 header (and the title “Business Chaos Got You Stuck,” among other places. For some reason, on the front page, instead of maroon’ish, it’s coming up more pink’ish. (Note: it’s coming up with that pink’ish color in the footer). I think there may be a conflict with the background color (which I can’t find anywhere). Is there a way to resolve this?

Thanks in advance for any help.

Sherree

Hi Sherree,

thanks for providing your URL.

To lighten up your footer, you could add this CSS code:

.site-footer::before { rgba(31, 29, 26, 0.3); }

You can change the 0.3 value at the end of the code as you like. That’s the opacity (transparency). If you increase the value, it will be darker and if you decrease the value, it will be lighter.

In order to add custom CSS code to your website, you could make use of plugins like Simple Custom CSS.

The color in the footer is affected by several things. It seems you’ve uploaded a background image for the footer and then there is also the above mentioned background color which affects the footer as well.

You could try to remove the background image in the footer and then see if that’s what you are looking for. We haven’t installed this theme, but there probably is an option somewhere to remove the image.

MHThemes —

Thank you for the CSS code to change the footer color, I appreciate it. I do have the plugin for adding CSS easily.

Regarding the footer and background: I believe the image (which I don’t see) and the background color are part of the original theme style.

Where do I look to remove the image, and change the color? Or, what CSS code can I use to change the background color.

Thanks again for any help.

Sherree

MHTheme, Unfortunately, that code for the footer didn’t work.

This is what I’m finding (under “inspect element) when I look for the background color.

color: rgb(114, 107, 96);
: style.css:278;
: body rgb(114, 107, 96);

I have no idea where I can find this on the stylesheet or what CSS code to use in the CSS editor. I’d like it to be white.

Also, I can’t figure out what the image is that is in the footer. It came with the theme, but it’s not in my media folder.

Background color is more important at this point. So if there is no way to fix this, I’ll remove the footer/widgets altogether.

Thanks again for any help.

Sherree

Hi Sherree,

The underlying image is the theme’s header image. It is hidden by the footer area’s background colour and it’s not necessary for you to remove the header image in order to change the footer’s background colour.

If you still wish to remove the image then you can do so by navigating to Appearance > Customize > Header Image.

The code provided by @mh-themes (thank you for your help!) should have worked correctly to change the background colour. If you’d like to change the colour to white, though, then I recommend using a HEX code. Like so:

.site-footer::before {
    background: #FFF;
}

Add the above to the editor of your custom CSS plugin and let me know how you get on.

Hi Siobhan, and thank you so much for your response.

Regarding the footer w/widgets. I only wanted to lighten it up – I goofed. White is not appropriate (yes, the hex code worked)! I added a header image for my pages. Not sure I understand how that conflicts with the footer area.

Here’s the problem that started all of this: I changed the h1 color from the light blue to my logo color. Unfortunately, I didn’t think there would be an h1 heading in the footer (w/widgets). I need to change that color only to something lighter and I’ll leave the black footer alone. You can’t read the “Get the Newsletter” or “Let’s Connect.”

I’m curious. When you loaded my site, did you see it turn black (or a darker color) before the content of my site loaded? I believe that is the theme’s actual background color (since the theme is black-based). That’s one of the things I’ve been trying to remove (and that’s what I’m trying to make white or transparent), but I’m not sure if that’s possible.

I hope all of this makes sense. Thank you again. I really appreciate all the help I’ve been given. Also, I’ve used almost all of the code outlined in other posts in the forum…saved me from asking the same questions!

Sherree

Hi Sherree,

Regarding the footer w/widgets. I only wanted to lighten it up – I goofed. White is not appropriate (yes, the hex code worked)!

You could search for the specific HEX code that matches most closely to the colour you’re after. Here’s an example of a site that I’ve used before to get the corresponding HEX code for a colour:

https://www.color-hex.com/

I added a header image for my pages. Not sure I understand how that conflicts with the footer area.

The theme uses the image as a fallback background image, however, it’s not necessary for you to display it in the footer. Only the background colour you set for the footer area will display.

I need to change that color only to something lighter and I’ll leave the black footer alone. You can’t read the “Get the Newsletter” or “Let’s Connect.”

If you’d like to only change the headers in the footer area, then you can target them with .widget-title. The following, for example, would change the titles to white:

.widget-title {
    color: #FFF;
}

Replace #FFF with any HEX code of your choice in the above snippet.

I’m curious. When you loaded my site, did you see it turn black (or a darker color) before the content of my site loaded? I believe that is the theme’s actual background color (since the theme is black-based). That’s one of the things I’ve been trying to remove (and that’s what I’m trying to make white or transparent), but I’m not sure if that’s possible.

I saw a very brief flash of colour when loading your site in Firefox for the first time. It looks to be the default background colour of the panels. As you can’t edit the background colour of the very top panel via Appearance > Customize, you can instead change it with some custom CSS:

#pique-hero {
    background-color: #FFF;
}

Let me know how that goes.

Also, I’ve used almost all of the code outlined in other posts in the forum…saved me from asking the same questions!

I’m so glad to hear that the forum has been a useful resource for you! ??

Hi Siobhan,

Thank you so much for the codes. They worked, and did what I wanted. I think I’m about done with changes!

Thank you again – I appreciate your time and help.

Sherree

You’re most welcome, Sherre! I’m glad that helped out.

I’m actually having the same issue with my website footer (https://namasteconcharde.com/) and I’m not finding much luck with the codes above. Do you have any idea why it would do that?