JenSocial: Social Web Directory and Ning Tips

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

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

Add a Footer like Creators.ning.com - - overall look and feel.

A few notes first:

If you are a VIP Member of JenSocial and are using the original VIP custom footer - - want a change using the new footer, please go to VIP Tip for full instructions.
GlamLiving Media Sites: If you are part of GlamLiving Media sites and use tracking code and logo, according to a VIP Member, this footer will hide the logo. I am currently investigating this, and will update in VIP Group.
Time will not allow me to support customization of this tip, except in JenSocial VIP Club. However, you should find it very easy to install.
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.

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:

Edit the code in this text file: FooterLikeCreators_Content_BottomInstantAdBox_HTML_for_TIP.txt and follow the instructions below.
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 (named "Site Links" as a suggestion for the last column header). 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: Badges, Report an Issue, and Terms of Service. You do not have to change those 3 href URLs. They will work on your site as-is. I used "About Us" for Link #1 Title, as a suggested link. You will need to change the href URL to your "About Us" page.
Now, change the copyright name to your Site or Company Name. This is located at bottom of code. Please be careful within this script code. I have added script that will change the copyright year to current year. Search for and change: "Ning Network Name Goes Here." TO "Your Site or Company Name". Do not change anything else within copyright code, unless you are an experienced coder.
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 Instant Ad Box.
Paste all of the edited code into your Bottom Instant Ad Box. Be sure to click on the HTML button.
And you are done!
THE NEXT SET OF INSTRUCTIONS ARE ONLY NEEDED IF YOU HAVEN'T INSTALLED THE BOTTOM INSTANT AD BOX.
Instructions to add Bottom Instant Ad Box:
- Go to: My Network/Settings/Features Layout
- At the bottom of center column find "Instant Ad Boxes:" section, and click Below Footer.
- Click on SAVE.

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!

Jen

1 member favorited this

Replies to This Discussion

Permalink Reply by JenSocial on November 23, 2012 at 3:54pm

LOL, happy it worked.

Permalink Reply by IDC on December 11, 2012 at 11:57am

Hi Jen

I added the codes but its not the same as i see in your shot above.

Below is what i see

Permalink Reply by JenSocial on February 1, 2013 at 11:27pm

IDC,

I didn't see this, so sorry. Did you get this sorted?

Best,

Jen

Permalink Reply by The York Paranormals on February 1, 2013 at 11:13pm

I have been working on trying to make a go with this code and the instructions but the outcome always floats totally to the left instead of centering in with the Page the way I had hoped it would. I guess I will just have to keep experimenting with it

Permalink Reply by JenSocial on February 1, 2013 at 11:26pm

If you can provide a link where it's installed, I'll take a look tomorrow.

Best Regards,

Jen

Permalink Reply by The York Paranormals on February 6, 2013 at 9:01pm

Hello Jen. I am sorry it took me so long to get back on this. I had continued trying to work out the problem myself but Just couldn't seem to muster it. I hadn't wanted to leave the code in place until I could fix the problem I am experiencing. I am finally leaving it as is and sending you my URL. I don't know what else to do.

http://www.yorkparanormals.com/

Thanks Jen

Permalink Reply by JenSocial on February 6, 2013 at 9:30pm

Looked and didn't catch quickly. I will look closer in about 30 minutes.

Permalink Reply by JenSocial on February 6, 2013 at 9:50pm

This is a tough one for me to test on your site, so many codes. If I remove all of the code from your bottom Instant Ad Box, and add the tip code, fresh - - it seems to work fine. But, I'm thinking your other CSS that refers to the footer will cause conflicts with the tip code.

Best,

Jen

Permalink Reply by The York Paranormals on February 7, 2013 at 12:54am

Jen, I went in and removed all of my footer code except the code provided on this link: FooterLikeCreators_Content_BottomInstantAdBox_HTML_for_TIP.txt

I have tried it two ways and neither seemed to solve my problem. I tried adding the CSS to my advanced box, while totally deleting any footer CSS that was pre existing... Than added the footer-wrap code and the copyright js to the instant add box and saved that. It didn't fix it...

Next I tried once more adding it the way your instructions said to. I did this after removing all footer coding in my CSS advanced box and saved, than added the entire code to the Instant Add box and saved that... It still didn't fix it, and I am just bum fuzzled about how to get it to work.

Permalink Reply by JenSocial on February 7, 2013 at 11:19am

Really sorry to hear it. I would like to see it installed without the other footer code. I can take another look if you do this.

Best,

Jen

Permalink Reply by The York Paranormals on February 7, 2013 at 2:59pm

Hello again. I have placed the code back in order with the CSS for the footer removed from my theme. I also tried doing it on my test network with a generic code from the ning presets, and got the exact same results that are there now. I will leave it so you get a chance to see it.

Permalink Reply by JenSocial on February 7, 2013 at 4:57pm

Gonna look now!