The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Please Help Me Toggle My Staff List

4 posters

Go down

In progress Please Help Me Toggle My Staff List

Post by Canis Kingdom October 25th 2016, 2:41 am

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
Canis Kingdom
Canis Kingdom
New Member

Female Posts : 15
Reputation : 1
Language : English
Location : USA

http://caniskingdom.forumotion.com/forum

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Draxion October 25th 2016, 3:32 am

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Canis Kingdom October 25th 2016, 4:25 am

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!
Canis Kingdom
Canis Kingdom
New Member

Female Posts : 15
Reputation : 1
Language : English
Location : USA

http://caniskingdom.forumotion.com/forum

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Draxion October 25th 2016, 6:45 am

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. Smile
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Canis Kingdom October 26th 2016, 3:55 am

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

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!!
Canis Kingdom
Canis Kingdom
New Member

Female Posts : 15
Reputation : 1
Language : English
Location : USA

http://caniskingdom.forumotion.com/forum

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Draxion October 26th 2016, 6:57 pm

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

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Canis Kingdom October 27th 2016, 12:29 am

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

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!
Canis Kingdom
Canis Kingdom
New Member

Female Posts : 15
Reputation : 1
Language : English
Location : USA

http://caniskingdom.forumotion.com/forum

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Draxion October 27th 2016, 6:45 am

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.
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Ace 1 October 27th 2016, 12:54 pm

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>
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Draxion October 27th 2016, 4:34 pm

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

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Ace 1 October 27th 2016, 5:13 pm

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

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Canis Kingdom October 28th 2016, 6:14 am

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! Sad It worked earlier..
Canis Kingdom
Canis Kingdom
New Member

Female Posts : 15
Reputation : 1
Language : English
Location : USA

http://caniskingdom.forumotion.com/forum

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Draxion October 28th 2016, 6:39 am

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Canis Kingdom November 1st 2016, 8:11 pm

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>
Canis Kingdom
Canis Kingdom
New Member

Female Posts : 15
Reputation : 1
Language : English
Location : USA

http://caniskingdom.forumotion.com/forum

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Draxion November 1st 2016, 8:13 pm

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Canis Kingdom November 1st 2016, 8:35 pm

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.

Please Help Me Toggle My Staff List Large_10

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.
Canis Kingdom
Canis Kingdom
New Member

Female Posts : 15
Reputation : 1
Language : English
Location : USA

http://caniskingdom.forumotion.com/forum

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Draxion November 1st 2016, 8:40 pm

Not a problem at all. I enjoy helping others. Smile

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Canis Kingdom November 1st 2016, 10:46 pm

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

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 Sad
Please Help Me Toggle My Staff List Screen10

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

Female Posts : 15
Reputation : 1
Language : English
Location : USA

http://caniskingdom.forumotion.com/forum

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Draxion November 1st 2016, 11:05 pm

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)
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Canis Kingdom November 6th 2016, 6:05 am

bump!
Canis Kingdom
Canis Kingdom
New Member

Female Posts : 15
Reputation : 1
Language : English
Location : USA

http://caniskingdom.forumotion.com/forum

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Ace 1 November 21st 2016, 3:58 pm

@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 */
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

In progress Re: Please Help Me Toggle My Staff List

Post by Sir Chivas™ November 21st 2016, 5:26 pm

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;
}
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6964
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum