[3.0 TIP] Customize your Ning dashboard bar. [Add more icons! + Tooltip]

[Elson Tan]

Hi again,

So for today, we will look into how to customize your Ning dashboard bar with more icons and links.

Thoughts on the current Ning dashboard bar:

• We need tootip! - Lacks of tooltip to describe each of the icon present(Ning only set title for the icons which will only show after 1sec after user hover over it. I bet most creators would prefer to have an immediate description when hover over any on the icons)
• Instant Access without reloading - There should be more options where user can directly access a function without going to the page itself, like design studio.

 

Add your own icons to it

Before getting started, you will need to make sure the icons you want to add are not more than 16x16 in size.

The purpose of doing this is to add more links so that admins and creator can utilize it, we can put in links like to our site google analytic, to our custom code page etc.

To look for icons you can use iconfinder.com

1. HTML of your icon:

-----------

<a class="dashboard-icon" title="My icon description" id="elementID" href="your link here"><div style="background-image: url(\'http://mynetwork.com/myicon.png\');background-repeat:no-repeat;background-color:transparent;height: 19px;margin: 3.5px;width: 19px;"></div></a>

--------------

The code is made up of an anchor element(a.k.a Link) wrapping a DIV.

The things you can change in the code above are highlighted in RED color.

The link of the icon image must be changed too.

You can make as many as you want, just repeat the code, however, I do recommend you not to add more than 5 icons because it will make your dashboard bar look confusing to your admins.

Of course, you can add an element ID(CLASS if more than 1) to that div and put all the css in the style attribute into Design studio custom CSS. (However, if you are not familiar with HTMl or CSS, I highly recommend you not to do so.)

2. The script:

Okay, now you got your icon ready, its time for the script, please place this script into your Custom Code > End of Page Code.

<script type="text/javascript">

if(ning.CurrentProfile != null){
    if(x$('#dashboardbar').length > 0){
        x$('#tab-icons').prepend('your html code here, you did that in step 1');
    } else {
    }
} else {
}

</script>

This script will insert the icons you made before the default icons in the Ning dashboard bar.

Results (before default icons):

If you want to insert it after the default icons, use this:

<script type="text/javascript">

if(ning.CurrentProfile != null){
    if(x$('#dashboardbar').length > 0){
        x$('#tab-icons a:last-child').before('your html code here, you did that in step 1');
    } else {
    }
} else {
}

</script>

Results (after default icons):

ToolTip

For Ning Dashboard Bar

We can make Ning dashboard bar more user friendly by adding a tootip which will results in:
You would just need to copy and paste the CSS code found in the link below(my previous tip) INTO Design Studio > Custom CSS

https://creators.ning.com/forum/topics/tip-how-to-use-tiptip-tooltip-jquery-plugin-on-your-network-to

and also the script, preferred minimized version for faster loading, place the script into Custom Code > End of Page code.

 

After getting the CSS and script for TipTip into your network, place this script below the Tiptip script.

<script type="text/javascript">
x$(document).ready(function(){
x$("#dashboardbar #tab-icons a").tipTip({fadeIn : "0", delay : "0"});
});
</script>

It should work now, refresh your page and boom! classy tooltip. :)

 

Note: Scripts will not be injected in the Ning dashboard,you cannot see the effects on Ning dashboard, but other parts of your network, yes.

That's all, I hope you will like it.

If you love this tip, do follow me on Twitter @elsodev for more updates from me!

I am also open for connections on Linkedin: Elson Tan

[Elson Tan]

No problemo, glad you like it. :)

[Elson Tan]

No problemo, glad you like it. :)

[Patrick Chappelle]

Thank you for this tip, Elson!

[⚡JFarrow⌁]

simply brilliant... thanks Elson!

[George H. Compton IV]

If you want this code to continue working change this part of the code #dashboard-bar to #dashboardbar ..... They changed it shortly after you put up this tip. 

Example Now this code will work..

<script type="text/javascript">

if(ning.CurrentProfile != null){
    if(x$('#dashboardbar').length > 0){
        x$('#tab-icons a:last-child').before('your html code here, you did that in step 1');
    } else {
    }
} else {
}

</script>

[Elson Tan]

Thanks for the heads up George.

[George H. Compton IV]

You're welcome Elson :) us creators have to stick together and help each other out when we can.
By the way awesome code...
You have a great weekend...

[Kos]

Don't you love it when they change things and don't say a word?  smh