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

[Welshling]

Stinky666, oh hush your noise you I have completed that and I think it looks good *Shifty eyes*

[Alecto]

Hello!

So I am definitely not experienced with coding, but I tried entering this in anyway.

I thought I followed all your instructions completely, but ended up with just an orange global moderator and a pink moderator box at the bottom when I should have an Administrator, Global Moderator, Moderator, Storybrooke Resident, and Enchanted Forest Resident.

How can that be?

Thanks for any help you can give.

[Stinky666]

Sept 5, 2013 21:21:18 GMT -8 Alecto said:

Hello!

So I am definitely not experienced with coding, but I tried entering this in anyway.

I thought I followed all your instructions completely, but ended up with just an orange global moderator and a pink moderator box at the bottom when I should have an Administrator, Global Moderator, Moderator, Storybrooke Resident, and Enchanted Forest Resident.

How can that be?

Thanks for any help you can give.

Could you give me the coding from your Home layout template (or anywhere else you placed the first part of coding). And can you paste the CSS you have for the legend in the style sheet?

[Alecto]

Sept 5, 2013 21:27:48 GMT -8 Stinky666 said:

Sept 5, 2013 21:21:18 GMT -8 Alecto said:

Hello!

So I am definitely not experienced with coding, but I tried entering this in anyway.

I thought I followed all your instructions completely, but ended up with just an orange global moderator and a pink moderator box at the bottom when I should have an Administrator, Global Moderator, Moderator, Storybrooke Resident, and Enchanted Forest Resident.

How can that be?

Thanks for any help you can give.

Could you give me the coding from your Home layout template (or anywhere else you placed the first part of coding). And can you paste the CSS you have for the legend in the style sheet?

Home:

<font style ="float:right; padding: 0px;">
<a href="#" class="admlegend" title="Administrator"><div id="8c0835"></div></a> <a href="#" class="gmodlegend" title="Global Moderator"><div id="d60d21"></div></a> <a href="#" class="modlegend" title="Moderator"><div id="d60d7f"></div></a> <a href="#" class="storylegend" title="Storybrooke Resident"><div id="13308a"></div></a> <a href="#" class="enchantedlegend" title="Enchanted Forest Resident"><div id="0a879a"></div></a>
</font>


Style Sheet:

/* 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;
}

/* Global Moderator */
a.gmodlegend {
position: relative;
text-decoration: none;
}
a.gmodlegend: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: -42px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.gmodlegend: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;
}

/* Moderator */
a.modlegend {
position: relative;
text-decoration: none;
}
a.modlegend: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: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.modlegend: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;
}

/* Storybrooke Resident */
a.storylegend {
position: relative;
text-decoration: none;
}
a.storylegend: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: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.storylegend: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;
}

/* Enchanted Forest Resident */
a.enchantedlegend {
position: relative;
text-decoration: none;
}
a.enchantedlegend: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: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.enchantedlegend: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;
}

[Stinky666]

Alecto, do you have this part of the coding in too, above the CSS you posted in the post above?

/**************************************************************************
* Member Legend - Info Center *
**************************************************************************/
/* Coloured Squares */
#squareAdm { width: 10px; height: 10px; background: #1979e6; margin-right: 3px; display: inline-block; }
#squareGMod { width: 10px; height: 10px; background: #e68819; margin-right: 3px; display: inline-block; }
#squareMod { width: 10px; height: 10px; background: #e219e6; margin-right: 3px; display: inline-block; }
#squareMem { width: 10px; height: 10px; background: #8ccf55; display: inline-block; }


(Edit it to your needs, obviously)


Edit:
Also where it says <div id=""> you need to put the above (squareAdm - example) there. You seem to have put the hex codes

---

Edit 2:
Yep that fixes it all. So for example in the LAyout Templates use this:

<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="storylegend" title="Storybrooke Resident"><div id="squareStory"></div></a> <a href="#" class="enchantedlegend" title="Enchanted Forest Resident"><div id="squareEnchanted"></div></a>
</font>


And then for the Style Sheet, use:
(At the top, change the hex codes - #1979e6 for example - to the colours your groups are

SPOILER: Click to show

/**************************************************************************
* Member Legend - Info Center *
**************************************************************************/
/* Coloured Squares */
#squareAdm { width: 10px; height: 10px; background: #1979e6; margin-right: 3px; display: inline-block; }
#squareGMod { width: 10px; height: 10px; background: #e68819; margin-right: 3px; display: inline-block; }
#squareMod { width: 10px; height: 10px; background: #e219e6; margin-right: 3px; display: inline-block; }
#squareStory { width: 10px; height: 10px; background: #e219e6; margin-right: 3px; display: inline-block; }
#squareEnchanted { width: 10px; height: 10px; background: #8ccf55; display: inline-block; }

/* 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;
}

/* Global Moderator */
a.gmodlegend {
position: relative;
text-decoration: none;
}
a.gmodlegend: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: -42px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.gmodlegend: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;
}

/* Moderator */
a.modlegend {
position: relative;
text-decoration: none;
}
a.modlegend: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: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.modlegend: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;
}

/* Storybrooke Resident */
a.storylegend {
position: relative;
text-decoration: none;
}
a.storylegend: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: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.storylegend: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;
}

/* Enchanted Forest Resident */
a.enchantedlegend {
position: relative;
text-decoration: none;
}
a.enchantedlegend: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: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.enchantedlegend: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;
}

[Alecto]

Sept 5, 2013 21:32:18 GMT -8 Alecto said:

Sept 5, 2013 21:27:48 GMT -8 Stinky666 said:

Could you give me the coding from your Home layout template (or anywhere else you placed the first part of coding). And can you paste the CSS you have for the legend in the style sheet?

Home:

<font style ="float:right; padding: 0px;">
<a href="#" class="admlegend" title="Administrator"><div id="8c0835"></div></a> <a href="#" class="gmodlegend" title="Global Moderator"><div id="d60d21"></div></a> <a href="#" class="modlegend" title="Moderator"><div id="d60d7f"></div></a> <a href="#" class="storylegend" title="Storybrooke Resident"><div id="13308a"></div></a> <a href="#" class="enchantedlegend" title="Enchanted Forest Resident"><div id="0a879a"></div></a>
</font>


Style Sheet:

/* 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;
}

/* Global Moderator */
a.gmodlegend {
position: relative;
text-decoration: none;
}
a.gmodlegend: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: -42px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.gmodlegend: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;
}

/* Moderator */
a.modlegend {
position: relative;
text-decoration: none;
}
a.modlegend: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: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.modlegend: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;
}

/* Storybrooke Resident */
a.storylegend {
position: relative;
text-decoration: none;
}
a.storylegend: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: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.storylegend: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;
}

/* Enchanted Forest Resident */
a.enchantedlegend {
position: relative;
text-decoration: none;
}
a.enchantedlegend: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: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.enchantedlegend: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;
}

Perfect! Thank you.

[Welshling]

Stinky666, just wondering about the hover over the blocks... Is there a way to add in the links into the css to take you to the members in that group?

So clicking on admin, would show all admins in the member list. Can this be done? Thanks

[Stinky666]

Sept 17, 2013 2:55:58 GMT -8 Welshling said:

Stinky666, just wondering about the hover over the blocks... Is there a way to add in the links into the css to take you to the members in that group?

So clicking on admin, would show all admins in the member list. Can this be done? Thanks

If you know how/where it displays a list of, for example JUST Admins, or JUST G-Mods, or JUST Mods, etc then you could make it so the square is clickable. However, I have no idea how you could hover and make it show people's names.

The only way I knwo to show staff, but all staff, would be adding the below to the Layout Templates:
"/members?dir=asc&sort=name&view=staff"

Not sure where can/does display just admins, or just other groups/ranks

[Welshling]

hm yeah i would want all members in those groups, admin. staff. member. inactive. for example to show on click of the blocks, but never mind. i just realized that you can only search staff by group. but as you said it labels them all as staff not Admin then staff in another group xD

Something for the future maybe? *shifty eyes*

[pawl]

Yo, Stinky666!
Been using a modified version of this for ages here, and I've been playing again lately. I've got it (mostly) working how I want, but for some reason the little arrows won't move/disappear (they show above each box, most noticeable on the bottom 3), and I can't find anything to control them in the CSS. Any way I can get rid of them at all? =]

[CrazyBoy]

Craig sorry tagged but i think that you don't care for these posts.
can you help me on changing the colors of each group please?

[Craig]

Using the code posted in this topic? There are extensive instructions in the first post, so you will need to let me know what part of it you are stuck on

[CrazyBoy]

how can i tell you hmmm?
look at this test forum scroll down to reach 4 square has groups and i want to change the colors on each square

[Craig]

So you copied this in to your stylesheet:


/* Coloured Squares */
#squareAdm { width: 10px; height: 10px; background: #1979e6; margin-right: 3px; display: inline-block; }
#squareGMod { width: 10px; height: 10px; background: #e68819; margin-right: 3px; display: inline-block; }
#squareMod { width: 10px; height: 10px; background: #e219e6; margin-right: 3px; display: inline-block; }
#squareMem { width: 10px; height: 10px; background: #8ccf55; display: inline-block; }

There are four lines there, one for each square. So, for example, the first line:


#squareAdm { width: 10px; height: 10px; background: #1979e6; margin-right: 3px; display: inline-block; }


That is for the first square, the 'administrator' square. You will see background: #1979e6; on that line. The 1979e6 is the current colour of that square, so change that to the colour of your liking.

[CrazyBoy]

Sept 10, 2019 3:58:21 GMT -8 Craig said:

So you copied this in to your stylesheet:


/* Coloured Squares */
#squareAdm { width: 10px; height: 10px; background: #1979e6; margin-right: 3px; display: inline-block; }
#squareGMod { width: 10px; height: 10px; background: #e68819; margin-right: 3px; display: inline-block; }
#squareMod { width: 10px; height: 10px; background: #e219e6; margin-right: 3px; display: inline-block; }
#squareMem { width: 10px; height: 10px; background: #8ccf55; display: inline-block; }

There are four lines there, one for each square. So, for example, the first line:


#squareAdm { width: 10px; height: 10px; background: #1979e6; margin-right: 3px; display: inline-block; }


That is for the first square, the 'administrator' square. You will see background: #1979e6; on that line. The 1979e6 is the current colour of that square, so change that to the colour of your liking.

thank you Craig will look at it and edit then