Adding my Site Footer: Not Cooperating

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.webp
What's happening is...
sad-footer.webp
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 -->
 
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.
 
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!
 
Top Bottom