Forum Home Enhancements - Usergroup Legend on Mouseover [Archive]

View Full Version : Forum Home Enhancements - Usergroup Legend on Mouseover

SuperTaz

03-03-2011, 10:00 PM

/*================================================= =========*\
|| ################################################## ## ||
|| # Usergroup Legend For vBulletin Forums 4.1.x
|| # Version 1.01
|| # Author: Warden
|| # This mod may only be used from vbulletin.org
|| # DO NOT display this mod on any other modification site without my
|| # permission!
|| # You can alter this code and re-display it here on vbulletin.org
|| ################################################## ## ||
\*================================================ ==========*/

Description: This makes a usergroup legend that you can see what group belongs to whom by hovering over the color.

This mod is ported from this one here: https://vborg.vbsupport.ru/showthread.php?t=140019

All credits go to Digitalus since he came up with this design.

Note: This mod does work with vBulletin 4.1.8.

It is easy to add more colors for usergroups. I will post that below.

Installation time: About 2 minutes (2 Phrases, 1 Manual Template Change)

Note: If you are using this mod, https://vborg.vbsupport.ru/showthread.php?t=254239, it will conflict with my mod. Make sure if you use my mod, to delete the other one.

Also note: Make sure your style is updated to the newest version or there may be issues.

Also Note: This mod may contain a few glitches and/or bugs until I get them worked out. If someone wants to make this into an XML product, knock yourself out.

Installation:

Step 1: Go to admincp > Languages & Phrases > Phrase Manager > Add New Phrase:

Phrase Type: Global
Product: vBulletin
Varname: legend_title
Text: Usergroup Legend

Save!

Step 2: Go to Admincp > Languages & Phrases > Phrase Manager > Ass New Phrase:

Phrase Type: Global
Product: vBulletin
Varname: legend_alt_title
Text: User Group Legend

Save!

Step 3: Go to your AdminCP > Styles & Templates > Style Manager

Step 4: Choose your style

Step 5: Click on "Forum Home Templates", then click on "Forum Home"

Step 6: Look for:



Add Below:

<script type="text/javascript">

</script>

Step 7: Also in the "Forum Home" template, look for:



Add below:


<div id="wgo_legend" class="wgo_subblock section collapse"><h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/forum_stats.png" alt="{vb:phrase legend_alt_title}"/>{vb:phrase legend_title}</h3> <a class="collapse" id="collapse_legend_list" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse_40b.png" alt="Collapse/Expand" /></a>
</div>
<div>
<div style="float:left; width:18px; height:2px"></div>
<div style="float:left;"> </div>
<div class="alt2" style="float:left;height:15px;width:15px;padding:0px;" group="Administrator"

clr="#FF0000" bold="y" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object('memberlegend').innerHTML =

''">
<div style="height:15px;width:15px;background:#FF0000;"></div>
</div>
<div style="float:left;"> </div>
<div class="alt2" style="float:left;height:15px;width:15px;padding:0px;" group="Super Moderator"

bold="y" clr="#00FF00" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object('memberlegend').innerHTML =

''">
<div style="height:15px;width:15px;background:#00FF00;"></div>
</div>
<div style="float:left;"> </div>
<div class="alt2" style="float:left;height:15px;width:15px;padding:0px;" group="Moderator"

bold="y" clr="#008000" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object('memberlegend').innerHTML =

''">
<div style="height:15px;width:15px;background:#008000;"></div>
</div>
<div style="float:left;"> </div>
<div class="alt2" style="float:left;height:15px;width:15px;padding:0px;" group="Supporter"

bold="y" clr="#FFFF00" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object('memberlegend').innerHTML =

''">
<div style="height:15px;width:15px;background:#FFFF00;"></div>
</div>
<div style="float:left;"> </div>
<div class="alt2" style="float:left;height:15px;width:15px;padding:0px;" group="Member"

clr="#00FFFF" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object('memberlegend').innerHTML = ''">
<div style="height:15px;width:15px;background:#00FFFF;"></div>
</div>
<div style="float:left;"> </div>
<div class="alt2" style="float:left;height:15px;width:15px;padding:0px;" group="Validating"

clr="#A0522D" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object('memberlegend').innerHTML =

''">
<div style="height:15px;width:15px;background:#A0522D;"></div>
</div>
<div style="float:left"> </div>
<div class="alt2" style="float:left;height:15px;width:15px;padding:0px;" group="Banned"

ital="y" line="y" clr="#FF00FF" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object

('memberlegend').innerHTML = ''">
<div style="height:15px;width:15px;background:#FF00FF;"></div>
</div>
<div style="float:left;width:10px;height:1px;"> </div>
<div style="float:left;" id="memberlegend"></div>
</div>
<br><br>


Click on Save and Reload!

You can adjust the usergroup names and colors to your liking.

If you want to add another usergroup, find the spot you want in the code above, and add this code:

<div style="float:left;"> </div>
<div class="alt2" style="float:left;height:12px;width:12px;padding:0px;" group="Member" bold="y"

clr="#000000" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object('memberlegend').innerHTML = ''">
<div style="height:12px;width:12px;background:#000000;"></div>
</div>

The blue highlighted area is the name you can change
The red highlighted area is the html color code you can change.

Live Demo Here (http://www.global-gamers.net/forums/forum.php)

Scroll down to the bottom.

Remember: If you want support, CLICK INSTALL

Any problems, let me know.

SuperTaz

03-04-2011, 09:47 PM

Reserved post.

gamerzhut

03-05-2011, 02:15 AM

Live demo would be appreciated.

SuperTaz

03-05-2011, 02:18 AM

Live demo would be appreciated.

Added. :)

leclownos

03-05-2011, 02:06 PM

merci pour ce mod..

SuperTaz

03-05-2011, 02:41 PM

merci pour ce mod..

You're Welcome. :)

Cobe.

03-05-2011, 03:36 PM

Love it, Hope it gets better, as maybe showing the actual user html markup(sparkles and all)

VERY good job.

Dr.osamA

03-06-2011, 11:56 AM

thank you bro good work

installed + rated

for Arabic users

Phrase Type: Global
Product: vBulletin
Varname: usergroup_legend
Text: Usergroup Legend

نوع العبارة:Global
المنتج:vBulletin
المتغير:usergroup_legend
النص: مجموعات الاعضاء

SuperTaz

03-06-2011, 09:44 PM

Thank you for the rating and translation, Dr. Osama. :)

commonwealth

03-12-2011, 11:42 AM

Most of it is working well, however I am having trouble actually making our user names change the color that we want. all of mine are staying the generic color and not changing (if that makes any sense)

SuperTaz

03-12-2011, 08:11 PM

This does not change the colors of your users. This only shows the colors that you want for each usergroup.

In order to change your usergroup colors, you have to do this:

Go to your Admincp > Click on Usergroups dropdown menu > Usergroup Manager > Click on "GO" next to the usergroup you want to change > Look for Username HTML Markup and add this:

For the first box add, you can change the color:

<span style="font-weight: bold; color: red;">

For the second box add:
</span>

Save.

Then, on my mod, you change the color to the one you chose for each usergroup as shown above.

commonwealth

03-12-2011, 11:56 PM

oh perfect, thanks a ton for that!

Fire112

03-13-2011, 09:06 PM

when convenient for me not someone has an idea?

SuperTaz

03-14-2011, 12:31 AM

when convenient for me not someone has an idea?

What version of vBulletin are you using?

Fire112

03-14-2011, 06:23 AM

I have 4.1.2

SuperTaz

03-15-2011, 01:56 AM

Can you pm me the URL of your site so I can take a look at it? The only thing I can think of is that the style that you have it on is not a 4.1.2 style.

Fire112

03-15-2011, 07:20 AM

here is my forumhome

{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml"<vb:if condition="$vboptions['enablefacebookconnect']"> xmlns:fb="http://www.facebook.com/2008/fbml"</vb:if> dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
<head>
{vb:raw headinclude}
<title>{vb:raw vboptions.bbtitle}</title>

<vb:if condition="$vboptions['storecssasfile']">
{vb:cssfile forumhome-rollup.css}
<vb:else />
{vb:cssfile forumbits.css,forumhome.css,widgets.css,sidebar.cs s,options.css,tagcloud.css}
</vb:if>


<vb:if condition="$show['sidebar']">
<script type="text/javascript" src="{vb:stylevar yuipath}/animation/animation-min.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript">
var sidebar_align = '{vb:raw show.sidebarposition}';
var content_container_margin = parseInt('{vb:math {vb:stylevar forum_sidebar_width}+{vb:math {vb:stylevar padding}*2}}');
var sidebar_width = parseInt('{vb:stylevar forum_sidebar_width}');
</script>
<script type="text/javascript" src="{vb:raw vboptions.bburl}/clientscript/vbulletin-sidebar.js?v={vb:raw vboptions.simpleversion}"></script>
</vb:if>
{vb:raw headinclude_bottom}
</head>
<body>

{vb:raw header}

{vb:raw navbar}

<div id="pagetitle">
<h1>{vb:raw vboptions.bbtitle}</h1>
<p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
</div>

<vb:if condition="$show['sidebar']">
<div id="content_container"<vb:if condition="$show['sidebarposition'] == 'left'"> class="contentright"</vb:if>>
<div id="content">
</vb:if>

{vb:raw template_hook.forumhome_above_forums}
<ol id="forums" class="floatcontainer">
{vb:raw forumbits}
</ol>
{vb:raw template_hook.forumhome_below_forums}


{vb:raw forumhome_markread_script}

{vb:raw ad_location.board_after_forums}


<script type="text/javascript">

</script>
<div id="wgo" class="collapse wgo_block block">
<h2 class="blockhead">{vb:rawphrase whats_going_on}</h2>
<div class="blockbody formcontrols floatcontainer">
{vb:raw template_hook.forumhome_wgo_pos1}
<vb:if condition="$show['loggedinusers']">

<div id="wgo_onlineusers" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/users_online.png" alt="{vb:rawphrase currently_active_users}" /></h3>
<div class="wgo_new_blk1">
<div class="wgo_infolist_blk">
<p>{vb:rawphrase there_are_x_y_online_link, {vb:raw totalonline}, {vb:raw session.sessionurl}} <span class="shade">{vb:rawphrase x_members_and_y_guests, {vb:raw numberregistered}, {vb:raw numberguest}}</span></p>
<p>{vb:rawphrase most_users_ever_online_was_x_y_at_z, {vb:raw recordusers}, {vb:raw recorddate}, {vb:raw recordtime}}</p>
</div>
<div class="wgo_userlist_blk">
<vb:if condition="$activeusers">
<ol class="commalist" id="wgo_onlineusers_list">
<vb:each from="activeusers" value="loggedin">
<li> {vb:stylevar dirmark}<a class="username" href="{vb:link member, {vb:raw loggedin}}">{vb:raw loggedin.musername}</a>{vb:raw loggedin.invisiblemark}{vb:raw loggedin.buddymark}</li>
</vb:each>
</ol>
</vb:if>
</div>
</div>
</div>


<div id="wgo_legend" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/forum_stats.png" alt="{vb:rawphrase usergroup_legend,

{vb:raw vboptions.bbtitle}}" />{vb:rawphrase usergroup_legend, {vb:raw vboptions.bbtitle}}</h3>
</div>
<div>
<div style="float:left; width:18px; height:2px"></div>
<div style="float:left;"> </div>
<div class="alt2" style="float:left;height:12px;width:12px;padding:0px;" group="T&T Admin"

clr="#ff0000" bold="y" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object('memberlegend').innerHTML =

''">
<div style="height:12px;width:12px;background:#ff0000;"></div>
</div>
<div style="float:left;"> </div>
<div class="alt2" style="float:left;height:12px;width:12px;padding:0px;" group="T&T Mod"

bold="y" clr="#008000" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object('memberlegend').innerHTML =

''">
<div style="height:12px;width:12px;background:#008000;"></div>
</div>
<div style="float:left;"> </div>
<div class="alt2" style="float:left;height:12px;width:12px;padding:0px;" group="T&T Support"

bold="y" clr="#0000ff" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object('memberlegend').innerHTML =

''">
<div style="height:12px;width:12px;background:#0000ff;"></div>
</div>
<div style="float:left;"> </div>
<div class="alt2" style="float:left;height:12px;width:12px;padding:0px;" group="T&T Kunden" bold="y"

clr="#ffff00" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object('memberlegend').innerHTML = ''">
<div style="height:12px;width:12px;background:#ffff00;"></div>
</div>
<div style="float:left"> </div>
<div class="alt2" style="float:left;height:12px;width:12px;padding:0px;" group="Banned Member"

ital="y" line="y" clr="#8b008b" onmouseover="setup_memberlegend(this)" onmouseout="fetch_object

('memberlegend').innerHTML = ''">
<div style="height:12px;width:12px;background:#8b008b;"></div>
</div>
<div style="float:left;width:10px;height:1px;"> </div>
<div style="float:left;" id="memberlegend"></div>
</div>
<br><br>

</vb:if>
{vb:raw template_hook.forumhome_wgo_pos2}
<vb:if condition="$show['upcomingevents']">
<div id="wgo_events" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/event.png" alt="{vb:rawphrase todays_events}" /></h3>
<div class="wgo_new_blk1">
<ol>
{vb:raw upcomingevents}
</ol>
</div>
</div>
</vb:if>
{vb:raw template_hook.forumhome_wgo_pos3}
<vb:if condition="$show['birthdays']">

<div id="wgo_birthdays" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/birthday.png" alt="{vb:rawphrase todays_birthdays}" /></h3>
<div class="wgo_new_blk1">
<ol class="commalist">
{vb:raw birthdays}
</ol>
</div>
</div>

</vb:if>
{vb:raw template_hook.forumhome_wgo_pos4}
<div id="wgo_stats" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/forum_stats.png" alt="{vb:rawphrase x_statistics, {vb:raw vboptions.bbtitle}}" /></h3>
<div class="wgo_new_blk1">
<dl>
<dt>{vb:rawphrase threads}</dt>
<dd>{vb:raw totalthreads}</dd>
<dt>{vb:rawphrase posts}</dt>
<dd>{vb:raw totalposts}</dd>
<dt>{vb:rawphrase members}</dt>
<dd>{vb:raw numbermembers}</dd>
<vb:if condition="$show['activemembers']">
<dt>{vb:rawphrase active_members}</dt>
<dd>{vb:raw activemembers}</dd>
</vb:if>
</dl>
<p>{vb:rawphrase welcome_to_our_newest_member_x, {vb:link member, {vb:raw newuserinfo}}, {vb:raw newuserinfo.username}}</p>
{vb:raw template_hook.forumhome_wgo_stats}
</div>
</div>
<div id="wgo_legend" class="wgo_subblock section">
<h3 class="blocksubhead"><img src="{vb:stylevar imgdir_misc}/legend.png" alt="{vb:rawphrase icon_legend}" /></h3>
<div class="wgo_new_blk1">
<dl id="icon_legends" class="icon_legends">
<dt><img src="{vb:stylevar imgdir_statusicon}/forum_new-16.png" alt="{vb:rawphrase new_posts_forum}" /></dt><dt>{vb:rawphrase new_posts_forum}</dt>
<dt><img src="{vb:stylevar imgdir_statusicon}/forum_old-16.png" alt="{vb:rawphrase no_new_posts_forum}" /></dt><dt>{vb:rawphrase no_new_posts_forum}</dt>
<dt><img src="{vb:stylevar imgdir_statusicon}/category-16.png" alt="{vb:rawphrase category_forum}" /></dt><dt>{vb:rawphrase category_forum}</dt>
<dt><img src="{vb:stylevar imgdir_statusicon}/forum_link-16.png" alt="{vb:rawphrase link_forum}" /></dt><dt>{vb:rawphrase link_forum}</dt>
<vb:if condition="$vboptions['pt_hasprojectforums']">
<dt><img src="{vb:stylevar imgdir_statusicon}/project_new-16.png" alt="{vb:rawphrase project_forum}" /></dt><dt>{vb:rawphrase project_forum}</dt>
</vb:if>
</dl>
</div>
</div>
{vb:raw template_hook.forumhome_wgo_pos5}
</div>
</div>


{vb:raw ad_location.board_below_whats_going_on}
<vb:if condition="$show['sidebar']">
</div>
</div>

<div id="sidebar_container"<vb:if condition="$show['sidebarposition'] == 'left'"> class="sidebarleft"</vb:if>>
<a id="sidebar_button_link" href="#">
<vb:if condition="$show['sidebarposition'] == 'left'">
<img id="sidebar_button" src="{vb:stylevar imgdir_misc}/tab-collapsed-left.png" alt="" />
<vb:else />
<img id="sidebar_button" src="{vb:stylevar imgdir_misc}/tab-collapsed.png" alt="" />
</vb:if>
</a>
<ul id="sidebar">
{vb:raw sidebar}
</ul>
</div>
</vb:if>

{vb:raw footer}
</body>
</html>

SuperTaz

03-16-2011, 03:45 AM

If you can, check to see if this mod works on the default vB template for me. I have checked my styles and it works on all of them. All of my styles are all updated to 4.1.2 though.

If it works on the default template, but not on the style you showed above, then it is a style issue. Make sure they are all 4.1.2 compatible styles.

SuperTaz

05-29-2011, 02:59 AM

Confirmed that this mod still works on 4.1.3 and 4.1.4 Beta 1. If anyone is having any issues, try on a test site with no mods installed using the default style.

I have taken this mod off beta stage for now. If any issues arise, let me know and I will see what I can do.

mitch84

05-29-2011, 05:22 AM

very nice, thank you

SuperTaz

08-09-2011, 09:45 PM

very nice, thank you

Sorry for the delay, but, You're welcome. :)

SuperTaz

11-20-2011, 11:59 PM

Updated mod to work with 4.1.8. :)

Kiran-E-Sehar

12-02-2011, 07:43 AM

thanks buddy :)

Merenguista

12-02-2011, 08:27 AM

Updated mod to work with 4.1.8. :)

thanks ..

SuperTaz

12-02-2011, 11:04 PM

Glad to help. :)

SuperTaz

04-29-2012, 02:20 AM

Minor code update. :)

faisaly.com

08-08-2012, 09:30 PM

Working using vB4.2.0 without the mod installed as noted in the very first post...

vBThemer

08-09-2012, 03:36 AM

thanks for mod installed on vb 4.2

SuperTaz

08-11-2012, 10:38 PM

You're welcome. :)

Mysterious Ride

04-21-2013, 03:32 PM

Hey, I was wondering if there's any way to make this into just an html code for a Forum Block. I already use a different legend for Out of Character accounts which is about eight usergroups, but I have a lot of other usergroups that's color coded depending on the character job and I would really like it to just be in a forum block on the side bar. I actually tried to put the code there and it works, except for the mouseover part.

I used:

<div style="height:15px;width:15px;background:#FF0000;"></div>

But I need something to make that have the mouseover effect and tell the usergroup in just plain HTML, under the box or to the right, would be great.

tbworld

04-21-2013, 09:58 PM

Revised: Had no idea this was part of a mod, when I commented. So what I was explaining is totally out of context and probably worthless. Sorry.

"Mouseover" is a JavaScript "Event". "Pseudo selector class "hover" is CSS. Not sure which one you are talking about, but I am guessing "hover". You cannot embed a "selector pseudo class" directly in the HTML it must be contained within a style element. For vbulletin add this class to "additional.css" if you are a beginner.

You want do something like this:

<style>
.divstyle {
height: 15px;
width: 15px;
background: #FF0000;
}
.divstyle:hover {
color:red; /* whatever color you want for foreground text */
}
</style>

<div class="divstyle"></div>

The css in the style tags should really be inserted into additional.css.
See CSS Pseudo Selectors for more information.