Changing footer color

That would be applied to this container:

#bottom-group {}

I tried changing the #bottom-group background color to blue, but it still remained tan when I reloaded. I tried adding the blue background color to other mentions of bottom-group as well, succeeding in changing the widget background blue but not the rest of the footer. Anywhere else it could be getting the tan color?

#featured-bottom-group {
	background-color: #769CD0;
}
#bottom-group {
	padding: 0.5% 0;
	background-color: #769CD0;
	color: #fff;
}
#bottom-group .widget {
	margin: 15px 0;
	background-color: #769CD0;
}

How are you modifying the CSS?

For the different colour presets that comes with the theme, the style.css for the colours loads after the theme’s own style.css which means if you are trying to edit the theme’s own style.css file, it won’t work.

You will need to (if not doing so) create a custom stylesheet for your overrides. If you are using Jetpack, you can use the Edit CSS feature, otherwise try a plugin called Simple Custom CSS. This should create a new stylesheet and should load it after the theme and colour preset stylesheets. Then you can add this:

#bottom-group {
background-color: #769CD0;
}

If all else fails, add !important after the colour like this:

#bottom-group {
background-color: #769CD0 !important;
}

Ultimately, if you want to modify the CSS of any theme, it’s best to do it from a custom stylesheet that is generated from a plugin method. If you are wanting to modify anything else in a theme, such as HTML code, then a child theme is the best solution (which you can also do custom CSS from there instead)

What happens if you modify any theme files directly, should an update come available, you will lose all your changes made because the update will overwrite the theme files.