Need help with footer code please!

  • 3
  • Question
  • Updated 7 years ago
  • Answered
Okay so I found the code below on another question and I know how to insert it into the 'footer' section on site tracking. How can I change this to a footer with links to 'Terms & Conditions', 'Delivery', 'Returns', 'Facebook' and 'Twitter' separated by a decent amount of space? Thanks!


Copyright © 2011 YOUR-SITE. All Rights Reserved.


Photo of George

George

  • 18 Posts
  • 0 Reply Likes
  • unconcerned

Posted 7 years ago

  • 3
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi George,

A solution to this is to set it up in situ with appropriate spaces.

The linking can be done with HTML:
<a href="link to URL">Terms & Conditions</a> {appropriate spaces}<a href="link to address">Delivery</a>...etc. You will need to play with spacing to get this right.

The link to address would be of the form specifically for your site and the page referred tohttp://yoursite/page or your facebook or twitter address.
Photo of George

George

  • 18 Posts
  • 0 Reply Likes
Thanks that's really helpful but at the moment it's coming out as:

Terms & Conditions {10} Delivery {10} Returns

Edit: also where do I put the command to set the text colour?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi George,

The 10 in the curly brackets is that a shorthand for 10 spaces?. So the a href isn't working? If you give me the links I'll mark them up and post them, just in case my generic outline is off???

The font color is probably best set with CSS so I would wrap all the content of the line in: (it really is a guessw so try it and if needed will look further. The Footer code facility I think is a bit limited so we may have to revert to deprecated HTML.
<p style="color:red">{content}</p>
Photo of George

George

  • 18 Posts
  • 0 Reply Likes
I changed {appropriate spaces} to {10} in my code - I really don't have any idea how to do spaces.

How do I paste code into a comment so I can show you?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Spaces may work with &nbsp; for each space so for ten spaces repeat the code ten times.

If you haven't already tried it I would check that simply clicking on the space bar 10 times at those space intervals is effective? In some situations this works and in others the &nbsp; code is needed.

Showng code is easy but difficult to describe on this forum. If you click on the (some HTML allowed) in the next Reply to This Topic box it describes it well. basically you wrap the code in < code > content< /code > tags. I'm forced to add additional spaces after the < and before the > so remove these spaces to get the code to show on the forum.
Photo of George

George

  • 18 Posts
  • 0 Reply Likes
Thanks for your help, nailed everything except the colour now! :)
Here's where I'm at:



<div>
<center>
<p style="color:#bfbfbf;">
<p align="center" style="font-size:10px;font-lucida;">
<a href="http://www.frollers.co.uk/terms-and-conditions.php">Terms & Conditions</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.x.co.uk/delivery.php">Delivery</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.x.co.uk/returns.php">Returns</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.facebook.com/x">Facebook</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.twitter.com/x">Twitter</a>
</p>
</p>
</center>
</div>



Any ideas on what I'm doing wrong in terms of changing the colour?
Oh and would it be possible to insert a line of blank space below the footer so its not right at the very bottom of the page?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
<div>
<center>
<p align="center" style="font-size:10px; font-lucida;color:#bfbfbf;">
<a href="http://www.frollers.co.uk/terms-and-conditions.php">Terms & Conditions</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.x.co.uk/delivery.php">Delivery</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.x.co.uk/returns.php">Returns</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.facebook.com/x">Facebook</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.twitter.com/x">Twitter</a> </p>
</center>
</div>


The < center > code is a bit of a worry as this also is a deprecated tag and could stop working at any time with new browser versions. There are some CSS tricks for centering which will be a safer option but at the same time if it works at this stage then there is no rush and you can explore the CSS option in due course.

The p align="center" may be redundant as you are addressing the centering with two statements. I would try with it removed and see what the effect is. So try this then with <p style ="font-size:10px; font-lucida;color:#bfbfbf;">............
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You should be able to enter a return and space on the last entry and this should give you a blank space at the bottom.
Photo of George

George

  • 18 Posts
  • 0 Reply Likes
I tried your version (below) and it only made the 'Terms and Conditions' text the right colour and removed its hyperlink :(

Thanks for the info on the I'll add it to my to do list.


<div>
<center>
<p style ="font-size:10px; font-lucida;color:#bfbfbf;"
<a href="http://www.frollers.co.uk/terms-and-conditions.php">Terms & Conditions</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.x.co.uk/delivery.php">Delivery</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.x.co.uk/returns.php">Returns</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.facebook.com/x">Facebook</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.twitter.com/x">Twitter</a> </p>
</center>
</div>
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. Let's step back. Remove the style statement completely and retry. So there won't be any specific size or color for this experiemnt. We may set the styling within an internal or external style sheet subsequently.

So now back to the original and see where it goes.

<a href="http://www.frollers.co.uk/terms-and-conditions.php">Terms & Conditions</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.x.co.uk/delivery.php">Delivery</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.x.co.uk/returns.php">Returns</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.facebook.com/x">Facebook</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.twitter.com/x">Twitter</a>

The primary thing is the function. The styling can be added after the function is working. This simplifies trouble-shooting.
Photo of George

George

  • 18 Posts
  • 0 Reply Likes
Okay I pasted the code you posted above.

Comes out perfectly apart from:
- the colour
- the font size
- the position of the text. It is currently aligned to the left and I'm realising now that I would like it indented to the same amount as the rest of the page content/widgets.

Font style is displayed correctly.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That's excellent George. I'll work on some CSS to get the rest of it right.
Photo of George

George

  • 18 Posts
  • 0 Reply Likes
No worries, I sorted it. I just made a text box with the text/hyperlinks in it in the right colour, published it then copied the info from the page source and changed the margin and it worked :)

Thanks for your help Gop!!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Glad you got it sorted Geo.
Photo of sega advincula

sega advincula

  • 5 Posts
  • 0 Reply Likes
Can you please explain to me how to do this?? I really need help putting a footer into my website but don't know anything about coding. :(
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello sega,

The above solution only works with Yola Silver or Gold.

If you have either of these subscriptions I am happy to work with you on this.

Gop.
Photo of sega advincula

sega advincula

  • 5 Posts
  • 0 Reply Likes
I am new to building my website and would like to put a footer of the links to my home page. Can someone explain how to do this step by step? I don't know any codes to input but I do have Yola Silver if that helps.

This reply was created from a merged topic originally titled
Need to learn how to put a footer on my home page! Help please!.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello sega,

I'm glad that you have Silver as this makes the process very easy. The coding is placed in the Site Footer Code area. To navigate there follow the breadcrumbs following:
Site>Site Settings>Tracking>Site Tracking Code>Footer Code

This is quite a sensitive area of the website and you can so easily crash your site by adding incomplete code because there is no error checking. If that happens you can only re-build your site from scratch again. For this reason it's almost imperative to create a test site to check the code before you apply it to your loved site.

So if you can give me a description or a link to what you envisage, I can offer some solution I hope. let me know here
Photo of George

George

  • 18 Posts
  • 0 Reply Likes
So easy to crash your site? How do you mean?
I've put many hours into my site and can't afford to lose it.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
"crash your site" means that something goes wrong and you can't fix it because you are locked out.

To minimise the risk you create a test site and place any of the experimental code into the test site. If it is wrong then your test site will crash and you are aware. if it works then you can reasonably confidently copy the code into your real site.