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

[Stinky666]

Apr 19, 2013 9:07:19 GMT -8 Sunny said:

Yes, I can see it

I don't get it. I followed the directions and everything. I'll try again. I must have put it in the wrong place or something...

You can't have. I used YOUR coding on my forum.
Are you sure you have the correct theme selected? Do you have more than one of the same theme?

[Sunny]

I got it to work on my active site, not the Beta Tester. Now sure why it won't work there but I did get it working. That's for your help ^^

[Stinky666]

Apr 19, 2013 9:13:24 GMT -8 Sunny said:

I got it to work on my active site, not the Beta Tester. Now sure why it won't work there but I did get it working. That's for your help ^^

I'm very glad you did get it working, because I honestly have no idea why it isn't working on the beta lol.
Any thing else, don't hesitate to ask

[Sunny]

Hi there it's me again. I'm using this code on my new site and I'm running into problems again: inkberry.boards.net/

The Admin box won't stay in line with the rest of the boxes and the text gets cut off.

EDIT

I got the boxes to align next to one another but the text is still being cut off.

[Stinky666]

Hi Sunny.
Be sure to follow these steps that were in the first post

Next go to your Style Sheet. When there, on line 456 you should see:

.container > .content { overflow: hidden; }

Change the part in pink to visible

[Sunny]

I did do that. It's on line 455, hopefully it supposed to be??

[Welshling]

Ok I have changed the variable to Visible in the templates area loveremains.proboards.com but as you can see, the angel member group is hidden a little, when hovered over.

And futterwacken.boards.net/ the admin group here is separate from the rest?

Both are theme's that i have done or have been working on, so i apologize once again for breaking it >.<

[Stinky666]

May 2, 2013 11:32:57 GMT -8 Welshling said:

Ok I have changed the variable to Visible in the templates area loveremains.proboards.com but as you can see, the angel member group is hidden a little, when hovered over.

And futterwacken.boards.net/ the admin group here is separate from the rest?

Both are theme's that i have done or have been working on, so i apologize once again for breaking it >.<

Can you paste the CSS for the legend, and the code in the layout template for it too?


Edit:
Also Sunny, I have no idea why it isn't working after you changed hidden to visible.
I will have a little play later.
Could you also paste me your CSS for this + layout template (Home).

[Welshling]

This is the one from love remains where the variable has been altered to visible. I am not a member of staff on Futterwacken, but i can get the info for there if you like.
/**************************************************************************
* Member Legend - Info Center *
**************************************************************************/
/* Coloured Squares */
#squarestaf { width: 10px; height: 10px; background: #FF3399; margin-right: 3px; display: inline-block; }
#squarevamp { width: 10px; height: 10px; background: #990000; margin-right: 3px; display: inline-block; }
#squarehunt { width: 10px; height: 10px; background: #3300CC; margin-right: 3px; display: inline-block; }
#squarehuma { width: 10px; height: 10px; background: #CC6600; margin-right: 3px; display: inline-block; }
#squarewere { width: 10px; height: 10px; background: #336600; margin-right: 3px; display: inline-block; }
#squarehybr { width: 10px; height: 10px; background: #0066FF; margin-right: 3px; display: inline-block; }
#squareorva { width: 10px; height: 10px; background: #FFFF99; margin-right: 3px; display: inline-block; }
#squarepote { width: 10px; height: 10px; background: #660099; margin-right: 3px; display: inline-block; }
#squarefaer { width: 10px; height: 10px; background: #FF99FF; margin-right: 3px; display: inline-block; }
#squaredemo { width: 10px; height: 10px; background: #660000; margin-right: 3px; display: inline-block; }
#squareshif { width: 10px; height: 10px; background: #00CC66; margin-right: 3px; display: inline-block; }
#squarewitc { width: 10px; height: 10px; background: #663300; margin-right: 3px; display: inline-block; }
#squareange { width: 10px; height: 10px; background: #FFFF00; display: inline-block; }

/* Staff */
a.staflegend {
position: relative;
text-decoration: none;
}
a.staflegend: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.staflegend: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;
}

/* Vampire */
a.vamplegend {
position: relative;
text-decoration: none;
}
a.vamplegend: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.vamplegend: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;
}

/* Hunter */
a.huntlegend {
position: relative;
text-decoration: none;
}
a.huntlegend: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.huntlegend: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;
}

/* Human */
a.humalegend {
position: relative;
text-decoration: none;
}
a.humalegend: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.humalegend: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;
}

/* Werewolf */
a.werelegend {
position: relative;
text-decoration: none;
}
a.werelegend: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.werelegend: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;
}

/* Hybrid */
a.hybrlegend {
position: relative;
text-decoration: none;
}
a.hybrlegend: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.hybrlegend: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;
}

/* Original Vampire */
a.orvalegend {
position: relative;
text-decoration: none;
}
a.orvalegend: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.orvalegend: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;
}

/* Potential */
a.potelegend {
position: relative;
text-decoration: none;
}
a.potelegend: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.potelegend: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;
}

/* Faerie */
a.faerlegend {
position: relative;
text-decoration: none;
}
a.faerlegend: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.faerlegend: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;
}

/* Demon */
a.demolegend {
position: relative;
text-decoration: none;
}
a.demolegend: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.demolegend: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;
}

/* Shifter */
a.shiflegend {
position: relative;
text-decoration: none;
}
a.shiflegend: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.shiflegend: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;
}

/* Witch */
a.witclegend {
position: relative;
text-decoration: none;
}
a.witclegend: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.witclegend: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;
}

/* Angel */
a.angelegend {
position: relative;
text-decoration: none;
}
a.angelegend: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.angelegend: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]

Welshling, I think the issue for futterwacken.boards.net/ is the fact the admin legend is on a new line.
Make sure it's like so:

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

And not like:

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


I am going to test all the rest for the cutting off on a test forum right now, because you have both changed the content from hidden to visible, yet it isn't clearly working for you both. It has always worked for me, and always on your other themes welshling, so i am at a loss currently. Will report back when I figure it out

And for you Sunny

[Stinky666]

Ok so for some reason (which must be an update - because changing line 454 to visible has ALWAYS worked) it isn't working.
I honestly can't figure out why. I even changed ALL overflow's to be visible (absolutely every single one), and nothing.

I really hope someone else can figure this out. It's most likely something stupid I am missing, but I really just can't find it

Peter, Shrike, Smangii, Brian, Michael, pawl, RedBassett - I myself would love to know this fix. if any of you can help, I will really appreciate it. Immensely. As will everyone else.
(sorry guys, just tagging anyone I can think of who's username I can remember lol )

[Shrike]

The main cause is that the forum wrapper (#wrapper) still has overflow-x set to hidden. Changing it to visible should fix things for everyone. Use Ctrl + F to find it in the CSS, or simply add #wrapper {overflow-x: visible} to the bottom of the stylesheet.

For Welshling, removing the overflow on your "Love Remains" site made a horizontal scroll bar appear for me (1366px screen). This could be related to sidebars, but you can also fix it by moving the legend over. In the first line of the template mod, add a suitable amount of right margin: <font style ="float:right; margin-right: 20px; padding: 0px;"> As for the legend being on two lines on "Futterwacken", you're missing the styles for the GMod legend which is causing the layout problems.

[Stinky666]

May 3, 2013 7:29:46 GMT -8 Shrike said:

The main cause is that the forum wrapper (#wrapper) still has overflow-x set to hidden. Changing it to visible should fix things for everyone. Use Ctrl + F to find it in the CSS, or simply add #wrapper {overflow-x: visible} to the bottom of the stylesheet.

For Welshling, removing the overflow on your "Love Remains" site made a horizontal scroll bar appear for me (1366px screen). This could be related to sidebars, but you can also fix it by moving the legend over. In the first line of the template mod, add a suitable amount of right margin: <font style ="float:right; margin-right: 20px; padding: 0px;"> As for the legend being on two lines on "Futterwacken", you're missing the styles for the GMod legend which is causing the layout problems.

I didn't even consider overflow-x, I am an idiot omg.
Thanks so much. I REALLY appreciate this <3

Also to note for people to find this maybe slightly easier (if there is anything easier than ctrl+f), it for me on a default theme, is line 128.

[Welshling]

May 3, 2013 7:29:46 GMT -8 Shrike said:

The main cause is that the forum wrapper (#wrapper) still has overflow-x set to hidden. Changing it to visible should fix things for everyone. Use Ctrl + F to find it in the CSS, or simply add #wrapper {overflow-x: visible} to the bottom of the stylesheet.

For Welshling, removing the overflow on your "Love Remains" site made a horizontal scroll bar appear for me (1366px screen). This could be related to sidebars, but you can also fix it by moving the legend over. In the first line of the template mod, add a suitable amount of right margin: <font style ="float:right; margin-right: 20px; padding: 0px;"> As for the legend being on two lines on "Futterwacken", you're missing the styles for the GMod legend which is causing the layout problems.

Thanks Shrike I have edited the margin right property on 'Love Remains' and all is well at present.
As for 'Futterwacken' The admin is the one editing the information there, not myself so I may get back to you with updates on her legend. Thank you both

[sleepysage]

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