Transparent block in the call to action widget


My question is how to add a red transperent box to the call-to-action widget So the text could stay black or white. Because when I add a image the text isn’t easy to read any more.

Furthermore I would like to thank You for the effort and the already delivered work. The theme looks great and I’ve read the whole support so I see that You really working hard for this free theme. So many thx :slight_smile:

cheers Tomasz


Why not simply change the text color to one that works well with your image? You can do that from the Customizer.

If the image is very busy, then no text color will do the trick.

I tried custom css:
.call-to-action <
Background: rgba(255, 0,0, 0.5); >

But nothing happended.

I see. It’s a bit more complex.
Add this:

.action-area {
  position: relative;
.action-area:after {
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
.action-area .container {
  position: relative;
  z-index: 1;

I see now that my question was incorret formulated.

I meant a transparent box where the text will be displeyd

something like this:

prts scrn of a differrent website

I found it: this is what I meant:

#call-to-action .container{
background-color: rgba(217,65,27,0.7);
padding: 20px 20px 40px 20px;

But thx anyway, the whole section overlay in transparent color will be sertainly usefull in the future :slight_smile: