JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Add Footer like Creators.ning.com for Ning 3.0! (Great example of a JenSocial VIP Tip!)

Add a Footer like Creators.ning.com - - overall look and feel, for Ning 3.0!

A few notes first:

Time will not allow me to support customization of this tip, except in JenSocial 2.0 VIP Club. New Ning 3.0 Club coming soon! You should find this tip very easy to install. It looks overwhelming at first. I'm just thorough. It's quite easy.
I used the blueprint of the Footer on Creators - - thanks Ning for inspiring so many NCs. However, the code has been completely rewritten and re-purposed, for ease of installation.

Below is an example of the Footer like Creators.ning.com, and the results of the code from this tip.

Click Image below for Full View.

I have documented the HTML. It's easy to edit, just look for my comment lines as your lead to change colors, fonts, etc... I have written this so all code goes in the "Above Footer HTML Box" (previously known as our "Bottom Instant Ad Box"). You will not have to add any code to Advanced CSS or Custom Code Box.

Instructions:

Edit the code in the following text file. I suggest editing your code from a simple Text Editor: Footer_Like_Creators_Ning3.0.txt
Note: If you want your Footer Header Titles and Links to default to your Network's defaults, remove all code for font-family. You will find 2 cases.
Within the <style> tag you will find all of the CSS. Locate each line that has the numerous asterisks like this example:
/****************************** Copyright Links - Color *****************************/
Change your font attributes, the overall background color, and you are done with the CSS edits. If you like the colors in the screen shot example, you don't need to change anything.
Then, you will see 4 blocks of links. Each header is titled: Column Header #1-Column Header #4. Well actually, I named the Last Column: "Site Links" as a suggestion. Change the Header Titles to suit your needs. Don't change anything else.
Under each Column Header you will see 4 generic links, titled: Link #1-Link #4. Change the link titles and the href URLs to your links.
For Column #4 ("Site Links"), I have added the generic links for: Report an Issue and Terms of Service. You do not have to change those 2 href URLs. They will work on your site as-is.
Save all of your edited code to a text file for future edits. It's always best to edit this type of code in a text file, and then paste into your HTML Box.
After your edits are complete, add all of your code to your "Above Footer HTML Box" (previously known as our "Bottom Instant Ad Box").
Instructions for Adding Code to "Above Footer HTML Box"
From your Ning 3.0 Toolbar click on "Social Site Manager".
Click on Sites & Pages.
Locate your Home Page Menu Tab.
At bottom of right column, locate: "Above Footer HTML Box" and click on box.
To Display Footer on All Pages: The "Use default above footer HTML" must be checked. If you choose this option, it's a little confusing here. Just click on the link "default above footer HTML". You'll see a window open. Paste your code into this window and then click OK.
If you do not want Footer on All Pages, uncheck "Use default above footer HTML", and add your code to the default box.
Click on Update.
Be sure to SAVE your Home Page.
And you are done!

For more tips and support of this quality, join us on JenSocial, in our Ning 2.0 VIP Club for Ning Tips! Watch for the new Ning 3.0 VIP Club, coming soon!

Obviously as of the writing of this tip, there hasn't been much time to test this code in Ning 3.0. Let me know if you experience any issues.

I hope you enjoy this tip!

Jen

1 member favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by JenSocial on May 4, 2013 at 10:50am

Hey all,

Can't do it now, but you all need to remind me. I need to work on this and make it a little better styled for responsive design, i.e. come up with the best column width so that 1 column is displayed perfectly on all devices.

~Jen

▶ Reply

Permalink Reply by James Hawkins on May 8, 2013 at 12:31am

Hi Jen,

I was looking at http://playground.webflow.com/ and toward the bottom of their demo page was a similar wide footer with corresponding live css. It appears to be completely responsive. Maybe this will give you-me-someone a start on the necessary tweak for your tip. I'm going to give it a try, but I'm way short of your expertise. I know you're a busy young woman but when you have time I hope this may help you ...or someone else figure this out.

James

Snips of responsiveness.: WIDE

Narrow 1:

Narrow 2

▶ Reply

Permalink Reply by JenSocial on May 9, 2013 at 12:49am

Hi James,

Very nice, thanks for the share! I probably won't make this tip footer a completely responsive design, just the first column. But, I'll most likely add a fully responsive footer to the new VIP Club.

Thanks again,

Jen

▶ Reply

Permalink Reply by Writer Chick on May 13, 2013 at 4:46pm

But, I'll most likely add a fully responsive footer to the new VIP Club.

Oh goodie!! I'll just wait for that one then. Thanks so much for all you do, Jen.

You know that tabbed content box you created? I love that thing. But sadly *sniff* I can't see a need for it anymore. With the addition of multiple features, I'm using a blog to accomplish the same thing, and by using a blog, all the past stories I've featured in that box are archived for members to go back and look at.

Maybe converting that feature to a 3.0 tip is something you can save for a rainy day when you have "nothing to do." *snort* LOL

▶ Reply

Permalink Reply by JenSocial on May 15, 2013 at 8:15pm

Hi Diane,

Hopefully I'll get a responsive footer built as one of the first VIP 3.0 Tips!

I'm a little confused. Sounds good what you're doing with the blog. And I thought you were saying you no longer needed the tabbed content - - which tip btw? I forget, I've written so many tips. Anywho, then you say it would be good for me to convert to Ning 3.0. If you think you'll need it, let me know.

Best,

Jen

▶ Reply

Permalink Reply by Writer Chick on May 16, 2013 at 4:50am

It was a great tip for 2.0 and maybe other people will still want it.

▶ Reply

Permalink Reply by The York Paranormals on June 5, 2013 at 11:19am

I am kind of laughing at myself and kicking myself at the same time. LOL! I went to work on the footer Links Section myself because I hadn't seen this post yet. I have taken a screen capture of how it turned out. I like the look myself though, I'm glsd I did it. Let me know what you all think. :-)

▶ Reply

Permalink Reply by Julie Clarke on June 6, 2013 at 7:21am

Hi Jen,

Great tip Jen, I'm really pleased with it. It also got me to thinking about the Ning bar too and used a variation on my background there too! So double thank you.

www.class-rep.com

Julie