Please Help Me Toggle My Staff List

Hello! So I'm the founder of Canis Kingdom, a semi-literate canine role-play. I was looking at other role-plays for ideas on how to improve my forum and I saw something I really liked.

When you drag your mouse over a user on the staff list it toggles their username, then the image is a button where you can go to their profile. I would very much like to do this. I would like to display the users username, as well as they position (administrator, moderator, etc.)

If someone could help me with this, it would be greatly appreciated!

Image - No Toggle >

Image No Toggle:

Image - Toggle >

Image Toggle:

My Forum

Hi there, I will gladly help you with this. Right now I am at work and I will assist you when I get home in less than 2 hours.. (:

Draxion wrote:Hi there, I will gladly help you with this. Right now I am at work and I will assist you when I get home in less than 2 hours.. (:

Thank you very much! I appreciate it!

So to get the image to be a link, you have to put it like this...

Code:

<a href="/link"><img src="/image link" /></a>

If you want a simple name to be displayed as you hover over the image, you can use the 'title' attribute on the link tag like this...

Code:

<a href="/link" title="name of the title"><img src="/image link" /></a>

However, the way you are describing it requires a lot more coding which, yes, I do know how to do. Let me know what you would like.

Draxion wrote:So to get the image to be a link, you have to put it like this...

Code:

<a href="/link"><img src="/image link" /></a>

If you want a simple name to be displayed as you hover over the image, you can use the 'title' attribute on the link tag like this...

Code:

<a href="/link" title="name of the title"><img src="/image link" /></a>

However, the way you are describing it requires a lot more coding which, yes, I do know how to do. Let me know what you would like.

Thank you very much!
If it's possible exactly the images, however I would like in smaller text the rank to be displayed underneath the name when you hover.

If you could get the coding or write it out, it would be extremely helpful!!

Here's the coding for what you want, or something similar to it. Let me know if you have any questions.

Code:

<style type="text/css">
  #imgOne {
    background: url(''); /* image URL for image */
  }
 
 .imgInfo {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 120px;
    padding: 0px;
    width: 205px;
    border: 1px solid #fff;
  }
 
  .imgText {
    margin-top: 30px;
    text-align: center;
    background: #2E2E2E; /* background color */
    height: 40px;
    width: 95%;
    padding: 5px;
    font-family: Georgia, serif; /* text font */
    opacity: 0;
    display: block;
    color: #fff !important; /* color of the font */
    text-decoration: none;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
 
  .imgText:hover {
    opacity:0.75;
    font-size: 16px;/* size of the font */
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
</style>
<div class="imgInfo" id="imgOne">
  <a class="imgText" target="_blank" href="/link">Username<br />Rank</a>
</div>

Draxion wrote:Here's the coding for what you want, or something similar to it. Let me know if you have any questions.

Code:

<style type="text/css">
  #imgOne {
    background: url(''); /* image URL for image */
  }
 
 .imgInfo {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 120px;
    padding: 0px;
    width: 205px;
    border: 1px solid #fff;
  }
 
  .imgText {
    margin-top: 30px;
    text-align: center;
    background: #2E2E2E; /* background color */
    height: 40px;
    width: 95%;
    padding: 5px;
    font-family: Georgia, serif; /* text font */
    opacity: 0;
    display: block;
    color: #fff !important; /* color of the font */
    text-decoration: none;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
 
  .imgText:hover {
    opacity:0.75;
    font-size: 16px;/* size of the font */
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
</style>
<div class="imgInfo" id="imgOne">
  <a class="imgText" target="_blank" href="/link">Username<br />Rank</a>
</div>

Hey! So I tried your code and it didn't work. I can read basic code and everything obviously looks fine. Was I putting this in right? I just copied and pasted it right into the widget. I feel as if I may have to do something to the portal. I hope not!

So, this is where I entered everything and what happened.

Background Image:

Name and Rank:

What the code did:

Thanks!

Hi there,

Can you paste here the exact code you are using in that widget? Cause I spot several errors in the one you provided.

Thanks.

Canis Kingdom wrote:

Name and Rank:

Shouldn't that be

Code:

<div class="imgInfo" id="imgOne">
  <a class="imgText" target="_blank" href="/link">Elite Cerawin <br /> Administrator</a>

Yes, @Ace 1, that's exactly what it should be like. But I asked them to post the entire code in case they made any other errors.

EDIT: Except you are missing the closing tag for the <div>.

Yeah, I thought that it still could be below line 50 of Canis's screenshot.

Alright, so I got it working earlier then I had to re-paste the code.
Now it's broken again!

I'm going to see if I can fix it.

EDIT: I wasn't able to fix it. It just has the scattered code again! It worked earlier..

Can you please do as I requested and paste the code you used directly from the widget so we can fix it properly? Thanks!

Draxion wrote:Can you please do as I requested and paste the code you used directly from the widget so we can fix it properly? Thanks!

Code:

<style type="text/css">
  #imgOne {
    background: url(''); /* image URL for image */
  }
 
 .imgInfo {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 120px;
    padding: 0px;
    width: 205px;
    border: 1px solid #fff;
  }
 
  .imgText {
    margin-top: 30px;
    text-align: center;
    background: #2E2E2E; /* background color */
    height: 40px;
    width: 95%;
    padding: 5px;
    font-family: Georgia, serif; /* text font */
    opacity: 0;
    display: block;
    color: #fff !important; /* color of the font */
    text-decoration: none;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
 
  .imgText:hover {
    opacity:0.75;
    font-size: 16px;/* size of the font */
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
</style>
<div class="imgInfo" id="imgOne">
  <a class="imgText" target="_blank" href="/link">Elite Cerawin<br />Administrator</a>
</div>

Do you have the image link?

Or you can do it. Place the image link in between the quotes where it's all capitalized.

Code:

#imgOne {
    background: url('PLACE IMAGE LINK HERE'); /* image URL for image */
  }

Draxion wrote:Do you have the image link?

Or you can do it. Place the image link in between the quotes where it's all capitalized.

Code:

#imgOne {
    background: url('PLACE IMAGE LINK HERE'); /* image URL for image */
  }

I'm sorry if this is dragging and bothering you. I really appreciate your help.

Okay so I have tried putting an image behind the hover bar. However it covers the whole entire staff widget as a background.
The background should only fit the hover bar, so I can have multiple images for each staff member - such as the image above.

I also need help getting the images or hover bar to become links to the staffs profile page.

This is the background I want for my staff hover, however it needs to be resized. I tried to resize it, but I'm awfully confused.



I'm sorry this is taking so long once again. I really, really appreciate it.

I want my staff list to look exactly like my example image. Just without a black background.

Not a problem at all. I enjoy helping others.

I'm sorry, I realized I made a mistake with the first code I gave and for the reason the image wasn't getting sized properly. Replace the entire thing with this.

Code:

<style type="text/css">
  #imgOne {
    background: url('https://i97.servimg.com/u/f97/18/42/60/59/large_10.jpg'); /* image URL for image */
    background-size: 100% 100%;
    background-repeat: no-repeat
  }
 
 .imgInfo {
    height: 120px;
    padding: 0px;
    width: 205px;
    border: 1px solid #fff;
  }
 
  .imgText {
    margin-top: 30px;
    text-align: center;
    background: #2E2E2E; /* background color */
    height: 40%;
    width: 95%;
    padding: 5px;
    font-family: Georgia, serif; /* text font */
    opacity: 0;
    display: block;
    color: #fff !important; /* color of the font */
    text-decoration: none;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
 
  .imgText:hover {
    opacity:0.75;
    font-size: 16px;/* size of the font */
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
</style>
<div class="imgInfo" id="imgOne">
  <a class="imgText" href="LINK GOES HERE">Elite Cerawin<br />Administrator</a>
</div>

To resize the image, you just have to edit this part of the code where it says height and width.

Code:

.imgInfo {
    height: 120px;
    padding: 0px;
    width: 205px;
    border: 1px solid #fff;
  }

And to get it to link to wherever you want it to, you simpy put the link where it says 'LINK GOES HERE'.

Code:

<a class="imgText" href="LINK GOES HERE">Elite Cerawin<br />Administrator</a>

Draxion wrote:Not a problem at all. I enjoy helping others.

I'm sorry, I realized I made a mistake with the first code I gave and for the reason the image wasn't getting sized properly. Replace the entire thing with this.

Code:

<style type="text/css">
  #imgOne {
    background: url('https://i97.servimg.com/u/f97/18/42/60/59/large_10.jpg'); /* image URL for image */
    background-size: 100% 100%;
    background-repeat: no-repeat
  }
 
 .imgInfo {
    height: 120px;
    padding: 0px;
    width: 205px;
    border: 1px solid #fff;
  }
 
  .imgText {
    margin-top: 30px;
    text-align: center;
    background: #2E2E2E; /* background color */
    height: 40%;
    width: 95%;
    padding: 5px;
    font-family: Georgia, serif; /* text font */
    opacity: 0;
    display: block;
    color: #fff !important; /* color of the font */
    text-decoration: none;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
 
  .imgText:hover {
    opacity:0.75;
    font-size: 16px;/* size of the font */
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
</style>
<div class="imgInfo" id="imgOne">
  <a class="imgText" href="LINK GOES HERE">Elite Cerawin<br />Administrator</a>
</div>

To resize the image, you just have to edit this part of the code where it says height and width.

Code:

.imgInfo {
    height: 120px;
    padding: 0px;
    width: 205px;
    border: 1px solid #fff;
  }

And to get it to link to wherever you want it to, you simpy put the link where it says 'LINK GOES HERE'.

Code:

<a class="imgText" href="LINK GOES HERE">Elite Cerawin<br />Administrator</a>

I'm still having this problem


Also, how do I center the whole entire thing? So all the images go down center of the widget?

I have to head to work, so I can only help with the centering part and then I will tackle the rest of it when I get home.

To center the entire thing, simply replace this part of the code with this one. You add 'align: center' to the div element.

Code:

<div align="center" class="imgInfo" id="imgOne">

Also, I noticed that is going off the widget cause you made it wider than what you have your columns width at.

Admin Panel -> Modules -> Forum Widgets Management -> Width Column (in pixels)

bump!

@Canis Kingdom Replace your code with this.

Code:

<style type="text/css">
  #staff1 {
    background: url(''); /* image URL for image */
  }
 
 .imgInfo {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0px;
    border: 1px solid #fff;
  }
 
  .imgInfo a {
    margin: 5% 0;
    text-align: center;
    background: #2E2E2E; /* background color */
    height: 40px;
    width: calc(100% - 10px);
    padding: 5px;
    font-family: Georgia, serif; /* text font */
    opacity: 0;
    display: block;
    color: #fff !important; /* color of the font */
    text-decoration: none;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
 
  .imgInfo:hover a {
    opacity:0.75;
    font-size: 16px; /* size of the font */
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -htm-transition: 30ms;
    -webkit-transition: 300ms;
  }
</style>
<div class="imgInfo" id="staff1">
  <a target="_blank" href="/link">Elite Cerawin<br />Administrator</a>
</div>

If you plan on adding more than one staff member then I advise copying this:

Code:

<div class="imgInfo" id="staff1">
  <a target="_blank" href="/link">Elite Cerawin<br />Administrator</a>
</div>

But replacing

Code: staff1

with

Code: staff2

and adding this style between the

Code: <style>

tags.

Code:

#staff2 { background: url(''); } /* Second staff member background image */

To reduce the width of the image and overlapping to the Categories, you must do what's explain below:

Everything seems to be working correctly. All you have to do is replace this code:

Code:

.imgInfo {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0px;
    border: 1px solid #fff;
  }

With this:

Code:

.imgInfo {
    height: 120px;
    padding: 0px;
    width: 177px;
    border: 1px solid #fff;
}