Call to action: change font color / add layer

Hi, I’m setting up my new site. You can see it here:

http://guillemc-cp192.wordpresstemporal.com/

As you can see, I’m using the “Call to action” sections as a portfolio, so to speak. Each section will lead to a different page. My problem now is the visibility of the text. I’d like to change it to white instead of grey, both for the headline and the subtitle. I managed to change the button already, but can’t figure out how to do it with the text. I tried changing it from the widget itself, but it won’t work.

Also, I’m wondering if there’s any way to add a layer to the background image in order to make it darker (like a dotted pattern or something similar).

Thank you so much.

Hello there,

Thank you for getting in touch here.

To change the text color, could you please try to add the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.action-area .widget-title,
.action-area .action-text{
  color: #fff !important;
}

> … if there’s any way to add a layer to the background image in order to make it darker (like a dotted pattern or something similar).

Try to apply the following CSS code:

.action-area{
  position: relative;
}

.action-area:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%; 
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .4);
}  

To have a dotted pattern background, you would need to apply the following:

.action-area:before{
  background-image: url('http://guillemc-cp192.wordpresstemporal.com/path/to/dotted-image.png') top left repeat;
}

I hope this reply helps.

Regards,
Kharis

Wow. That as quick! It worked! Thank you so much! (I’m sure I’ll have more questions today haha)

Have a nice weekend!

Hello there,

Thank you for updating me.

I am glad to know that worked for you.

Please post your other questions in a new topic with a proper title. We would be more than happy to assist you from there.

Have a nice weekend, too!

Regards,
Kharis

Hi Kharis,

Is there is any way to change the font on button in “Call to Action”.

Thanks

Hello @taimoor03,

You can use the CSS snippet below:


.action-area .call-to-action{
  font-family: "Arial Black",sans-serif;
}

Adjust the value as needed. You might be interested to read about its rule on these links:

Regards,
Kharis

Great, thats worked. Thanks a lot.

My pleasure!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis