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

[Jen]

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.
  
• 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

[Janettee McCrary]

As if I don't have enough to do LOL! Thanks for the tip Jen - I can't wait to add it to my network:) *Sigh* My network is looking a little tired so maybe this will help spice it up a bit;)

[Jen]

Janettee, Great! Good to see you. =)

[Janettee McCrary]

Good to see you as well:)

[Suzie Nielsen]

Jen,

Oops! Don't have a clue what I could have done wrong- But I have vertical columns all in one nice long row!!!- not laid out horizontal??? Yikes! Help please!

Thanks,

Toodles...Suzie

[Suzie Nielsen]

OOPs again- I should have addressed my question to Diane since she is the one helping folks! Sorry!

Also I noticed the member with my same problem- was advised to check the code- I made absolutely NO changes to the code- the columns are just in one list....?????

Thanks again!

[Jen]

Susan,

After you start fresh, or remove those odd header span tags, I believe you will be fine if you do as MyCreationz has suggested. Never click on "return to visual mode". And of course the safest route is to edit a text file, and copy/paste into Instant Ad Box using HTML button.

Best,

Jen

[MyCreationz]

Hi Susan, I was able to resolve the issue :)

When you put the code in the html section of the ad box just click save DO NOT click the html button again to return to visual mode.

[Jen]

Exactly! Perfect, and thanks. I was just about to suggest this. When you click on "return to visual", this is typically when the code like the header example I gave to Susan, occurs.

Thanks,

Jen

[Writer Chick {Diane}]

Oops, didn't know that, but that is very good to know!

[Jen]

Still better to do what you're doing, Diane. Edit your text file. ;-) It's so easy to forget and click on "return to visual".

[Tat Ruck]

So cool - I just had the same problem (came out as long list) so went back to text file, copied and re-pasted and looks fab.  Great tip - thanks. 

[Suzie Nielsen]

My Creationz,

Thanks so much! I have no clue what a header span tag is- but I will figure it out!

Also for the tip on returning to HTML- I always return to visual! Ooops!guess I best stop that!