Welcome Guest. Please Login or Register  


You are here: Index > SitePad Website Builder > General Support > Topic : Any themes with built in stick footer?



Threaded Mode | Print  

 Any themes with built in stick footer?, Self explanatory (9 Replies, Read 3375 times)
satutech
Group: Member
Post Group: Newbie
Posts: 25
Status:
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.
IP: --   

Any themes with built in stick footer?
satutech
Group: Member
Post Group: Newbie
Posts: 25
Status:
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!
IP: --   

Any themes with built in stick footer?
alpeshd
Group: Member
Post Group: Newbie
Posts: 19
Status:
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.
IP: --   

Any themes with built in stick footer?
satutech
Group: Member
Post Group: Newbie
Posts: 25
Status:
<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?
IP: --   

Any themes with built in stick footer?
satutech
Group: Member
Post Group: Newbie
Posts: 25
Status:
And what does the 'Fill the height of the window' feature do?
IP: --   

Any themes with built in stick footer?
satutech
Group: Member
Post Group: Newbie
Posts: 25
Status:
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.
IP: --   

Any themes with built in stick footer?
alpeshd
Group: Member
Post Group: Newbie
Posts: 19
Status:
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
IP: --   

Any themes with built in stick footer?
satutech
Group: Member
Post Group: Newbie
Posts: 25
Status:
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>
IP: --   

Any themes with built in stick footer?
satutech
Group: Member
Post Group: Newbie
Posts: 25
Status:
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?
IP: --   

Any themes with built in stick footer?
alpeshd
Group: Member
Post Group: Newbie
Posts: 19
Status:
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.
IP: --   

« Previous    Next »

Threaded Mode | Print  



Jump To :


Users viewing this topic
1 guests, 0 users.


All times are GMT. The time now is March 19, 2024, 9:01 am.

  Powered By AEF 1.0.8 © 2007-2008 Electron Inc.Queries: 11  |  Page Created In:0.075