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 Haiti FM on September 22, 2010 at 8:27am

this totally saved me had to change it to ( position ) looks great on my site now thanks http://haiti.fm

Permalink Reply by Haiti FM on September 22, 2010 at 7:26am

this is what I've been looking for thank you

Permalink Reply by JenSocial on September 22, 2010 at 10:29am

Excellent!
:-)

Permalink Reply by Truth Or Dare Café on October 7, 2010 at 11:37pm

Thank you so much Jen! God bless you.

Permalink Reply by JenSocial on October 9, 2010 at 12:12am

Happy you like the tip!

;-)
Best,
Jen

Permalink Reply by Wayne & Char on October 26, 2010 at 6:24pm

Wonderful!!!!!!!!!!!!!! Thanks so much!!!!!!!!!!!!!

Permalink Reply by JenSocial on October 26, 2010 at 8:34pm

You are most welcome. Happy you liked it!

;-)

Permalink Reply by BREAK9 RECORDINGS INDUSTRY on November 19, 2010 at 2:48pm

Hi Jen, and tnks for letting me join your group.

I need a little advice on the code, ive installed it fine and adjusted the letter size only thing im having problem with is the bar is over lapping my page is there any way of adjusting the width of the bar heres a link of my site to how you what i mean

http://www.break9dnb.com

Permalink Reply by JenSocial on November 19, 2010 at 3:13pm

Try something like this:

<div style="xg-p: absolute; right: 300px; top: 4px; width:600px;"><marquee vspace="0" height="20" bgcolor="transparent" style="font-family: Verdana; font-size: 14px; color: rgb(0, 0, 0);" direction="left" scrollamount="3" scrolldelay="125" onmouseout="this.start();" onmouseover="this.stop();">WELCOME TO BREAK9 RECORDINGS INDUSTRY WEBSITE HOME OF THE DRUM AND BASS MUSIC NETWORK</marquee></div>

Permalink Reply by BREAK9 RECORDINGS INDUSTRY on November 19, 2010 at 6:08pm

Hi jen no joy its coming out the bottom, its perfect colour wise thank you for that ,its scrolling flush but need to get it on top.

here is the code i ran

<div style="-xg-p:absolute; right: 300px; top: 4px; width:600px;"><marquee vspace="0" height="20" bgcolor="transparent" style="font-family: Verdana; font-size: 14px; color: rgb(0, 0, 0);" direction="left" scrollamount="3" scrolldelay="125" onmouseout="this.start();" onmouseover="this.stop();">WELCOME TO BREAK9 RECORDINGS INDUSTRY WEBSITE HOME OF THE DRUM AND BASS MUSIC NETWORK</marquee></div>

Permalink Reply by JenSocial on November 19, 2010 at 8:10pm

Sorry about that. This is why. When I copied/pasted the code here, I forget about the:

p osition:absolute part of the code being changed to xg-p. This is for security reasons. Be sure to change your code and use p osition:absolute - - with NO SPACE after the p.

Permalink Reply by BREAK9 RECORDINGS INDUSTRY on November 20, 2010 at 3:14am

Thank you jen this worked, you are an angel ;)