- Posts
I need to make the footer a different color from the header–which is a bold yellow to match our brand. It’s too loud for the footer, so I need a different color. Which is the best way to achieve this?
Hello Neal,
Thank you for contacting us. The steps can differ based on your specific site and theme, but I recommend trying the “Colors” tool in the Customizer. Clicking the color blocks will highlight the affected area, and allow you to change the color or transparency.
If you want to change the color of a footer Widget, you can go to Customize–>Widgets. Select the footer widget area (such as “Footer Center”), then select your widget. You should then be able to modify the widget using the editor.
Thank you,
John-Paul
John-Paul,
Thanks for the reply, but I think I need to change the CSS somewhere. The customizer won’t let you make the footer color separate from the header and the widgets don’t effect the background color either. Here’s the site. http://biz207.inmotionhosting.com/~eastfo6/lakinsgorgescheese.com/
We need the footer color to not be so yellow… but the header is in line with our branding.
Hi, Neal!
Thanks for your comment clarifying your request. I believe you can add this code:
.palette-primary .site-footer { background-color: #bdcebe !important; color: black !important; }to the CSS Customizer tool. This will change just the footer background color. You can modify the color by changing “#bdcebe” according to the color you’d like: HTML color palette.
Please keep in mind to create a backup of your site before and after making the changes, to ensure you have a fallback point, in the case of unexpected behavior from the code. I hope this helps!
Sincerely,
Carlos E
Great, that was perfect Carlos. Thanks!
Now…. any idea how I can alter the background or place a shaded box behind the products in the “shop online” page so they stand out better?
That’s great to see Neal!
The CSS alterations are a bit intricate. However, finding the elements and adjusting them to your liking can be simplified using Google Chrome’s Developer Console. This is how I was able to locate and manipulate the CSS live and eventually provide you that code.
All you have to do is navigate to your Shop Online page in Google Chrome. Simply right click on the “element” you want to adjust. In this case, the product’s image placeholder or the image itself. Select “Inspect Element” from the menu that is displayed. This will launch the Google Developer Console in the browser. Following their instructions, you can modify the CSS/HTML live to pin point the correct code to add to the CSS Editor in BoldGrid.
I’ll post another comment, once I locate some more CSS details related to those products. Thanks for your patience!
Sincerely,
Carlos E
Thanks again for your patience Neal! I believe I have found 2 solutions for you to try.
.woocommerce ul.products li.product a img {
box-shadow: 20px 20px 20px 20px red;
}
That code will place a red shadow around the image of each product.
.palette-primary.woocommerce-page ul.products li.product, .palette-primary.woocommerce ul.products li.product {
background-color: antiquewhite;
opacity: .7;
}
That code will place an “antique white” box around the entire list of products. Also, with that code, you can adjust the opacity and background-color to what you’d like!I hope this helps!
Sincerely,
Carlos E
I Want my footer to look red please, check my blog at [redacted]
Hi Joe-
I took a look at your blog, and it doesn’t look like you’re using one of BoldGrid’s themes. As far as I can tell, your theme comes from AFthemes.com.
Since those themes are commercial, I wasn’t able to check out your theme to see how to change the footer color, but I did find that AFthemes has a dedicated Support area.
- The topic ‘How can I make the footer a different color from the header…or transparent so the background shows through?’ is closed to new replies.
