-
Posts
-
Is it possible to have a background image in the footer that stretches into the socket area and fills in to the bottom of the site?
Hey ronduring,
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaView the footer area of this site. The background image stretches from the footer over the socket as well. It is another theme, but wanted to know if it was possible.
Hi,
Yes this is possible, but would require a bit of css to achieve. It is not an out-of-the-box function.
Best regards,
Jordan ShannonI could not find anything within the Enfold Support on the site. Would it be CSS only or would a child theme have to be used as well?
Hi,
Well child-themes are generally recommended if you plan on doing a lot of customization to the theme, so yes you should use a child theme.
Best regards,
Jordan ShannonHi,
No problem at all. I will keep this thread open for when you proceed with this.
Best regards,
Jordan ShannonI already have a dev site up on this. See link. I tried a few things to get it to work, and can’t seem to find the right area to adjust.
Hi,
Can you send me a link to the image you want in the background? Also, a screenshot of how it should look?
Best regards,
Jordan ShannonHi,
You would have to edit footer.php to achieve that since the socket is outside of the footer container. Try to add a div which wraps both the footer and socket and then add the background image to it using CSS.
Best regards,
RikardI’m having issues trying to wrap the container for the footer and socket in one div.
My first div starts here:
<div>
<div class=’container_wrap footer_color’ id=’footer’><!– ####### END SOCKET CONTAINER ####### –>
</footer>
</div> — This is the bottom div.Hi,
Please revert the changes you made on Footer.php file and set your background image in Enfold theme options > General Styling > Footer and then add following code to Quick CSS in Enfold theme options > General Styling > General Styling
#socket { background: transparent; top: -55px; margin-bottom: -56px; } #footer { background-size: cover; background-color: transparent!important; background-position: center bottom; }Best regards,
YigitThanks Yigit. I put the code in you suggested and those does give the desired effect I was looking for. I removed all the footer.php code I had in place. If you look at the site link now there is a bottom bar, like the socket showing. Any suggestions for this. Thanks in advance.
Hey!
I attached a screenshot in private content field. That is how it looks on my end at the moment. Could you please post a screenshot and show the changes you would like to make?
Regards,
YigitThanks, Yigit. I was just double checking everything, and getting some new screen shots ready for you, I just wanted to be sure all the site and server cache was cleared, and then testing in all browsers. After checking everything I did see the suggested updates you sent are working 100% in Chrome. If you see the new attached file, a white bar/row is showing at the bottom in the latest version of FireFox and Edge. Let me know if there is something that can be added to adjust for that in those browsers? Thanks.
Hi,
The space is created by this css code.
#socket { background: transparent; top: -55px; margin-bottom: -56px; }Please adjust the previous css code a bit.
#footer { background-size: cover; background-color: transparent !important; background-position: center bottom; padding-bottom: 70px; } #socket { background: transparent; margin-top: -70px; }Best regards,
IsmaelI tried that CSS update and it basically made it appear like it does by default with having the footer background stop at the socket.
With the CSS Yigit posted, that got us close and it worked in Chrome, just not in Firefox or Edge.
Is there anything else we can try? Thanks in advance.Hi,
My bad. The css declaration was invalid. The socket selector was incorrect. Please try it again.
Best regards,
Ismael
- You must be logged in to reply to this topic.