Help with the footer

umdoobby

I'm new to vanilla forums, typically when making a forum i typically go to smf or something like that So far I'm impressed with it but I do have a handful f issues. First thought I'm trying to theme the site just starting with the default theme that comes out of the box with the forum. I'm trying to make a sticky footer, I have googled around and have tired all of the things I could find on stackexchange and other various sites on google and none worked. How do I freaking make a footer.

Bleistivt

To make the standard footer of vanilla sticky you would just put this into your css:

#Foot {
    position: fixed;
    bottom: 0;
    width: 100%;
}

You probably want to give it a background-color and increase the bodys bottom padding, too.

An don't modify the default theme directly, use this guide:
http://vanillaforums.org/docs/themequickstart

umdoobby

Don't worry I have made my own theme I'm just basing it on the default theme.

Now that almost worked but now it is absolutely stuck to the bottom of the page... sadly it doesn't have a backbone if you will. It scrolls with the browser and doesn't stay on the bottom of the content like its suppose to. Is there something I can add to the body div or something like that to make the footer sit on the bottom of the content?

vrijvlinder

You can try this

#Body{
min-height:1000px!important;
}

umdoobby

@vrijvlinder said:
You can try this

#Body{
min-height:1000px!important;
}

Nope sorry no change

For clarification this is what im trying to do and yes I tried that this and i couldn't get it to work

http://css-tricks.com/snippets/css/sticky-footer/

vrijvlinder

For that you need to add some html to the default.master.tpl or php of your theme.

You need to move the Foot section under firevent after body part . And make the minimum page height at least 1000px. As well as possibly using an absolute positioning.

Hard to tell , I would need a link to see...

umdoobby

Yea the default.master.tpl of my custom theme is what I have been modifing along side my custom.css

Here is a link to my forum (please don't judge it too harshly its very much a work in progress)

http://derpycards.com/

vrijvlinder

Ok, first off using tables is not my favorite. I prefer divs with classes. Try adding your custom footer div after Row but before the vanilla link footer.in the master

then change the css to this for the foot but the html needs help

#Foot {
position: relative;
top: 100%;
width: 100%;
min-height: 200px;
margin: 20px auto;
text-align: left;
max-width: 980px;
display: inline;
line-height: 2;
}

vrijvlinder

<div id="Custom-Footer">&nbsp;©<!--?php echo date("Y"); ?-->2014 <a href="http://derpycards.com/" title="Derpy Cards">Derpy Cards</a><br> &nbsp; Proudly hosted by Serve Everything a Black Box Computers company <br>My Little Pony: Friendship is Magic is property of Hasbro.<br>My Little Pony Collectable Card Game is property of Hasbro and EverPlay.<br>We love what you have created, please don't sue us.</br>Proudly hosted by Serve Everything a Black Box Computers company </div>

vrijvlinder

Ok, now you need to change the css in the custom footer

#Custom-Footer {
position: relative;
margin: 0 auto;
bottom: 0;
height: auto;
width: 100%;
max-width: 500px;
}

umdoobby

Not quite there yet, correct me if I'm wrong but I have added all of the code like I think you wanted me to so far.

vrijvlinder

You have to remove the padding bottom in the body that you added to the css

    body {
    background: #fff;
    overflow: auto;
    }

Add this 

    #Foot .Row {
    margin: 0 auto;
    width: 100%;
    }

Add this too

    .Row {
    margin: 0 20px auto;
    width: 100%;
    max-width: 980px;
    }

#Body {
min-height: 1000px;
}

umdoobby

Oh oops thats an artifact from past footer attempts.

Alright well its just stuck stuck to the bottom of the screen when the content isnt long enough to fill the screen like this page here: http://derpycards.com/profile/5/Princess%20Celestia

vrijvlinder

Yes that's where the #Body min-height come in....

umdoobby

...Ok well now that I added those 3 things to the css the page is largely no longer centered...

I imagine you're using the view source function in chrome or something like that to see what my css, would it be easier if I posted my css?

vrijvlinder

ok change the margin for Row to auto

and add margin:0 auto to #Body

You just need to play with the values to get it like you want. Using the web inspector is the best way to do this.

umdoobby

Alright well thanks for all of your help, I'll play with the code and see what happens.

vrijvlinder

You could also use the plugin Copyright to add stuff to the footer. Just add the html in the js file of the plugin. Make sure there is no spaces in the code. It should work well to add it to the foot of the page without all that work...

umdoobby

orly? Thats worth a shot.