Member Legend in Info Center (Update: 3 May '13)

[Stinky666]

May 14, 2013 7:45:39 GMT -8 sleepysage said:

Would you be able to install this on my site for me?

I wont install it for you, but if you PM me your hex codes, and member/staff names you want adding (make sure you say what colour for what group, too), then i will edit for you, and then tell you where to put the stuff when done. How's that sound?

[Anaiu]

Okay.... so I have your slimline info center in my template and I honestly can't figure out where to put the code. I would like the legend to go approximately here (red box)...



...if possible. Any suggestions for how to go about adding this to my site?

Thanks very much!

[Stinky666]

Hi Anaiu. In your layout template (as described in the first post), go to line 101, and you should see all of the below:

<tbody>
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(ninja)</span>{/if}$[online_user.comma]
{/foreach}
{if $[total_staff_online] == 0}
{if $[total_members_online] == 0}
There are currently no members online.
{/if}
{elseif $[total_members_online] == 0}
{if $[total_staff_online] == 0}
There are currently no members online.
{/if}
{/if}
{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}
</tbody>



Add the code from this threads first post to be inbetween the last 2 lines there, like so


<tbody>
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(ninja)</span>{/if}$[online_user.comma]
{/foreach}
{if $[total_staff_online] == 0}
{if $[total_members_online] == 0}
There are currently no members online.
{/if}
{elseif $[total_members_online] == 0}
{if $[total_staff_online] == 0}
There are currently no members online.
{/if}
{/if}
{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}
<font style ="float:right; padding: 0px;">
<a href="#" class="admlegend" title="Administrator"><div id="squareAdm"></div></a> <a href="#" class="gmodlegend" title="Global Moderator"><div id="squareGMod"></div></a> <a href="#" class="modlegend" title="Moderator"><div id="squareMod"></div></a> <a href="#" class="memlegend" title="Member"><div id="squareMem"></div></a>
</font>
</tbody>

[luap]

OK trying this bit out...seems to be rather successful however I have a few questions.

This is what mine looks like right now...


The orange and Light blue ones seem to be sort of "out of place". They are more obvious when looking at normal screen size. The space between them seems a bit smaller and they are both a touch higher than the others. Here are my code lines...
/* Coloured Squares */
#squareowner { width: 10px; height: 10px; background: #990000; margin-right: 3px; display: inline-block; }
#squareadmin { width: 10px; height: 10px; background: #3399ff; margin-right: 3px; display: inline-block; }
#squaregmoderator    { width: 10px; height: 10px; background: #ffff00; margin-right: 3px; display: inline-block; }
#squarebandit        { width: 10px; height: 10px; background: #ff3300; margin-right: 3px; display: inline-block; }
#squarehero          { width: 10px; height: 10px; background: #33FFFF; margin-right: 3px; display: inline-block; }
#squaresurvivor      { width: 10px; height: 10px; background: #8ccf55; display: inline-block; }
I also noticed that under the "hover before" section there is a right: -15px; that seems to be a different number for each of the original squares. Should this be modified for the new squares, and if so...to what?

This may be what I am looking for to fix the hover going off the right side of the forum too.

[Stinky666]

luap, could you possibly show me what you have in the Layout Template section of the Home.
I think I know why it's doing this. See below after each </a> there is a gap. I think it's possible that between your one, there isn't a gap like that, but the rest do have.


<a href="#" class="admlegend" title="Administrator"><div id="squareAdm"></div></a> <a href="#" class="gmodlegend" title="Global Moderator"><div id="squareGMod"></div></a> <a href="#" class="modlegend" title="Moderator"><div id="squareMod"></div></a> <a href="#" class="memlegend" title="Member"><div id="squareMem"></div></a>


The "Hover:Before" that you mention, is purely the positioning of the arrow and bubble. You can have a play with it it you wish to. Just edit the first one for example, then in the preview pane hover over the coloured square, to see exactly how it works

[luap]

<td style="background-color: #181818; float:right; padding: 5px;">
<a href="#" class="ownerlegend" title="Owner"><div id="squareowner"></div></a> <a href="#" class="adminlegend" title="Administrator"><div id="squareadmin"></div></a> <a href="#" class="gmoderatorlegend" title="Global Moderator"><div id="squaregmoderator"></div></a> <a href="#" class="banditlegend" title="Bandit"><div id="squarebandit"></div></a><a href="#" class="herolegend" title="Hero"><div id="squarehero"></div></a> <a href="#" class="survivorlegend" title="Survivor"><div id="squaresurvivor"></div></a>
</td>


That was exactly what the issue was...so it is not like some other languages where the spaces often mean nothing.
Both issues are fixed...Thanks again.

[Stinky666]

Jun 22, 2013 13:50:50 GMT -8 luap said:

<td style="background-color: #181818; float:right; padding: 5px;">
<a href="#" class="ownerlegend" title="Owner"><div id="squareowner"></div></a> <a href="#" class="adminlegend" title="Administrator"><div id="squareadmin"></div></a> <a href="#" class="gmoderatorlegend" title="Global Moderator"><div id="squaregmoderator"></div></a> <a href="#" class="banditlegend" title="Bandit"><div id="squarebandit"></div></a><a href="#" class="herolegend" title="Hero"><div id="squarehero"></div></a> <a href="#" class="survivorlegend" title="Survivor"><div id="squaresurvivor"></div></a>
</td>

See the part I have highlighted in blue within your quote, try adding a gap after the </a>
So instead of it being: </a><a
It will be: </a> <a
I am pretty confident that should resolve this issue

[luap]

Beat me to the edit...it did in fact fix it thank you. Excellent original post describing the process.

[Stinky666]

Jun 22, 2013 13:55:58 GMT -8 luap said:

Beat me to the edit...it did in fact fix it thank you. Excellent original post describing the process.

Glad it worked

[pawl]

Hey Stinky666 - think you can see where I'm going with my legend, but is there any way to get rid of the little arrow that appears above each box? I know that it's almost invisible, but it still irritates me. =P

[Stinky666]

Jul 3, 2013 15:37:22 GMT -8 pawl said:

Hey Stinky666 - think you can see where I'm going with my legend, but is there any way to get rid of the little arrow that appears above each box? I know that it's almost invisible, but it still irritates me. =P

You could move it left slightly for each one, so they are on the window table.
Just be sure to edit the colour of them to match the window bg.

(I know it isn't window bg anymore but you know what I mean lol)

[Welshling]

Ok question, not sure if its been asked before or not.

You know when you hover over each member group in the Info Center, and those bubbles appear above them stating which group they are? Well my question is how come some bubbles, don't appear directly over the colored squares?

delusional.freeforums.net Staff is showing, slightly off to the right? I'm guessing this is a margin amount or align: right; amount?

[Stinky666]

Take the below as an example, you will need to edit the "top" and "right" settings.
IN blue below.. just play with them to see how you wish to have it.
Each group has those settings to align them how you prefer.

/* Administrator */
a.admlegend {
position: relative;
text-decoration: none;
}
a.admlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -15px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.admlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}

[Welshling]

Stinky666, thanks. Working on those edits now. I'll let you know if i can't figure it out xD

[Stinky666]

You should be able to, it's only changing numbers