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 Yio Capi on April 25, 2013 at 11:14pm

Gracias Jen

I use this in www.emprendeton.net www.capoeira.com.co and www.estilistas.co

Thank you very much!

▶ Reply

Permalink Reply by JenSocial on April 25, 2013 at 11:28pm

Hi Yio,

Thank you for the feedback. This tip is for Ning 3.0. It appears you used the tip for Ning 2.0 for your Ning 2.0 sites. Those are some great looking sites! When you are ready to move over to Ning 3.0, this tip will help you use the same type footer code.

Thanks,

Jen

▶ Reply

Permalink Reply by Yio Capi on July 21, 2013 at 2:13am

jejeje now yeah! www.empresarios.ning.com

Thanks!

▶ Reply

Permalink Reply by ★Mysticpagan★Secret Moon Garden★ on April 26, 2013 at 2:18am

I cant use my html boxes, they just dissapear when I try and add any content?

▶ Reply

Permalink Reply by James Hawkins on April 26, 2013 at 6:37am

Hi Mysticpagan,

Are you using a right mouse click expecting/hoping to see the drop down menu allowing you to pick paste? Well that doesn't work here. Right clicking makes the html box go away. You need to use the ctrl-V keyboard combo to paste into these boxes.

▶ Reply

Permalink Reply by ★Mysticpagan★Secret Moon Garden★ on April 26, 2013 at 7:34am

Thank you James!

That's exactly what I was doing...

▶ Reply

Permalink Reply by James Hawkins on April 26, 2013 at 6:55am

Hi Jen,

I can't seem to get any background color to take. I've tried placing it in the line at (near) the top where you have:

background-color: [here] !important (your code has nothing there) Also tried exactly as you have it and still no show.

I also want it to have as much transparency as possible since I using a lot of it on my site because of my background image; an image of a historical hand-drawn world map. I've got the text there but it can't really be seen unless I get a semi transparent bg in place.

You know, it's funny because about a week or ten days ago I was trying to use this code as you had written it for Ning 2.0, but I couldn't get it figured out ...got a solid color but couldn't figure out how to get the transparency.

James

▶ Reply

Permalink Reply by ★Mysticpagan★Secret Moon Garden★ on April 26, 2013 at 7:37am

I think your background colour correlates with your header colour so if you have your header set to be transparent your footer will also be transparent. I haven't tested this theory yet though so I may be totally wrong.