Theme overlay for Umami

[traci cooley]

Hi again,
I am wondering how I can extend the theme overlay so that it fills up the whole page or site. It looks silly with my background pictures being partly clear and partly darkened out. I have done a bunch of research and I just don’t know what I am looking for to fix it. LOL You helped me lighten the transparency which I LOVE.. Now I just nee to get the overlay over the entire screen. I hope that makes sense.

Thank you again for your help

[Bill Robbins]

Hello Traci,

Just about anything can be done. Let me make sure I understand exactly what you’re going for here. Are you saying you want the semi-transparent black to be everywhere and not just where there is text. For example there would be no space on the right where that background wouldn’t be present. Is that what you’re looking for?

Enjoy your weekend,
Bill

[traci cooley]

I believe that is what I am looking for. The transparent overlay goes over that little bit of the right side that is not covered. The feedback I have received says that it is a bit distracting from the content.

Thank you so much for your help
Traci

[Bill Robbins]

I think we can do that. Give this a try:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #content,
   #sidebar {
   	background: none !important; 
   	z-index: 10;
   }
   
   body:after {
   	content: ' ';
   	position: absolute;
   	top: 0;
   	left: 0;
   	right: 0;
   	bottom: 0;
   	width: 100%;
   	height: 100%;
   	z-index: 0;
   	background-color:  rgba(0, 0, 0, 0.8);
   }
   

3. Update your settings.

Take care,
Bill

[traci cooley]

Awesome!!!! Just what I was looking for!!!! Thank you so much!!!!! Have a great weekend. Traci

[Bill Robbins]

Fantastic 🙂

[traci cooley]

one more question on this subject. I just noticed that it only scrolls part way down. Is there a way to have the overlay scroll all the way down? So the text is easier to read as the site continues to grow?

[Bill Robbins]

I had hoped that would work without requiring us to make an edit, but that doesn’t appear to be possible after all. So let’s do this:

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose footer.php and find this line:

   
   <!-- Load wp_footer -->
   

3. Right above that add this:

   
   <div id="cover"></div>
   

   (Be sure to copy that code from the support site and not the notification email).

4. Next go to the Custom CSS box in the theme options again. You can take this out:

   
   body:after {
   	content: ' ';
   	position: absolute;
   	top: 0;
   	left: 0;
   	right: 0;
   	bottom: 0;
   	width: 100%;
   	height: 100%;
   	z-index: 0;
   	background-color:  rgba(0, 0, 0, 0.8);
   }
   

   and add this in its place:

   
   #cover {
   	position: fixed;
   	top: 0;
   	left: 0;
   	right: 0;
   	bottom: 0;
   	height: 100%;
   	width: 100%;
   	z-index: 0;
   	background-color:  rgba(0, 0, 0, 0.8);
   }
   

5. Save your changes.

See if that doesn’t do a more complete job of covering it all for you.

Bill

[traci cooley]

Awesome, that got it to cover everything which I love. but now it is not as dark as it was:( Any thoughts

[traci cooley]

I fixed it. So sorry I did not save it the first time. You Rock. thank you for all your help

[Bill Robbins]

Glad that got you where you wanted to go. Thanks again 🙂

[Author]

Posts