How do you create an image footer with text links in wordpress

9 replies
  • WEB DESIGN
  • |
Hi Guys

Hopefully someone can help with this.

I am trying to create a footer using an image that can incorporate text links for wordpress sites.

It is no problem inserting an image as the footer of the site but i am beating my head against a brick wall in finding out how to overlay clickable links on the image.

If anyone knows of a set html code formula or ways to achieve this it would help me greatly.

Thanks

All the best

Kevin Phillips
#create #footer #image #links #text #wordpress
  • Profile picture of the author KathyK
    Code:
    <a href="yourlink"><img src="yourimagelink alt="alt text here"/><br />your text here</a>
    I think that's what you are asking? Or do you want the text right over the image? That gets into background images and you can't exactly link the actual image in that case - though you could make a linkable area over it with css.

    If you want just a background image with several text links over it, you'd use a css background image and just do text links as normal.
    Signature

    Cheers,
    Kathy

    {{ DiscussionBoard.errors[2382604].message }}
    • Profile picture of the author Kevin Phillips
      Hi kathy

      Thanks for the reply

      It isn't the image i would like to link to - it is as you said here:

      If you want just a background image with several text links over it, you'd use a css background image and just do text links as normal.
      That sounds perfect - but how to do what you described is the problem Sorry for being a dunce but if you could explain that method and how to do it that would be great.

      Thanks

      All the best

      Kevin
      Signature

      Enjoy Golf!? then check out my website at kpgolfpro.com

      {{ DiscussionBoard.errors[2382762].message }}
  • Profile picture of the author KathyK
    Ok - you find the footer id (or class) in your css stylesheet in your template directory. I can't give you the exact one to look for because I don't know your template.

    But the wordpress default is #footer
    Code:
    <div id="footer">
    Find that in the css sheet and add
    background:#ffffff url('location of your image') no-repeat left top;

    change that background color (white in the example) to something similar to the color of your background image - and if you are using a tiled background take the no- off no-repeat.

    If you are using a dark image on the background you may also have to add a
    #footer a{color:#ffffff} so the text links will show.
    Signature

    Cheers,
    Kathy

    {{ DiscussionBoard.errors[2383010].message }}
  • Profile picture of the author Kevin Phillips
    Thanks for your help Kathy

    Looks like this may do the trick

    All the best

    Kevin
    Signature

    Enjoy Golf!? then check out my website at kpgolfpro.com

    {{ DiscussionBoard.errors[2383207].message }}
  • Profile picture of the author Itamar
    Hi,

    Ok , what you need to do is basically make sure the main footer element

    here's an example:

    HTML Code:
    <div id="footer">.. your footer content..</div>
    You need to put your image as a background and not as an image!
    That would allow you to actually just put inside this <div
    content (in your case - hyperlinks) and not the image itself.

    Then you have the overlay effect you are looking for.
    that is the perfect way to do this.

    you have two ways of achieving this background image.

    Once simply via the style attribute

    HTML Code:
    <div id="footer" style="background:url(images/mybackground.jpg); "> your links and other footer content</div>
    Or you can do the same via css and simply put a class on this footer , or do it straight on the ID of the element if your case has one.

    .footer {
    background:url(../images/mybackground.jpg);
    }

    or straight on the id of the element:
    #footer{
    background:url(../images/mybackground.jpg);
    }
    {{ DiscussionBoard.errors[2385422].message }}
    • Profile picture of the author Kevin Phillips
      Itamar

      Thanks for that ... looks like the code i was after.

      Will give this a shot and report back

      Once again many thanks for taking the time to help

      All the best

      Kevin
      Signature

      Enjoy Golf!? then check out my website at kpgolfpro.com

      {{ DiscussionBoard.errors[2385507].message }}
      • Profile picture of the author Kevin Phillips
        Hi Itamar

        The html code is great thanks.

        I am testing this out on a demo site at the moment at KevPhillips.com

        I wondered if you could take a quick look and see if this could be modified further.

        Can the links be made to center vertically?

        Also when installing the code i had to put <br> after it to create a white space below - question being can you control the amount of gap between the footer and bottom of page.

        All your help so far has been more than i expected and i appreciate time is precious so no worries if you can't get to this

        Sincerely and all the best

        Kevin
        Signature

        Enjoy Golf!? then check out my website at kpgolfpro.com

        {{ DiscussionBoard.errors[2385567].message }}
        • Profile picture of the author indexphp
          Originally Posted by Kevin Phillips View Post

          Can the links be made to center vertically?
          yep, you just set the line-height the same as the the height of the image, in your case 60px.

          Code:
          #footer{
          background:url(../images/mybackground.jpg);
          line-height:60px;
          }
          Looking at your site, the footer doesnt need to be an image. You can just grab the hex code and use background-color.


          Code:
          #footer{
          background-color:#xxxxxx;
          height:60px;
          line-height:60px;
          }
          {{ DiscussionBoard.errors[2385683].message }}
          • Profile picture of the author Kevin Phillips
            Thanks once again

            Looking at your site, the footer doesnt need to be an image. You can just grab the hex code and use background-color.
            I appreciate the hex code advice but this is just a test site, so actual images will be used once i sort this.

            Any ides with regard to quote below:

            Also when installing the code i had to put <br> after it to create a white space below - question being can you control the amount of gap between the footer and bottom of page.
            All the best

            Kevin
            Signature

            Enjoy Golf!? then check out my website at kpgolfpro.com

            {{ DiscussionBoard.errors[2385727].message }}

Trending Topics