Board Mods on hover of board's description - Help!

[Pheobe Black]

So I've been trying to get it so when we hover on the board description (be it image or text since we're doing backgrounds on some if not all of them), I'd like to be able to remove the board moderators and put that BEHIND the board description. I've tried for 2 weeks to get it to do what I want, and I'm about ready to kill it.... I'm getting nowhere with it and don't want to mess up the boards layout template that we have. 

orderofmerlintester.proboards.com

That's the site we're putzing with so we don't have to hear our members go 'this isnt working on this and that skin' while we're designing the new skin. Anyone who can help, please help! I'm tearing my hair out and wracking my poor brain to no end trying to figure out how to make this work. I've tried the onmouseover stuff with the different $[whatever] code pieces, but it doesn't want to work for me.

Pretty please & thank you!!!

[Tumbleweed]

Sept 29, 2016 15:05:58 GMT -8 Pheobe Black said:

So I've been trying to get it so when we hover on the board description (be it image or text since we're doing backgrounds on some if not all of them), I'd like to be able to remove the board moderators and put that BEHIND the board description. I've tried for 2 weeks to get it to do what I want, and I'm about ready to kill it.... I'm getting nowhere with it and don't want to mess up the boards layout template that we have. 

orderofmerlintester.proboards.com

That's the site we're putzing with so we don't have to hear our members go 'this isnt working on this and that skin' while we're designing the new skin. Anyone who can help, please help! I'm tearing my hair out and wracking my poor brain to no end trying to figure out how to make this work. I've tried the onmouseover stuff with the different $[whatever] code pieces, but it doesn't want to work for me.

Pretty please & thank you!!!

Just to clarify, by behind, do you mean the moderators would fade in when hovering over the description?

[Pheobe Black]

Exactly that! We have Leif's hover over profile code in our mini profiles, so something like that would be perfect but I've been fighting with the coding to get it to work and play nice with me.

[Tumbleweed]

Sept 29, 2016 22:29:23 GMT -8 Pheobe Black said:

Exactly that! We have Leif's hover over profile code in our mini profiles, so something like that would be perfect but I've been fighting with the coding to get it to work and play nice with me.

I'm fiddling with this but I kind of stopped because I'm not sure if your descriptions will be vastly different in length as you see on my test site and how you can still see the longer description. As in Leif's the fading out background need to be about the same size as the fading in stuff. So I may have to rethink the coding on this if you want the descriptions various sizes and them fading away totally. Anyway, take a look and the boards I have set up with moderators is the "General Board" and the Crazy 1 board and within that board, the Sane board.
putteraround5.proboards.com/

Let me know where you want to go from here. Looking at your site, I bet you could take it from here as it seems you know your way around coding but I'll try to do whatever you wish me to do.

[Pheobe Black]

that is exactly what im looking for!!! our backgrounds on the descriptions are just forced board images in the style sheet, so i can always work around it. i've just been getting so frustrated i wanted to shoot my computer hahaha. but yes, that is exactly what im trying to do!

[Tumbleweed]

Oct 1, 2016 9:05:06 GMT -8 Pheobe Black said:

that is exactly what im looking for!!! our backgrounds on the descriptions are just forced board images in the style sheet, so i can always work around it. i've just been getting so frustrated i wanted to shoot my computer hahaha. but yes, that is exactly what im trying to do!

Alright, I'll just give you what I have:

This is the css:


#transition1{
position:relative;
height:30px;
margin-bottom:18px;
margin-top:4px;
opacity: 1;
}
.my_hover {
opacity: 0;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
.my_hover:hover{
opacity: 1;
}
/*leave the height to zero*/
.my_trans_cont1{
width:100%;
height:0px;
}
#my_table1{
position:absolute;top:0px;
width:100%;
height:30px;
background-color:white;color:black;
font-size: 14px;
}
#my_content1{
padding:4px;            
}




And below is what I added in blue and the bolded black is what is in your board list already:

<td class="main clickable">
<span class="link">$[board]</span>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />


<div id="transition1">
<p class="description">$[board.description]</p>
<div class="my_hover">
<div id="my_table1">
<div id="my_content1">
{if $[board.num_mods]}
<p class="moderators">
Moderator{if $[board.num_mods] != 1}s{/if}:
{foreach $[board.moderator_group]}$[board.moderator_group.comma_before] $[board.moderator_group]{/foreach}{if $[board.moderator]}{if $[board.moderator_group]}, {/if}{/if}
{foreach $[board.moderator]}$[board.moderator]$[board.moderator.comma] {/foreach}
</p>
{/if}
</div>
</div>
</div>
</div>
<br>




Hopefully that is enough of a starting point for you to tweak how you want it to look. Let me know if anything stumps you.

[Pheobe Black]

Thank you so much!!!!!

UPDATE: Tumbleweed , thank you so much!!!!!! Took some tweaking and what not, but I finally got it figured out to where it fits perfectly over what we wanted!!! I just have to adjust the color for the background on the mods but, thank you again so much!!!

orderofmerlintester.proboards.com

[Tumbleweed]

Oct 1, 2016 14:07:32 GMT -8 Pheobe Black said:

Thank you so much!!!!!

UPDATE: Tumbleweed , thank you so much!!!!!! Took some tweaking and what not, but I finally got it figured out to where it fits perfectly over what we wanted!!! I just have to adjust the color for the background on the mods but, thank you again so much!!!

orderofmerlintester.proboards.com

You're welcome. Looking at your site, I knew you could figure it out. And yep, that yellow needs adjusting so I know why you said that.  But otherwise, you have a very attractive site. That said, do you know that viewing your site in Chrome, I have to scroll quite a bit to see the right side and I know why, you have it set wider than my screen resolution.  Might want to consider those who don't have the same screen res as you. Maybe consider a "slide out of the side" table to hold your info? Anyway, have fun with your site.

[Pheobe Black]

Oct 1, 2016 21:12:54 GMT -8 Tumbleweed said:

You're welcome. Looking at your site, I knew you could figure it out. And yep, that yellow needs adjusting so I know why you said that.  But otherwise, you have a very attractive site. That said, do you know that viewing your site in Chrome, I have to scroll quite a bit to see the right side and I know why, you have it set wider than my screen resolution.  Might want to consider those who don't have the same screen res as you. Maybe consider a "slide out of the side" table to hold your info? Anyway, have fun with your site.

Yeah, I've got to plug in my smaller monitor before we install that skin onto our main site. That is our tester that we use to do new skins and what not for the main site so I don't have members harassing me going 'this doesn't work, you broke that'. Gets annoying sometimes hahaha. But that's an idea for sure that I may have to try. I made the sidebar plugin myself with a bunch of different codes smooshed together, so I can probably try to figure out some easier things for those with smaller screen res.

[Tumbleweed]

Oct 4, 2016 12:14:07 GMT -8 Pheobe Black said:

Oct 1, 2016 21:12:54 GMT -8 Tumbleweed said:

You're welcome. Looking at your site, I knew you could figure it out. And yep, that yellow needs adjusting so I know why you said that.  But otherwise, you have a very attractive site. That said, do you know that viewing your site in Chrome, I have to scroll quite a bit to see the right side and I know why, you have it set wider than my screen resolution.  Might want to consider those who don't have the same screen res as you. Maybe consider a "slide out of the side" table to hold your info? Anyway, have fun with your site.

Yeah, I've got to plug in my smaller monitor before we install that skin onto our main site. That is our tester that we use to do new skins and what not for the main site so I don't have members harassing me going 'this doesn't work, you broke that'. Gets annoying sometimes hahaha. But that's an idea for sure that I may have to try. I made the sidebar plugin myself with a bunch of different codes smooshed together, so I can probably try to figure out some easier things for those with smaller screen res.

If you want to see what your site looks like on different devices, try this site. It's free and super easy to use.  I'm on a lap top so my screen res is 1366 x 768 and it looks like your site is set to 1500px so that's why I get the scroll bar. By the way, it's your forum so you do what you think your members like. If they all have giant screens then I wouldn't worry about it.

[Pheobe Black]

I plugged my other one in, the max on that one is like 1200 or so. My laptop's monitor is 1600, so we weren't thinking when we did the coding with the wrapper. I'm definitely looking into a slider type code that i can use with the sidebars. Thank's for letting me know about it though! We're always trying to get new members and that would easily become a problem