Add Margin Between Bottom of Content Area on Pages and Footer Widget ASrea

Hey NicomIT,

Thank you for the inquiry.

You can use this css code to adjust the top margin of the #footer container, creating more space between it and the main content wrapper.

#footer {
    margin-top: 1000px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

You may need to set the background color of the main container to transparent to replicate the design of the other site. Please try replacing the modification with this css code:

body, #wrap_all, #main {
    background: transparent !important;
}

#footer {
    margin-top: 500px;
    background-color: white;
}

Best regards,
Ismael

Hi,
Thank you for the link to your site, currently I see screenshot 1 below.
When I add Ismael’s css I see screenshot 2 below.

body, #wrap_all, #main {
    background: transparent !important;
}

#footer {
    margin-top: 50px;
    background-color: white;
}

This looks like your example site, screenshot 3 below.
If the screenshot looks correct but you are not seeing this, try clearing your browser cache following these steps for Safari and note step 4 where you will Clear the History.

Best regards,
Mike

Hi,
For the homepage try this css:

#top.home #main #av_section_1 {
	  margin-bottom: 50px;
}

Best regards,
Mike

Hi,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function() {
    var footer = document.getElementById('footer');
    var afterSlideshow = document.getElementsByClassName('el_after_av_slideshow');
    if (footer) {
        var newDivFooter = document.createElement('div');
        newDivFooter.className = 'custom-header-background-footer';
        footer.appendChild(newDivFooter);
    }
    if (afterSlideshow.length > 0) {
        var newDivSlideshow = document.createElement('div');
        newDivSlideshow.className = 'custom-header-background-bottom';
        afterSlideshow[0].appendChild(newDivSlideshow); 
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.custom-header-background-footer {
    background-image: url(/wp-content/uploads/2024/09/top_no_fade.png);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto;
    height: 50px;
    width: 100%;
    position: absolute;
    top: -50px;
}
.custom-header-background-bottom {
    background-image: url(/wp-content/uploads/2024/09/top_no_fade.png);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto;
    height: 50px;
    width: 109%;
    position: absolute;
    top: 25px;
    left: -5%;
    transform: rotate(180deg);
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
Thanks for your patience, for the bottom of the content on your other pages try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script_bottom() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function() {
    var contentDiv = document.querySelector('.template-page.content');
    
    if (contentDiv) {
        var newDivContent = document.createElement('div');
        newDivContent.className = 'custom-header-background-content';
        contentDiv.appendChild(newDivContent);
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script_bottom', 99 );

and this css:

.custom-header-background-content {
    background-image: url(/wp-content/uploads/2024/09/top_no_fade.png);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto;
    height: 50px;
    width: 109%;
    position: absolute;
    bottom: -50px;
    left: -5%;
    transform: rotate(180deg);
}

Best regards,
Mike

Hi,
To adjust the main content container so it is the full width of the content container try changing the width from 100% to 110%, I don’t see a red line:

Best regards,
Mike

Hi,
To adjust this for other screen sizes you can copy the css and wrap in a media query, for example for mobile device add this

@media only screen and (max-width: 767px) { 
.custom-header-background-bottom {
    background-image: url(/wp-content/uploads/2024/09/top_no_fade.png);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto;
    height: 50px;
    width: 118%;
    position: absolute;
    top: 25px;
    left: -9%;
    transform: rotate(180deg);
}
}

also leave your other css for desktop, if you find another size that needs adjusting then follow the same steps.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike