Change the background color of Call For Action Widget

Hello dear colorlib Support,

I would like to use the Call For Action for Homepage widget on a different page, and have managed to do that with a plugin. Is it possible to change the background color of that CFA Widget via CSS? Best would be if I could change it for pages and the front page differently. What are the codes to do this?

Thanks in advance :slight_smile: Have a great day,
Dominik

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the button colors by going to Appearance > Customize > Additional CSS and pasting it there.


/*Button color*/
.image-bg .btn.btn-filled {
    background: red;
    color: #fff;
    border-color: red;
}

.page .image-bg .btn.btn-filled {
    background: blue;
    color: #fff;
    border-color: blue;
}

If the code does not work then please provide a link to your website so that I can inspect it.

Best Regards,
Support

Hey :slight_smile:

unfortunately the code did not work. Here’s the link to an example:

https://studna-band.de/ihre-vorteile/

1 ) I want to change the background color of the CFA Module at the bottom to simple white so the button does not appear to hang directly on the edge.

  1. And is there a way to align the button to the middle of the text instead of middle of the top line?

Hello there,

Thanks for adding the link.

Please try out the following CSS:

/*CFA BG color*/ .bg-secondary { background: #fff; }

@media (min-width: 768px)
.col-sm-9 {
width: 100%;
}

@media (min-width: 768px)
bootstrap.min.css?ver=4.8.3:5
.col-sm-3 {
width: 25%;
margin-left: 38%;
}

Best Regards,
Support

Thanks a lot :slight_smile: Not sure thought what the second and third box do, as nothing is happening (on neither device) when I add or remove those @media codes.

Is there a way to move the button horizontally to the left by x% …or to give it a padding on the right?