Add a Footer like Creators.ning.com - - overall look and feel.
A few notes first:
Below is an example of the Footer like Creators.ning.com, and the results of the code from this tip.
Writer Chick inspired me to get this done! =) I have documented the HTML as clearly as possible. When you first look at the code, it may look overwhelming. But trust me, it's easy to edit. I have written this so all code goes in the Bottom Instant Ad Box. You will not have to add any code to Advanced CSS or Custom Code Box.
Since I am including the CSS in the Instant Ad Box, it should load faster, not take up space in your Advanced CSS, and hopefully override Custom Profile Page settings.
Instructions to add Bottom Instant Ad Box:
I could have left out the ability to change the attributes like color, font-family, font-size for: Column Header, Links, background color, etc... It would make it easier to install, but much less control over your look.
For more tips and support of this quality, join us on JenSocial, in our VIP Club for Ning Tips!
I hope you enjoy this tip!
Hugh, I compared the code that Jen provided above and the code that is in my ad box and this is the only place where I saw any differences. I don't know what effect these things have because I don't write code. Jen made these changes for me. Hope it helps you.
Oh, and I don't care about the mobile link not being perfectly centered. LOL I'm just so happy to have what I have. This was so easy for me, whereas the other tips for adding custom footers are just too complicated for me to understand.
Those 3 arrows (-->) weren't in the original code. I have no idea what they do. But that one line of code that is in bold isn't in the original code either. Maybe that has something to do with the alignment of the columns? I'm not sure. You'll just have to experiment with it and see what it does.
/* End Footer like Creators */
<div id="xg_foot"><!-- Begin Footer -->
<li style="list-style: none; display: inline;">
Oh, and I just realized that that line of code (<li style="list-style: none; display: inline;">) appears just before every one of the header codes.
I've added this to my site and it's working great but for some reason the little chat box for the main chat room has disappeared? You can see how many people are online but not the chat box?
I'll be out until Monday midday, but need to address this. Can you provide live link, and send test sign-in credentials via private email? I need to be signed in as member to see this.
wow thank you so much! I will send you the info via message.
I'm not seeing a problem. Is this happening on home page or chat page? And, what browser are you using?
I don't think the footer code is causing this. I removed all of the custom footer code, and the problem is still there. I would love to know if it is the footer code, so I can find the culprit. Maybe someone else will let us know if they are experiencing the same. In any case, try adding this CSS to Advanced CSS:
thanks Jen, I tried adding this code but it didn't work. :/ I'll have to dig around some more and see what I can come up with. Thank you so much for your work!
Try adding to top of CSS. This code should work.
This is really nice of you to share this with us all! Thank you ever so much!
Since I switched to Design Studio, my link at the bottom that allows members to switch to Mobile View is barely showing. And it doesn't show at all on my test network.
When you get some time, can you take a look and see what I can do to move that all up a bit so that link will show?
Give this a try - add height to the div below: