Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Usergroup Legend on Mouseover Details »»
Usergroup Legend on Mouseover
Version: 1.02, by SuperTaz SuperTaz is offline
Developer Last Online: Mar 2022 Show Printable Version Email this Page

Category: Forum Home Enhancements - Version: 4.1.x Rating:
Released: 03-03-2011 Last Update: 04-28-2012 Installs: 19
Template Edits
Re-useable Code Code Changes Translations  
No support by the author.

/*================================================= =========*\
|| ################################################## ## ||
|| # 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:

Code:
Phrase Type: Global
Product: vBulletin
Varname: legend_title
Text: Usergroup Legend
Save!

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

Code:
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:


Code:
<!-- what's going on box -->
Add Below:

Code:
<script type="text/javascript">
<!--

setup_memberlegend = function(tobj)
{
	prefix = ''
	suffix = ''

	if (tobj.getAttribute('ital'))
	{
		prefix += '<em>'
		suffix += '</em>'
	}

	if (tobj.getAttribute('undr'))
	{
		prefix += '<u>'
		suffix += '</u>'
	}

	if (tobj.getAttribute('bold'))
	{
		prefix += '<b>'
		suffix += '</b>'
	}

	if (tobj.getAttribute('line'))
	{
		prefix += '<s>'
		suffix += '</s>'
	}

	if (tobj.getAttribute('clr'))
	{
		prefix += '<span style="color:' + tobj.getAttribute('clr') + ';">'
		suffix += '</span>'
	}



	fetch_object('memberlegend').innerHTML = prefix + tobj.getAttribute('group') + suffix
}

-->
</script>
Step 7: Also in the "Forum Home" template, look for:

Code:
<!-- end logged-in users -->
Add below:

Code:
<!-- Usergroup Legend --> 
<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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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">&nbsp;</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;">&nbsp;</div>
		<div style="float:left;" id="memberlegend"></div>
         </div>
<br><br>
<!-- End Usergroup Legend -->
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:


Code:
<div style="float:left;">&nbsp;</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

Scroll down to the bottom.

Remember: If you want support, CLICK INSTALL

Any problems, let me know.

Download Now

File Type: txt Usergroup Legend Install - Updated.txt (6.7 KB, 40 views)

Screenshots

File Type: png userlegend.png (9.8 KB, 0 views)
File Type: png userlegend1.png (11.2 KB, 0 views)

Supporters / CoAuthors

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Благодарность от:
JamalFree

Comments
  #32  
Old 04-21-2013, 09:58 PM
tbworld tbworld is offline
 
Join Date: Oct 2008
Posts: 2,126
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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:

Code:
<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.
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:40 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05838 seconds
  • Memory Usage 2,254KB
  • Queries Executed 18 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (8)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (2)post_thanks_box
  • (1)post_thanks_box_bit
  • (2)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (2)post_thanks_postbit_info
  • (1)postbit
  • (3)postbit_attachment
  • (2)postbit_onlinestatus
  • (2)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete