Adding my Site Footer: Not Cooperating

[Mr_Bob]

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:

What's happening is...

Code below. Any advice?

In extra.css

#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:

<!-- 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 -->

 

[MagnusB]

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

 

[Mr_Bob]

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.

 

[MagnusB]

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]

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!

 

[MagnusB]

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