[MOD] Facebook styled Message box (Allow user to view their messages everywhere on your network)

[Elson Tan]

Want something like Facebook styled Message dropdown where users can easily see their messages without going to their inbox?

I have came up with a new mod called "QuickView" which adds something like in the picture on the right side TO your Ning xn_bar (Ning bar). It's all free to use too.

Features:

• Show new messages count
  
• Facebook styled drop down
  
• Customizable with CSS
  
• Users able to view their messages everywhere on your network
  
• Send new message link and view all messages link included in the box.
  

How to install:

Add this script to your network's Custom Code box:

<!--QuickView by Elson Tan (@elsodev) elsodev.com---->

<script type="text/javascript" src="http://elsodev.com/projects/quickview/script.js"></script>
<style>

/*---Style---*/
li.qvitem{
background: none repeat scroll 0 0 #FFFFFF;
border-color: rgba(100, 100, 100, 0.4)!important;
border-style: none none solid!important;
border-width: medium medium 1px!important;
height: auto!important;
list-style: none outside none!important;
margin-left: 0!important;
margin-top: 0!important;
min-height: 25px!important;
padding: 5px!important;
width: 320px!important;
}
li.unread{
background-color:#EFFBF8!important;
}

li.qvitem:hover{background-color:#D1D8E7!important;}

li.qvitem a{
background: none repeat scroll 0 0 transparent!important;
width: 320px!important;
padding:0px!important;
margin:0px!important;
height: auto!important;
min-height: 55px!important;
}

#qvnew{
padding:3px;
color:#fff!important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-weight:bold!important;
background-color:#FE642E!important;
}

#qvall{
background-color:#F7F7F7!important;
color:#3B5998!important;
width:text-decoration:none;background:#fff;color:padding:5px;width: 319px!important;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#qvall a{color:#3B5998!important;}

.qvsubject{font-size:12px;font-weight:normal!important;}
.qvcont{color:#848484!important;font-size:11px;font-weight:normal!important;}
</style>

<!--END of QuickView by Elson Tan (@elsodev) elsodev.com---->

That's it, its free to use , just please keep the credits.Thank you.

There are still minor bugs lurking around , do report it if you found one.

Do not download and re-upload the script to your own server, because you may miss important updates issued by me through the script hosted on my server elsodev.com

I will charge a small one-time-fee of 5-15USD(depends on amount of work) for further customization and language customization. Send me a message if you like.

P/S Your existing CSS for your Ning bar may affect this script's style and this script does support Fixed Ning bars as it will inherit  css from ning bar.

Warning, if you have been caught distributing or selling this script without my permission , i have rights to block your network from using this script. Original copy of this script can only be obtained through this post. Thanks.

If you like this script , why not follow me on twitter for more updates from me.

Thank You.

[Crestini Activi !]

Thanks for this script, it really works and it look really neat. There is a small problem tho. I'm a Ning Creator and my Ning network is all in Romanian. 

Im just wandering if its possible for the script or message box menu to be in Romanian.

The policy on our website is strictly in romanian and it does not really match our policy if we are to leave it written in english

Example:

The word 'Messages' that shows on the top bar of the box to be replaced with the word 'Mesajele'

And the 'Messages', 'Send a new message' and 'View all' that are written in the messages box, to be changed to:

Message =                         Mesajele

Send a new message =       Trimite un mesaj nou

view all =                            Vezi toate mesajele

Please, if its possible to be changed, help us its very important for us.

The Ning network site is set to Romanian settings, im not sure if you can guide me to set it my self in the script code.

Thanks for the code. excelent work, they should integrate this code in the next ning network updates

[Elson Tan]

Hi, glad you like it.
I charge a small customization fee from 5-15USD depends on the amount of work.
Contact me if you want(send me a message)

Thanks.

[Crestini Activi !]

I am intrested and agree, please contact me and let me know all you need to translate as described above.

[FIN]

Excellent code! I have it integrated with my other ningbar links as seen here: http://www.freedominfonetwork.org/debate

I was curious if there is a way to code in an image to match the rest of my ning bar links? for example, how would I add the image below to the left of "Messages"?

^^^

Your assistance would be greatly appreciated in this and thanks so much for the code! One of our members has already commented on the feature.

[Elson Tan]

Hi, glad you like it.
I charge a small customization fee from 5-15USD depends on the amount of work.
Contact me if you want(send me a message)

[FIN]

I'll get it, thanks. I changed the color of the orange background in the bubble that appears. One thing I have noticed is there seems to be a message appearing randomly when there are no new messages. The orange bubble appears with "NaN" in the field. Any fix for this?

[Crestini Activi !]

Im getting the NaN  bubble as well. I think that it usually apears when there is a new message. And if we didnt read the old messages, it still shows as new messages notice till we read all the green highlighted messages in the box. I have unread messages, and even tho there is no new messages, maybe it has an effect from the old unread messages. Im only speculating that this is what is happening.

Elson, if you agree to help me with a small fraction as you said, Can you please change the NaN notification button to the word "Nou!" Thanks.

[classic]

woooooooow
This amazing actually my friend
I like very
But there is a problem
A very large text and ended an area code see

[Crestini Activi !]

There may be one of the two scenarios.

Either your personalised code area has already to many personalised codes installed on the page.

or

Try and put the code in the personalise code are not in the main theme advanced css area. 

We only have a cirtain ammount of space in the personalised code area or the advanced css theme area. You can try to put it in the advanced theme css area if you have more space. BUT PLEASE IM NOT RESPONSABLE FOR ANY DAMAGES IT CAUSES AS RESULT OF THIS ACTION. im only giving you an idea as I did play with such codes on my theme area and it worked. but dont do it if you are not sure if it works.

[classic]

*I can't found personalised codes
can you explain to me more about it

[Crestini Activi !]

Go to your leaderboard area in the Tools section on the left side pannel, or should I say the 9th menu counting from the bottom upwords on your leftside menu is called Personalised Code. Click on that and that is where you can store some personalised codes like css or html codes. make sure you save all the codes that are in that box somewhere on a text page on your pc or desktop before adding other codes. in case it does not work, just paste the saved codes you saved back in place.

I hope that this info helps u somehow.

[classic]

Possible put link