How can I change the footer background in the Twenty Seventeen Theme

Give this a try, changing the example purple to your preferred colour:

.site-footer {
  background-color: #bb00bb; 
}

Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated.

Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

A custom CSS editor is also included in the Customizer with WordPress 4.7.

Hi , Does’t work for me in the child theme.
Any tips?

@twannie – can you provide a link to your site? We’d need that to troubleshoot.

Worked perfectly for me. Thank you, Kathryn.

@majority Glad to hear that and you’re very welcome.

I’m having a tough time for two reasons:

1) I cannot find an index or glossary on the Codex showing what all the options are for page elements, classes, and things you can style with the CSS. I have been using a CSS dictionary from https://www.htmldog.com/references/css/properties/ where I learned some of the things I want to do, but not how to do them to the right elements/classes/ whatever in WordPress (not finding what I need in the Codex!). Without an index, glossary, or a place that defines things, I have to waste time using other people’s samples, dropping them into the CSS editor, and tweaking them to see what kind of effect they had. I’m not getting closer to my solution, and since I can’t retain the information of what I’ve seen and done in my head for future reference, it is not a good use of my time (yes, I am patient/impatient within reason). Especially since I can’t see the CSS sheet in my WordPress directory, which means the CSS is probably in the Php files and I’m not going there… I just want to use the CSS editor!

2) Here’s what I’m trying to do. I used a plugin to take away the big front page for Twenty Seventeen and make it a narrow banner (it also allowed me to use Google Fonts, yay!). What I wanted was a banner just a bit bigger than what it is now. I also wanted to use that background image that the subsequent sections/pages would scroll over. Then I would set their background colour, which is white (light theme), to an opacity of 0.8 so that the background header image would show through. Like, I’ve managed to take the whole site to 0.8 opacity, which includes the header image – just a dimming down effect, but it did nothing to make the white background transparent to show the background image. However, my base assumption is that the header background image is static to the site, and the Pages scroll up over it like a Bootstrap theme. The dev site is https://p-school.bigcitylittlehomestead.ca/

I have to put this down for now. A few hours of work on it has frustrated me and I have other things to tend to in my business. Would love to come back to it with my assumption confirmed or denied, a better set of references, and maybe even a solution! Or, could there be an online course for WordPress site admins who are getting started with theme customization? I used to know HTML and CSS back in the day but I was never a full stack kind of person even then. Thanks.

• This reply was modified 7 years, 10 months ago by janerette.

@janerette – sorry to hear you’ve had a frustrating time customizing Twenty Seventeen.

You can see the stylesheet here: https://p-school.bigcitylittlehomestead.ca/wp-content/themes/twentyseventeen/style.css

I suggest learning how to use a browser inspector as the best way to figure out what elements to target with CSS overrides. Here are some other good resources:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://cssworkshop.wordpress.com/

For all your CSS changes, don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated.

An easy way to add custom CSS is to use the CSS editor included in the Customizer as of WordPress 4.7. Head to Appearance > Customize > Additional CSS to add your custom CSS.

To get help with your modification, please start a new thread so it’ll be easier to spot as a new question, and the original poster won’t continue to receive email notifications about an unrelated issue. Thanks!