Hover group legend

Goodmorning,

here you are...

---

First...
add this code in your overall_header template, into the /head tag

Code:

<script type="text/javascript" src="http://stanlemon.net/javascript/jquery.js"></script>
   <script type="text/javascript" src="http://stanlemon.net/javascript/jquery.jgrowl.js"></script>

Second...
Add this in your CSS code

Code:

.groups li {
display:inline;
margin:0;

}

Third...
GO to ADMIN PANEL > DISPLAY > TEMPLATES > home page template

find this code:

Code:

<p>{LEGEND} : {GROUP_LEGEND}</p>

and replace it with this:

Code:

<p><center><ul class="groups">
    <li><a onclick="$.jGrowl('The Administrator Of the forum:
The Godfather');" href="javascript:void(0);"> Administrators</a></li>
 
    <li><a onclick="$.jGrowl('The Global Moderators Of the forum:
The Godfather', { sticky: true });" href="javascript:void(0);">Global Moderators</a></li>
 
    <li><a onclick="$.jGrowl('The Support Moderators Of the forum:
The Godfather', { sticky: true });" href="javascript:void(0);">Support Moderators</a></li>
 
    <li><a onclick="$.jGrowl('The Graphic Designers Of the forum:
The Godfather', {sticky: true });" href="javascript:void(0);">Graphic Designers</a></li>
 
    <li><a onclick="$.jGrowl('Forum Members:
Gangstar15', { beforeClose: function(e,m) { alert('About to close this notification!'); }, animateOpen: { height: 'show' } });" href="javascript:void(0);">Forum Members</a></li>
</ul></center></p>

>DONE

cordiality,
the Godfather