User Legend - Blocks

[Brian]

Version 1.0.0 - Download

An attractive colored user legend you can add to your forum. Brought back from V4 in plugin form for ease of use and installation. Hovering over any of the colored boxes will bring up its corresponding rank.



You can place the user legend anywhere in your layout! Just install and configure the plugin, then add this code wherever you want it to show (can only be shown once on any page).

<div id="user-legend"></div>

Plugin Features
- Custom name
- Height, width, border color, and spacing for all blocks
- Click and drag reordering of ranks
- Make rank names adopt the same colors as their blocks, or have them use the theme's default text color so they don't clash with your background colors




CSS Customization

#user-legend	- User Legend container
#user-legend-name	- Rank Names container
#user-legend-boxes	- Rank Boxes container
#user-legend-text	- User Legend text below boxes
.ul-name	- Rank Names text
.ul-box	- Rank Boxes

[xmidnightxsummer]

Okay so, I feel kind of stupid at the moment. I tried to put the code in the main footer but it didn't go in the area where it shows who is online, etc. Instead it shows up under the forum area (right above where it says 'remove ads from this forum'. Is there something special I'm supposed to put with the code? Or am I putting it in the wrong place?

[Brian]

Aug 31, 2013 15:13:28 GMT -8 xmidnightxsummer said:

Okay so, I feel kind of stupid at the moment. I tried to put the code in the main footer but it didn't go in the area where it shows who is online, etc. Instead it shows up under the forum area (right above where it says 'remove ads from this forum'. Is there something special I'm supposed to put with the code? Or am I putting it in the wrong place?

You'd want to place it in Structure > Layout Templates > Home. That's where the Forum Information & Statistics container is located.

[Misaka]

Sept 1, 2013 8:55:32 GMT -8 Brian said:

You'd want to place it in Structure > Layout Templates > Home. That's where the Forum Information & Statistics container is located.

not to sound like a SA but you should "kinda" include that on the plugin in the library other than that complaint works extremely well Brain enjoy your holiday 

"still in the middle of setup" 

[Brian]

Sept 1, 2013 11:14:13 GMT -8 Misaka said:

Sept 1, 2013 8:55:32 GMT -8 Brian said:

You'd want to place it in Structure > Layout Templates > Home. That's where the Forum Information & Statistics container is located.

not to sound like a SA but you should "kinda" include that on the plugin in the library other than that complaint works extremely well Brain enjoy your holiday 

"still in the middle of setup" 

I gave the code to place it wherever they wanted AND linked to this thread in the event they had a question.

I'm not going to clutter the plugin description with detailed instructions on how to do things.

[Misaka]

Sept 1, 2013 11:22:18 GMT -8 Brian said:

Sept 1, 2013 11:14:13 GMT -8 Misaka said:

not to sound like a SA but you should "kinda" include that on the plugin in the library other than that complaint works extremely well Brain enjoy your holiday 

"still in the middle of setup" 

I gave the code to place it wherever they wanted AND linked to this thread in the event they had a question.

I'm not going to clutter the plugin description with detailed instructions on how to do things.

fair enough fair enough 

I'm still trying to get the code to work 
stuck on which line it should go on 

[Brian]

Structure > Layout Templates > Home

Find this section of code.

SPOILER: Click to show

<tr>
    <td colspan="2">
        <table>
            <tr>
                <td class="icon">$[image.online]</td>
                <td class="info">
                    <table>
                        <tbody>
                            <tr><th>Users Online</th></tr>
                            <tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}.</td></tr>
                            <tr><td>
                                {foreach $[online_user]}
                                 $[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
                                {/foreach}
                                {if $[total_online_not_shown]}
                                , and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>
                                {/if}
                                </td></tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

And replace it with this (parts that were changed are colored green, and parts that were added are colored red).

SPOILER: Click to show

<tr>
    <td colspan="2">
        <table>
            <tr>
                <td class="icon">$[image.online]</td>
                <td class="info">
                    <table>
                        <tbody>
                            <tr><th>Users Online</th></tr>
                            <tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}.</td></tr>
                            <tr><td>
                                {foreach $[online_user]}
                                 $[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
                                {/foreach}
                                {if $[total_online_not_shown]}
                                , and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>
                                {/if}
                                </td></tr>
                        </tbody>
                    </table>
                </td>
                <td class="last" style="width: 150px;">
                    <div id="user-legend" style="font-size: 11px; font-weight: bold;"></div>
                </td>
            </tr>
        </table>
    </td>
</tr>

[Misaka]

thank you very much and sorry about before

[TheNerd]

Hey Brian, Is there any way to get the group name to appear to the right of the boxes rather than the top?

[Brian]

Sept 7, 2013 16:42:52 GMT -8 TheNerd said:

Hey Brian, Is there any way to get the group name to appear to the right of the boxes rather than the top?

Add this CSS wherever applicable.

#user-legend-name { float: right; }

[TheNerd]

Ah, thanks Brian.

[Former Member]

I was hoping to have the rank names transition in and out instead of abruptly appear so I added
.ul-name { -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
to my style sheet and it didn't work. The names still appear abruptly, but they'd start out the color of their neighbor and then transition to their own color xD Very interesting effect. Do you know if it's possible to make the names appear on a transition? (fade in on hover)

[Brian]

Nov 22, 2013 22:13:56 GMT -8 ₪» ⅀ ƪ Ƒ «₪ said:

I was hoping to have the rank names transition in and out instead of abruptly appear so I added
.ul-name { -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
to my style sheet and it didn't work. The names still appear abruptly, but they'd start out the color of their neighbor and then transition to their own color xD Very interesting effect. Do you know if it's possible to make the names appear on a transition? (fade in on hover)

Not with how I implemented them, no.

[Former Member]

Alrighty, no problem! thanks you anyway!

[Mist]

Hey so I installed this plug-in and would very much like to add it to the Legend area instead. It looks too simple and lonely with the old/new post image by itself there and just much "white space"

I try adding the code to it but all i got was this

SPOILER: Click to show

Instead I would like it possibly to the right. Also where you helped TheNerd above putting the group name to the right. Where am I suppose to the the CSS. I don't understand that and only the code shows up right wherever I put it instead.

To help get you a better understanding of what I want I did some editing on Paint

SPOILER: Click to show

I was just having a lot of trouble because the legends either goes above "New posts" or below "New posts" and not to the right of "No New posts"