1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Adding my Site Footer: Not Cooperating

Discussion in 'Styling and Customization Questions' started by Mr_Bob, Jan 31, 2013.

  1. Mr_Bob

    Mr_Bob Well-Known Member

    I have a special footer for my main site that I'm trying to get to work with my XF theme, but it's simply not cooperating. I've placed my code in extra.css and the template work in the footer template. The goal is this:
    happy-footer.jpg
    What's happening is...
    sad-footer.jpg
    Code below. Any advice?

    In extra.css
    Code:
    #site-footer
    background-image: url(@imagePath/mystyle/footer.gif) !important;
    background-repeat: no-repeat !important;
    margin: auto !important;
    width: 700px !important;
    height: 200% !important;
    z-index: 50 !important;
    }
     
    #site-footer #links {
    color: #1f2223;
    font-family: Georgia,  Times,  serif;
    font-size: 16px;
    font-style: italic;
    line-height: 16px;
    padding-left: 20px;
    padding-top: 112px;
    text-align: center;
    }
     
    #site-footer #copyright {
    color: #000000;
    font-family: Georgia,  Times,  serif;
    font-size: 12px;
    font-style: italic;
    line-height: 16px;
    padding-left: 20px;
    padding-top: 23px;
    text-align: center;
    }
     
    #site-footer b {
    color: #000000;
    font-weight: 400;
    }
     
    #site-footer a:link  {
    color: #1f2223;
    }
     
    #site-footer a:visited  {
    color: #1f2223;
    }
     
    #site-footer a:hover  {
    color: #edecda;
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
    text-decoration: none;
    }
     
    #site-footer a:active  {
    color: #edecda;
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
    text-decoration: none;
    }
    At the end of the footer template file:
    HTML:
    <!-- Start the Site Footer -->
    <div id="site-footer">
    <div id="links">
      <a href="#">Home</a> - <a href="#">Staff</a> - <a href="#">Forum</a> - <a href="#">Contact Us</a>
    </div>
    <div id="copyright">
    Copyright top text here <br /> Copyright bottom text here.
    </div>
    </div>
    <!-- End the Site Footer -->
     
  2. MagnusB

    MagnusB Well-Known Member

    Check it in an element inspector (like Firebug), pretty sure the image path is wrong somehow.
     
  3. Mr_Bob

    Mr_Bob Well-Known Member

    You're right, the image path was incorrect. But...it's still not working.

    I opened the Firefox developer tools and took a look at how the browser was interpreting the design. At least from Dev tools, it appears that the template is displaying the #site-footer div independent of #copyright and #links...which is really strange because they were both nested inside #site-footer. The plot thickens!

    I have a theory, however. What is the final template displayed on a Xenforo page? Intuition says it's the, "Footer" template, which would make sense, but maybe I have this in the wrong template. It may be inheriting some XF specific values.
     
  4. MagnusB

    MagnusB Well-Known Member

    If you added it at the very end of the footer template, it is outside any wrapper in the footer, the entirety of the html is inside that template...
     
    Mr_Bob likes this.
  5. Mr_Bob

    Mr_Bob Well-Known Member

    Hmm, well, two things of note now:

    1: I experimented with making everything a class, .site-footer etc, and had a few better results. The text aligned properly, but still no image. Placing the image in the .copyright definition had a small portion of the image appear, but not the full image.

    2: I found the page-container template and put everything right before the closing body tag...unfortunately still no go.

    I'll let this project sit for a bit so I can spend my time on other things, but of course if anyone has an idea about something I may be doing wrong, I am entirely open to advice! :) Thanks MagnusB for your help thus far!
     
  6. MagnusB

    MagnusB Well-Known Member

    The footer is absolutely positioned, so for best results you need to place it within the div id footer..
     

Share This Page