Changing Footer Color

Hello @klconnor
Thanks for using KeenShot. Currently, we don’t have any option of customizing settings for changing the footer background color.

For now, you can change the footer color by following below steps:
1. Navigate to Appearance>Customize>Additional CSS

2. Paste the following code on the additional CSS box

.footer {
    background: red;
}

3. Change the red color with your color.
Then save it. That’s all.

We will add an option for changing the color on the customize panel on the next update.

Can you also provide additional CSS to change the color of the widgets in the footer:

* Footer Copyright (I want to change the background color)
* Footer Address (now it is all dark and light purple – I want to change that)

Is this possible?

Hello @liesbeth84
copy the below CSS codes and change the colors and then place it on the Customize > Additional CSS

/*------ change footer copyright background-color--------
* change #eae4fe with your desired color
*/
.footer .footer-wrapper .widget .copy-right{
    background: #eae4fe; 
}

/*------ change footer address icon color--------
* change purple with your desired color
*/
.footer .quick-contact .info-item .icon{
    background: purple; 
}

/*------ change footer address text color--------
* change black with your desired color
*/
.footer .quick-contact .info-item a,
.footer .quick-contact .info-item p{
    color: black ; 
}

Thank you for your prompt reply. I almost got it right.

If I use the CSS code hereunder, the bar for phone number is half white, half light purple. I want it all white:

.footer .quick-contact .info-item a,
.footer .quick-contact .info-item p{
background: #FFFFFF;
}

Can I change the colors of the line under the title?

Can I change the hover color?

Thanks again.

@liesbeth84
Change the under title line by using the below CSS

/*---------- change the #7b62d8 with your desired color -------------*/
.stylish-border:before{
    background: #7b62d8;
}

/*----- change the address hover color, change #fff with your desired color --------*/
.footer .quick-contact .info-item a:hover{
color: #fff;
}