Change footer widget background color in Chateau theme
-
Is it possible to use CSS to change the background color of footer widgets in the Chateau theme? If so how do I do that. Custom CSS appears to only work on the overall background, which I don’t want to change (I have custom design).
Or is there another way to do it? Background colors in the theme options does not appear to allow targeting the footer areas.
The blog I need help with is: (visible only to logged in users)
-
Found something that worked. Now I would like someone to point me how to target it to a specific footer area. Chateau has five.
#colophon {
background: none #D3D3D3;
border-top-color: #708090;
-moz-box-shadow: 0 -7px 0 #YOUR-SHADOW-COLOR;
-webkit-box-shadow: 0 -7px 0 #778899;
box-shadow: 0 -7px 0 #778899;
} -
Hi there,
You can change the background color of the footer widgets in the Chateau theme using CSS but as you guessed, it isn’t quite as simple as changing the background color for a whole block. To find out what part of the code needs to be changed, you can use the Inspector that comes with your browser. Here is more info on how to get started with this:
https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
You’ll need to add a widget or two (or 5) to your footer to be able to inspect them, even if you add a few simple text widgets with a title and a couple of words. The beauty of using inspector is that you can make changes right in the browser window to see if something might work, but the changes aren’t permanent until you add the code into your custom CSS on your site.
Let us know if you need a hand!
Cheers,
-
Actually could use some help. I haven’t done enough with CSS to understand exactly what I’m pointing the codes at.
#colophon applied the colors to the entire footer. Do I use #upper-footer-widgets and “footer-widgets-holder” to separate this or does this need to be pointed to something else?
Separating the color scheme in the upper footer area from the columned widget container below is all I need to do. Am not looking to color the bottom ones individually.
-
Hi Steve,
To change the background color of the lower footer widget container add this to your CSS and replace with whatever color hex code you wish to use:
#footer-widgets-holder { padding: 35px 20px; background-color: #ccc; }Hope that helps. :-)
Cheers!
-
-
-
So, how do I change the text color in addition to the backgroud? I am clearly targeting the wrong thing. “color” appears to have no effect.
#footer-widgets-holder {
padding: 35px 20px;
background-color: white;
color: black;
} -
Thank you! That worked. Just for my information what is the difference between leading the line with a period or a #? Is that specific to the element I’m trying to control or does it mean something else?
-
Hi Steve,
Great question! A period denotes a class name. We use lots of classes in CSS and you can use the same class several times on the same page. A # denotes an ID and you should use a particular ID only once per page.
In your case, there can be only one #widget-footer-holder ID on that page, but there are several uses of the .footer-widget-items class on that page.
Here’s a link to a basic explanation of CSS classes and ID’s:
https://www.washington.edu/accesscomputing/webd2/student/unit3/module5/lesson1.html
Here’s a link to the CSS Tricks website that is a great reference for all things CSS:
Cheers!
- The topic ‘Change footer widget background color in Chateau theme’ is closed to new replies.
WordPress.com Forums 