Hover & "Welcome Name. Login/Logout"

[ibis]

Hi!

I'm trying to put a hover table over a GIF I have in my forum's sidebar, and I'm looking at this thread for help, but it's about putting hover tables over the header, so I'm struggling to figure out if I can tweak it to make it work for my sidebar. How do I make those codes affect the sidebar instead of the banner, and are they even the right codes for what I want to do?

Also, I'm trying to move the "Welcome Name. Login/Logout" to the sidebar so that when a member hovers over the GIF/image, that information/option will appear in the table. I would like for the user's avatar to appear there (as illustrated in my quick drawing located below), too. I'm a huge novice when it comes to skinning (and coding in general), but I have a feeling that this will require if/else statements in the CSS. I just have zero idea how to go about doing it, haha.

Here's the link to the site I'm working on: link, and here's a drawing that I did of what I'm shooting for: link.

Thanks so much for any and all help!

[Tumbleweed]

Jul 7, 2017 9:41:32 GMT -8 ibis said:

Hi!

I'm trying to put a hover table over a GIF I have in my forum's sidebar, and I'm looking at this thread for help, but it's about putting hover tables over the header, so I'm struggling to figure out if I can tweak it to make it work for my sidebar. How do I make those codes affect the sidebar instead of the banner, and are they even the right codes for what I want to do?

Also, I'm trying to move the "Welcome Name. Login/Logout" to the sidebar so that when a member hovers over the GIF/image, that information/option will appear in the table. I would like for the user's avatar to appear there (as illustrated in my quick drawing located below), too. I'm a huge novice when it comes to skinning (and coding in general), but I have a feeling that this will require if/else statements in the CSS. I just have zero idea how to go about doing it, haha.

Here's the link to the site I'm working on: link, and here's a drawing that I did of what I'm shooting for: link.

Thanks so much for any and all help!

Something like this would go in your side bar box content area:


<div class="base_image">
<div class="hover_stuff"> Stuff to show on hover </div>
</div>

And then the css that you'd stick at the bottom of your style sheet would be this:


/* sidebar hover */
.base_image{ opacity: 1; width:250px; height: 400px;
background-image:url(https://s9.postimg.cc/804lqpqzz/fvdf.gif);
background-repeat:no-repeat;position:relative;top:-8px;left:-4px;
}
.hover_stuff { width:200px; height: 360px;
background: white; color: black;padding:8px;
opacity: 0;position:relative;top:11px;left:10px;
transition-duration: 2s; -moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
}
.hover_stuff:hover {opacity: .9;
}


You might have to play with the bolded css to get it centered the way you want and get your text positioned where you want it from the edges of the hover background.

Hope that helps. On a after-thought, maybe you need more help getting the other content (welcome message/avatar) you want to show on hover? If so, let me know.

[ibis]

Tumbleweed

Thank you so much, the code for the hover works perfectly!

Ah, and yeah, I'd really appreciate some help with the member avatar and login/logout stuff in the hover table, if you have the time!

[Tumbleweed]

Jul 7, 2017 16:37:56 GMT -8 ibis said:

Tumbleweed

Thank you so much, the code for the hover works perfectly!

Ah, and yeah, I'd really appreciate some help with the member avatar and login/logout stuff in the hover table, if you have the time!

Are you wanting the welcome bit (Welcome "name here" Login/register or logout) totally removed from where it is now and only have it in the side bar? Or do you want both options for guests/members? Right now I'm doing it so it moves things but I could possibly clone them so you have two or I can try although that is really redundant to have two. But same question for the pbn bar, both places or only side bar?

I do have all the elements in the side bar now I just need to position them and I'm not sure if I can move the welcome bit and have it split like you have it in your example with Welcome at the top and then login/register/logout at the bottom. (I know it could be done manually but there are drawbacks on that.) I'll be thinking about that while I'm getting everything more centered and looking nice. As you can see, things are not where they should be but they are there. 

Logged in view



Guest View (no pbn bar for guests, of course)

[ibis]

Tumbleweed

Whoa, that's looking pretty cool already!

I'd like for the "welcome name, login/logout" as well as the pbn bar to be just in the sidebar, as I agree, it would be kind of redundant for them to simultaneously be in two different places, haha.

And the "welcome" bit doesn't need to be separated from the "login/logout" stuff, especially if having them apart would be unnecessarily complicated (and if you recommend keeping them together).

Thank you again for taking the time to help me out! I sincerely appreciate it.

[Tumbleweed]

O.K. Positioned everything. Let me know if you want anything tweaked before I give you instructions and the code. Also, forewarning: There are many little things you'll have to do to get this set up to do what you wanted. Not hard but a bit of busy work.

Default avatar


Avatar Maker:



I put the PBN bar along the edge of the hover background much like it is on the edge of the screen so if someone closed it (like in screen cap 2), it's just a little arrow out of the way. Centering it and having someone close it would leave that arrow in the middle looking stupid, imo.

Let me know if you need some changes.

[ibis]

Tumbleweed

That's pretty much perfect, thank you!!

And I don't mind if it's tedious; so long as it's not difficult, I should be able to handle it, haha.

[ibis]

Bump! Tumbleweed

[Tumbleweed]

Jul 12, 2017 17:24:57 GMT -8 ibis said:

Bump! Tumbleweed

Oh gosh, I'm sorry, ibis . I read your previous reply and somehow got distracted  and then forgot about it.  Thanks for the bump and so here we go....

Step 1:  
O.K. The first thing you will do is add this code by Wormo in your forum wrapper template (Admin Home> Themes> Layout Templates>Forum Wrapper) right below the <body> tag (approximately on line 8}.

<div id="keepsakes" style="display:none"><div id="avatarsave">$[current_user.avatar]</div></div>

So it will look like this:
<body>
<div id="keepsakes" style="display:none"><div id="avatarsave">$[current_user.avatar]</div></div>


Step 2:
Next head to the sidebar plugin (Admin> Plugins> Manage> Sidebar Redux Settings>) and add this to your content box: (This is in place of whatever you have now in that box.)


<div class="base_image">
<div class="hover_stuff">
    <p style="clear:both;"></p>
<div id="move-welcome"></div>

<div class="side_avatar">  
<script type="text/javascript">
<!--
document.write(document.getElementById('avatarsave').innerHTML);
</script>
               
  </div>  

    <div class="move_pbn"></div>
</div>
</div>
Be sure to save.

Step 3:
Now since this sidebar redux plugin is made so one can "build" onto it go to your plugins but instead of clicking on manage, click on build. Then click on the sidebar redux. And there click on the "components". There you'll see a big code area for javascript and there will be code in it. Don't touch that but scroll down and then you'll see tabs for "Headers" and "Footers". Click on "Footers". Scroll to the bottom of the code in the footer box and at the very bottom below this line....  <div id="sidebarr-foot"></div>.....add this javascript below:



<script type="text/javascript">
$(document).ready(function() {
     $('#move-welcome').append($('#welcome'));
   
$('.move_pbn').append($('#pbn-bar'));
    $('.move_pbn').append($('#pbn-bar-wrapper img'));
 
});
</script>
Be sure to save. 


Step 4:
And the last thing you need to do is add the css to the very bottom of your style sheet so head to your style sheet (Admin> Themes> Advanced Styles>CSS> Style Sheet> and add what is below:


/* sidebar hover */
.base_image{ opacity: 1; width:250px; height: 400px;
background-image:url(https://s9.postimg.cc/804lqpqzz/fvdf.gif);
background-repeat:no-repeat;position:relative;top:-8px;left:-5px;
}
.hover_stuff { width:200px; height: 360px;
background: white; color: black;padding:8px;
opacity: 0;margin-right:auto;margin-left:auto;
transition-duration: 2s; -moz-transition-duration: 2s;
-webkit-transition-duration: 2s;position:relative;top:13px;
}
.hover_stuff:hover {opacity: .9;
margin-right:auto;margin-left:auto;
text-align:center!important;
}
#move-welcome{width:200px;height:40px;margin-right:auto;margin-left:auto;
text-align:center!important;padding-top:8px;}
#welcome{width:200px;margin-right:auto;margin-left:auto;
z-index:100;color:black;text-align:left;  
color:black;line-height:18px!important;padding:0px;margin:0px;
}
#welcome a{color:black;line-height:18px!important;padding:0px;margin:0px;}
.side_avatar{width:200px;margin-right:auto;
margin-left:auto;text-align:center;position:relative;top:18px;
}
/*this centers the default image and any images uploaded*/
.side_avatar img{border-radius: 100px;width:150px;height:150px;
position:relative;top:20px;left:24px;
text-align:center;
}
/*this centers the avatar maker*/
.side_avatar.avatar_size_default, .avatar_size_default embed, .avatar_size_default object, .avatar_size_default>div, .avatar-wrapper.avatar_size_default>div>div{
border-radius: 100px;width:150px;height:150px;
position:relative;top:20px;left:24px;
text-align:center;   background-color:gray;  
}
.move_pbn{position:absolute; bottom:30px;right:0px;}
.move_pbn #pbn-bar{float:left!important;}

Save and that should be it. At least I don't think I forgot anything. Don't be surprised if we have to tweak something, though. And again, sorry for the delay and my forgetfulness.