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 April 26, 2013 at 1:32pm

James and Mysticpagan,

Not sure how to fix this. The color works for me. Are you both saying that if you add the color like this, it won't work?

.aboveFooterAdHtml {
background-color:#003366!important;

I applied it to the overall box, so we had a nice amount of padding above and below, instead of the #xg_foot. Although, it's not covering the area it should according to Firebug. There's still more background below it, that I would have thought would be the same color I set for this.

Let me know, want to get this fixed for you all. Meantime, I will update Text File so there is no empty CSS property. =)

Best,

Jen

▶ Reply

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

I had firebug and it has dissapeared? Stranger than fiction, da da daaaaah!

I ran a validate css tool on this page and got this!!!!!!!

I seem to get erors on any page that I run it on so maybe I'm using it incorrectly....I dunno, It maybe is just a blond thing......

Click on it for full size....

▶ Reply

Permalink Reply by JenSocial on April 26, 2013 at 3:48pm

Thank you, but won't help with this really. Crazy question: Did you save your change? I changed my live and it's working. But the first time, somehow I didn't save my background color change.

Thanks,

Jen

▶ Reply

Permalink Reply by JenSocial on April 26, 2013 at 10:50am

Mysticpagan,

I'll get you all the correct CSS, soon.

Sorry I missed that mistake.

Jen

▶ Reply

Permalink Reply by JenSocial on April 26, 2013 at 10:49am

James, Goodness, talking about a weird mistake. Soon as I get done with deadline in about 2 hours, I'll take care of this - - maybe before!

▶ Reply

Permalink Reply by Fire-Tech on April 26, 2013 at 8:26pm

Cool! I was going to rework the 2.0 tip myself this weekend and share it when you made the new group. Thanks my dear :)

▶ Reply

Permalink Reply by JenSocial on April 26, 2013 at 10:09pm

Hi Fire-Tech! Thanks for thinking of this.

▶ Reply

Permalink Reply by James Hawkins on April 27, 2013 at 1:20am

OK this is the third I've sent this response. Where are they? I have the color in place. Forgot the #. Can't set transparency. Using : opacity: 0.7; placed after bg color setting. No joy. Any ideas?

▶ Reply

Permalink Reply by James Hawkins on April 27, 2013 at 2:08am

Hi Jen,

I've got egg on my face. Not only did forget the # sign I forgot/lost the ending semi-colon. With that in place it works beautifully. Can I place the blame on the tiny box we have to work with in Firefox? I'll bet I did the same before when I was working on it on my own a week ago. ...geez...

Thanks again for this update for 3.0 .....oh, oh , omg...

James

▶ Reply

Permalink Reply by JenSocial on April 27, 2013 at 12:21pm

Hi James,

Thanks for the update. Don't feel bad. I left out the color altogether, remember? I have no idea how that happened. LOL And yeah, the tiny box is insane.

Happy it worked out!

Jen

▶ Reply

Permalink Reply by Writer Chick on April 27, 2013 at 6:51am

Thank you so much for converting this awesome tip! Many of my help pages are linked to my footer. I will be tackling this again in my 3.0 once things settle down at school. Can't wait to get it up and running!! :)