Need help customizing Footer Color

Sparkling
1

Hi guys! This is my first time using your theme.

I tried to change the footer background color and went to
Customizing/Sparkling/Options/Footer but it doesn’t allow me
changing the code.
The URL is http://armazem-virtual.com/siteorigin

What am I doing wrong?

2

Hi @veruska,

I hope you are well today and thank you for your question.

The color should be changed from the footer theme option that you described but if it’s not working for you then you can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS



#colophon * {
    color: #fff;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

3

Hi @movin

I tried to follow your instructions but it didn’t work either.
Since I had another CSS code that area, I wonder if that might have been the reason.

This is the total code I have now under Custom CSS:

.mega-sub-menu { background-color: #dddddd !important; } #loginform, .login-username, .login-password { color: white !important; padding-right: 10px !important; }

#colophon * {
color: #265a95;
}

4

Yes this can be due to CSS conflict.

Please try using the below CSS code on the top of your existing custom CSS code.

#colophon * {
    color: #265a95 !important;
}
5

I tried that but the only thing it changed was the color of the text for the menu assigned to that area. The background is still dark.

This is how I have it now:

#colophon * {
color: #265a95 !important;
}
.mega-sub-menu { background-color: #dddddd !important; } #loginform, .login-username, .login-password { color: white !important; padding-right: 10px !important; }

6

To change the footer background color please use the below CSS code.

#page #colophon { background-color: #000; }