Softaculous

Topic : Any themes with built in stick footer?


Posted By: satutech on July 18, 2018, 10:29 am
Does sitepad have any themes that have a built in sticky footer? And how do I get the background to stretch to reach all the way down to the footer if it is sticky? Currently trying to build a website on another account "www.pentaglobalinterior.com" and I could really use some help with this, thank you in advance.

Posted By: satutech on July 18, 2018, 11:02 am | Post: 1
By the way I meant sticky footer like the ones demonstrated in the following websites.
https://www.ibm.com/blogs/bluemix/2016/11/pure-css-sticky-footers/
https://chrisbracco.com/css-sticky-footer-effect/

The kind that always sticks to the bottommost part of the viewable screen even if the actual content isn't enough to bump it up to that level, and I also want to know how I can stretch the background image to reach down and cover the empty white space left by the footer sticking to the bottom.

Any assistance would be appreciated!

Posted By: alpeshd on July 18, 2018, 11:33 am | Post: 2
Hi,

We don't have any theme having sticky footer. But you can do this by adding some css through custom CSS option.

body.page {
    position: relative;
    min-height: 100%;
}

footer.site-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
}

To add the image to full background you will need to add it through css.

#content.site-content {
background: url('example.jpg');
}

Add the above css through Dashboard>> Settings >> Editor Settings and here look for custom CSS option and add above css.

Posted By: satutech on July 18, 2018, 11:37 am | Post: 3
<style>
body.page {
    position: relative;
    min-height: 100%;
}

footer.site-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
}

#content.site-content {
background: url('http://www.pentaglobalinterior.com/images/Cover-Dalam-2.jpg');
}

Like this?

Posted By: satutech on July 18, 2018, 11:39 am | Post: 4
And what does the 'Fill the height of the window' feature do?

Posted By: satutech on July 19, 2018, 2:00 am | Post: 5
Quote From : alpeshd July 18, 2018, 11:33 am
Hi,

We don't have any theme having sticky footer. But you can do this by adding some css through custom CSS option.

body.page {
    position: relative;
    min-height: 100%;
}

footer.site-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
}

To add the image to full background you will need to add it through css.

#content.site-content {
background: url('example.jpg');
}

Add the above css through Dashboard>> Settings >> Editor Settings and here look for custom CSS option and add above css.


So the css code you gave me sort of worked, but I am still experiencing problems with the background not stretching to reach down to the bottom of the browser's screen even if the content isn't large enough to do that naturally, which is what I wanted to do in the first place. Also does Sitepad support flexbox? Some of the articles I have read told me that a good way to get the website to do that would be to use a flexbox.

Posted By: alpeshd on July 19, 2018, 11:32 am | Post: 6
Hi,

Can you please provide us with the page link where you are facing this issue so that we can check this.

Please do let us know

Posted By: satutech on July 24, 2018, 4:44 am | Post: 7
Okay so I think I finally found a solution, using vh units for the site.content I was able to specify that the background image needs to always take a specified amount of the screen, stretching out even if the content isn't enough to fill the page. Can someone with an FHD or greater monitor or something check the following page for me please?
http://www.pentaglobalinterior.com/deli.html

And this is the code I used
<style>
body.page {
    position: relative;
    min-height: 100%;
    margin: auto;
}

footer.site-footer {
    position: static;
    right: 0;
    bottom: 0;
    left: 0;
}

#content.site-content {
background: url('http://www.pentaglobalinterior.com/images/Cover-Dalam-2.jpg');
background-size: cover;
display: block;
    float: none;
    margin: 0 auto;
    overflow: auto;
    width: 0 auto;
    min-height: calc(100vh - 121px);
}
</style>

Posted By: satutech on September 5, 2018, 8:31 am | Post: 8
Okay so I have a question, how do I get a background written in custom HTML to A. Stretch down to cover any white space left over if the contents of the page isn't enough to prevent a white space from appearing, and B. Stretch to the sides to cover up any white space? Because for example, with this website
http://www.pentaglobalinterior.com/
The background leaves a bit of white space in the sides by default, how do I make it not do that?

Posted By: alpeshd on September 5, 2018, 11:05 am | Post: 9
Hi,

It seems that your page is working correctly with higher screen size, to overcome with the side spacing please add the below css to the custom HTML css

#content.site-content{
    margin: 0 -15px;
}

Please do let us know if you face any issues.

Powered By AEF 1.0.8 © 2007-2008 Electron Inc.