Overlay is clouding text & not responsive to color change

Hi There,

Great theme.

Trying to edit the stock demo. In it 2 rows with overlays are clouding the text. The overlay seems to go over the call to action widget and not under it. I just changed the text in your demo and no other settings so am not sure what went wrong. And have been going crazy editing the text widget fonts and the colors are not changing at all. The click box seems to be under the overlay as well and seems faint.

I have the same problem with the footer font as well, though it has no overlay. How do i edit the content there to put my copyright?

site

Notice the main menu and testimonials are clear.

Am not a coder. Please advise.

Hope to hear from you and thanks in advance.

Cheers!

Hi,

Can you share your site URL?

Regards,
Awan

Thank you for your response. sorry here.

Also:

Hi,

I noticed your the title of your text widget is already has CSS code to change the font color, maybe you can check it? or you can try this another CSS code below and put it to: Customize > Additional CSS:

div#panel-w58c2256ece781-0-0-0 .widget-title {
    color: white !important;
}

Regards,
Awan

Thank you for your response Awan.

That fixed only the header of the layout builder row. It did not fix all the text, text box and call to action text inside the 2 call to action boxes in that row.

It also did not fix the other call to action row.

I have deleted the css code as you suggested and it still resolves all the text behind the overlay.

Screenshot below.

Please advise. Thanks

Ah sorry, I forget about it :slight_smile:

Here you go:

.roll-promobox .title {
    color: white !important;
}

Thank you Roman. Those 2 codes fixed my 2 rows. But after adding it, my client row header has gone behind the overlay itself.

Am not sure why all the rows have gone behind the overlay. I just created the child theme. I even deleted all the css you mentioned.

Please advise. Thanks

Hi Roman,

I noticed that after inserting those codes, the client header went under the overlay. And when i changed the text inside the sydney call to action widget inside the layout builder, the header of that row went under the overlay as well.

I have deleted all the code you pointed out and just inserted your code.

I have no idea why it is doing that? I need to be able to edit the content every now and then. Could you help me out please?

Hope to hear from you cheers.

Hi,

It’s because the CSS code in above are working for the element ID. So, when you change it, it will create new element ID.

Okay, lets try to using the element ID of the section instead. you can replace this code

div#panel-w58c2256ece781-0-0-0 .widget-title {
    color: white !important;
}

with this

#pg-8-9 .widget-title, #pg-8-6 .widget-title {
    color: white !important;
}

Regards,
Awan

Thank you so much Awan. That did it! Cheers!

Hi Awan,

Kharis was helping me with the header search and we added some header, footer, and css scripts and some of the headers disappeared and went under the overlay again. When i removed the scripts Kharis asked me to put in, the headers wouldn’t go to how we fixed it before.

Kharis just instructed me to add these codes into:

header:

<style>
.slide-text .contain .maintitle,
.slide-text .contain .subtitle{
display: none;
}
<style>

footer:

<script>
(function($){

"use strict";

if( $('.header-slider').length ) {

  jQuery(window).load(function () {
  
    var topSearch  = $('.top-search');
    
    $('.header-slider').append(topSearch);
    
  });

}

})(jQuery);
</script>

css:

.top-search {
position: absolute;
z-index: 9999;
display: block;
max-width: 250px;
left: 50%;
top: 80%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
padding: 0 !important;
}

This is our thread: https://athemes.com/forums/topic/search-widget-on-header-image/#

Hope you can help me out thanks.

The code from Kharis is not related with my custom CSS code in above.
It’s happened because you’ve modified the section and that makes the element ID changed.
Now, please replace my custom CSS code in above with this:

#pg-8-7 .widget-title, #pg-8-10 .widget-title {
    color: white !important;
}

#pg-8-9 .widget-title {
    color: rgb(73, 63, 63) !important;
}

Please see this how to get the element ID of the section:

Thanks Awan.

Am just gonna post the code below for anyone else experiencing this. Cheers!

#pg-8-7 .widget-title,#pg-8-10 .widget-title {
color: white !important;
}

#pg-8-9 .widget-title {
color: rgb(73, 63, 63) !important;
}

.roll-promobox .title {
color: white !important;
}