Dear Yigit,

A little while later, but now we got round to updating the installation and yes, indeed, this works. :) Thanks for fixing it.

Sincerely,
Lucas van Heerikhuizen

Dear Dude,

Thank you for that code sample. Actually, it can be done with it. A working example can be found here:
http://www.tweekeertwee.nl/handleidingen/reveal-footer-test/.

The only weird things are that the width of the #footer goes to waste when it gets the position:fixed property, although a simple width:100% already seemed to be the right remedy. Also, it seems the z-index of the footer must be set to -1 for it to work. The only thing that’s tricky is get the socket down at the bottom, but you can actually use the same trick for that. When all that is implemented, you get:

<style type="text/css">

#wrap_all{
	z-index:2 !important;
	position:relative !important;
}

#main{
	/* It appears in the newer versions of Enfold you can't set the margin to the #wrap_all. It gets me a grey streak and no footer. */
	/* Unless you're working with a lot of Color Sections at the bottom of your content this shouldn't be a problem. */
	/* The dynamic solution using JavaScript listed next actually does take care of that. Then you can forget this #main selector */
	margin-bottom:509px !important; /* Hard coded. Not ideal. */
}

#footer{
	bottom:0 !important;
	margin-bottom:51px !important; /* Hard coded. Not ideal. */
	position:fixed !important;
	z-index:-1 !important;
	height:458px !important; /* Hard coded. Not ideal. */
	width:100% !important;
}

#socket{
	bottom:0 !important;
	position:fixed !important;
	width:100% !important;
	z-index:-1 !important;
}

</style>

Adding that to the Custom CSS works, although you have to hard-code the heights in. I based these values on the Enfold demo site, but depending on how a client might choose to shape the footer or even socket, this can cause problems. You could set the heights dynamically though with some JavaScript after the whole thing is loaded. Adding something like this to a footer Text widget does the trick:

<script type="text/javascript">
window.onload = function(){
	var footerr = document.getElementById("footer"); // Weird names to easily dodge variable-naming conflicts
	var sockett = document.getElementById("socket");
	var mainn = document.getElementById("main");
	var wrapalll = document.getElementById("wrap_all");
	var deltaMainn = wrapalll.offsetHeight - mainn.offsetHeight; // Margin needs to be on the #main but must take #wrap_all into account

	footerr.style.marginBottom = sockett.offsetHeight + "px"; // Set the footer margin to reveal the socket

	mainn.style.marginBottom = (footerr.offsetHeight + sockett.offsetHeight) + "px"; // Set the main margin to reveal footer + socket
}
</script>

The risk is of course that you get a code jungle, something that Google probably doesn’t like either (is it actually so paranoid as to always recognize footer code as bad news?). But it is a working solution to get this effect up and running.

Kind regards,
Lucas

• This reply was modified 10 years, 3 months ago by Lucas van Heerikhuizen.

Hi Devin,

Sure. Since it’s based on motion it’s a little hard to put to words. There’s actually a good article on it that illustrates the principle with a little demo. Take a look at the article Pure CSS Hidden Footer.

Hope that can clarify it.

Kind regards,
Lucas

Dear Yigit,

Thank you for your quick reply. I’ve added the code in the QuickCSS, yet the problem still seems to persist. Probably because the styling in the element itself still seems to have the highest priority. I’m affraid there is no CSS class I can use to change that. I’ve added a screenshot to clarify the situation, where the elements inspector can indicate where the styling is coming from, visible in the background, where the thumbnails still shine through.

Is there any way to get the styling out?

Kind regards,
Lucas

Dear Devin,

That is understandable. I’ll take it up with WooCommerce. Thanks for your time!

Regards,
Lucas