How to add a footer to bottom of website

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Hi all,

I've been through the forum and was not able to find a post relative to my query, so here we go...

I would like to add a footer to the bottom of my website.
I want it to be an image, that will span the full width of the website.

So, instead of just adding an image to the bottom each page using the pic widget, I would like to add this image via CSS. (If I add it via a picture, it does not span the width of my website... just the standard content section.

Please see images attached.

I know this can be done with a CSS over-ride, I just need a helping hand :)

Thanks in advance

Mick
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes

Posted 5 years ago

  • 1
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
I tried adding a background image, but it's not updating, due to an over-ride I have in the CSS somewhere...
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Mik,

The way to go is to add it to your footer over-rides.
Site Settings>Tracking>Site Tracking Code>Footer Code
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Hey Gop,

thanks for the rep.
Ok, this has opened a whole new kettle of fish now... I like ;)

Do you think I should just add an image using html to the footer over-ride?
Can I change the height/width ratios and page positioning using this feature?

Completely new to me, if you can elaborate slightly on how to use this function, then I would be uber grateful :)
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
if this is where I can also add text over the footer image, with possible links, then this will blow my mind ;)

Really excited to start using this feature
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I think it will be easier to stick with HTML of any kind. You can use CSS but the thing about code in the footer and header is that it can be deadly if you over-look a closed tag or whatever. It can destroy your site. For that reason I think HTML is a little more clear.

Whatever you do, please create a dummy site and try it out on that first rather than risk your up and running site with mods of this kind.

You can add links in the footer code but once again try it before committing.

is there anything specific I can answer?
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Hey Gob, thanks for the response...
For sure.. I'll be more specific.

I'd already be more than satisfied, if I manage to get a Footer image on each page.
This image should sit at the bottom of each page and should scroll with the page. (some pages are longer than others)

Ideally this image will span from left to right across the whole screen.
As per the above images in prev. post.

I think I'll just add a jpg. from my resources.
Maybe you could give me a variety of code that could do this for me. (If it's to hand and easy for you to do) I've got a few ideas and with time I'm sure I'd get it to work, but if you know what I mean and can help out, please do.

Mik :)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
This is a little digression from the order of my answers.

You mentioned varying page lengths. This won't affect the position f your footer because the footer will always be apparent after your body content. The body is dynamic and takes whatever length is needed. The footer will always be after the body content irrespectively.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK.

Then taking basic HTML for adding an image would be the way to go:

It's always easier to work with the image file where the size is already established within the file rather than trying to adjust width and height, so for that reason I would first of all prepare your image file then simply use the HTML
<img src="resources/image-name.jpg" alt="whatever you wish">

This is your best starting point and see what you then wish to tweak.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
If you wish to make that footer image a link then use HTML again:
<a href="http://www.mysite.com/page">
<img src="resources/your-image.jpg" alt="appropriate description">
</a>
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Gop, nice one! (thought as much)

Gna test it right-away.

Thanks for your input!
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Hey Gop,

Worked a treat!

Thank you v. much. This is something I've been meaning to get my head around for a while now. :)

Sweet, thanks again!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Mik,

It's great when a new process works out. A buzz for sure.

FYI: You can use the header facility similarly. This is particularly handy if you wish to add something like a "view your cart" on the top of each page; site membership when it's up and running etc.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Gop, for sure going to be looking into this more.
Funny how you stumble on things that you thought are a mission to accomplish and then end up being so convenient. ;) Have a look at the site I've been working on. (Please excuse break up of URL, I'm really particular about the SEO) www(dot) evol vere (dot)biz :) The footer at the bottom is just a test, will have to re-design and place up there by this afternoon.

Thanks for all your help Gop, really appreciated!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Looks very nice, Mik. Well done. Be good to follow your progress with this.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
I'm very happy to read about your success on this one, mik. Thanks for your outstanding help again, Gop.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
thanks guys.. there will be some changes made over the coming days, will update you. It's always a pleasure being able to have an enthusiastic interaction like this. Feel like doors are opening and I'm finding my feet more using yola as a dev tool. There are so many option ;) thanks again!
Photo of Ally

Ally

  • 27 Posts
  • 0 Reply Likes
Hi, sorry to kind of intrude here, but should I manually put that HTML code into every page? Insert into site css? Or site tracking footer css? Thanks!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Ally,

In this specific situation where you would like the footer on each page then the way to do it is to add it to:

Site Settings>Tracking>Site Tracking Code>Footer Code