JenSocial: Social Web Directory and Ning Tips

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

Add Scrolling Message in NingBar - - Another Great Tip! ;-)

You can add a scrolling message to the top of your Ning Network (NingBar). This is a great way to make short announcements, slogans, or quotes. The message will be displayed in the NingBar at the top of your site. If you have the NingBar hidden, it will be displayed at the top of your site.

This scrolling message will also stop/go on mouseover.

INSTRUCTIONS:
1. Edit the text below, using your custom text message.
2. Add the entire block of code to the Custom Code Box (Analytics) via My Network/Tools/Custom Code.
Note: If you sign out, it may take a while for the caching to catch up, and for the scrolling message to show. This is true for any tweak you make to your Ning Network.

WARNING: As in all tips offered on JenSocial, tips are hacks. Add at your own risk. Please be sure you do not leave out any characters.

CRITICAL TIP: For some reason a Ning Text Box like this Discussion, changes the "absolute position" code. Please use the attached text file to edit. See image below for how your code should look after style=" and before right:400px

DO NOT USE THIS CODE. EDIT CODE IN ATTACHED FILE.

<div style="xg-p:absolute; right:400px; top:4px;"><marquee onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="125" scrollamount="3" direction="left" height="20" vspace="0" bgcolor="#FFFFFF" style="font-family: Verdana; font-size:10px; color: #CC0000;">To add a scrolling message to your NingBar, change this text, and add the code to your Custom Code Box. If you want, you can add simple links like this: <a style="color:#000000;" href="http://jensocial.com">Visit JenSocial</a> This is a great way to make announcements to your site visitors.</marquee></div>


How to Change the Font Size and Color:
Change the font size and color by editing this code, within your code block, above.
font-size:10px; color: #CC0000;

Tip: If you increase the font size, you may need to increase the attribute for: height="20".

Example:

1 member favorited this

Attachments:

AddScrollingMessage_NingBar.txt, 1 KB

Replies to This Discussion

Permalink Reply by Think Big and Fast on December 30, 2010 at 12:32am

Jen - I inserted the below code into the Custom Code section on my Test Network and it won't even show up. Is there something that I am doing wrong? The code I put in is as follows:

<div style="xg-p:absolute; right:400px; top:4px;"><marquee onmouseover="this.stop();" onmouseout="this.start();"scrolldelay="125" scrollamount="3" direction="left" height="20" vspace="0" bgcolor="#FFFFFF" style="font-family: Verdana; font-size:10px; color: #CC0000;">Welcome to Downriver Community Compassion Club! If you are a new or an existing member, please introduce yourself here:<a style="color:#000000;" href="http://downrivercompassion.org">Visit DCCC</a> This is a great way to meet other members and become Buds!</marquee></div>

Permalink Reply by JenSocial on December 30, 2010 at 9:13am

Make sure the xg-p:absolute is p osition:absolute - - no space after the p in position. The Ning discussion will change this code to xg-p for security reasons.

Best,

Jen

Permalink Reply by Think Big and Fast on January 3, 2011 at 11:46pm

Thank YOU!!!! It worked. YAY!!!

Permalink Reply by JenSocial on January 4, 2011 at 12:13am

Great!

:-)

Happy New Year!

Permalink Reply by Writer Chick on January 28, 2011 at 8:55am

Jen,

Now that Ning has added the administrative drop down menu at the extreme left corner of the Ning bar, how do we adjust your marquee code so that it's not covered up by the background in the code? I want the text to finish scrolling before it hits the little wrench icon.

Thanks!

Permalink Reply by Haitians United for Haiti on October 1, 2011 at 10:33pm

Hello Jen!

I entered the code in the custom box of my new site; however it is not scrolling continuously. It keep stopping. Am I doing something wrong?

<div style="xg-p:absolute; right:400px; top:4px;"><marquee onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="125" scrollamount="3" direction="left" height="20" vspace="0" bgcolor="#FFFFFF" style="font-family: Verdana; font-size:10px; color: #CC0000;">Do you have talent? Are you Haitian or Haitian descent? Are you between 14 to 35 years of age?
If so HGT may be for you! Please <a style="color:#000000;" href="http://haitisgottalents.com/main/authorization/signUp?">Register Now</a> for a chance to be on our show. Let us all promote another image of Haiti! <a style="color:#000000;" href="http://www.facebook.com/Haitigottalents">Like us on Facebook</a> <a style="color:#000000;" href="http://twitter.com/htgottalents">Follow us on Twitter</a></marquee></div>

Permalink Reply by Haitians United for Haiti on October 1, 2011 at 10:39pm

Jen,

I did check this: "Make sure the xg-p:absolute is p osition:absolute - - no space after the p in position."

It looks fine on my custom box; however when I pasted it here the code changed!? Weird!

I am not sure what's wrong with it! It is not scrolling continuously....

Permalink Reply by JenSocial on October 1, 2011 at 11:47pm

It's working good for me, on your site. And I'm on a slow aircard, remote. It will stop if you mouseover it, the way it works. And it might stop while rest of page is loading. I'm using FireFox.

Best Regards,

Jen

Permalink Reply by Sai Communities on October 13, 2011 at 5:58am

Marvellous!!!

If anyone want to see this working, check: http://www.SaiCommunities.com

Ranganath

Permalink Reply by JenSocial on October 13, 2011 at 11:26am

Nice, thank you for the positive feedback!

Jen

Permalink Reply by JenSocial on November 29, 2011 at 11:48am

Happy you liked the tip!

LOL, love the smiley.

Permalink Reply by Ryan on May 20, 2012 at 2:12pm

I added the code on my test network and can get it to dance like a drunk monkey if I want it too. But for some reason it refuses to show up anywhere on my live network... any thoughts? I really want to use this to promote our upcoming shows and guests.