Please Help Me Toggle My Staff List
4 posters
Page 1 of 1
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 - Toggle >
My Forum
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
Re: Please Help Me Toggle My Staff List
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.. (:
Re: Please Help Me Toggle My Staff List
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!
Re: Please Help Me Toggle My Staff List
So to get the image to be a link, you have to put it like this...
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...
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.
- 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.
Re: Please Help Me Toggle My Staff List
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!!
Re: Please Help Me Toggle My Staff List
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>
Re: Please Help Me Toggle My Staff List
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!
Re: Please Help Me Toggle My Staff List
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.
Can you paste here the exact code you are using in that widget? Cause I spot several errors in the one you provided.
Thanks.
Re: Please Help Me Toggle My Staff List
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>
Re: Please Help Me Toggle My Staff List
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>.
EDIT: Except you are missing the closing tag for the <div>.
Re: Please Help Me Toggle My Staff List
Yeah, I thought that it still could be below line 50 of Canis's screenshot.
Re: Please Help Me Toggle My Staff List
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..
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..
Re: Please Help Me Toggle My Staff List
Can you please do as I requested and paste the code you used directly from the widget so we can fix it properly? Thanks!
Re: Please Help Me Toggle My Staff List
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>
Re: Please Help Me Toggle My Staff List
Do you have the image link?
Or you can do it. Place the image link in between the quotes where it's all capitalized.
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 */
}
Re: Please Help Me Toggle My Staff List
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.
Re: Please Help Me Toggle My Staff List
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.
To resize the image, you just have to edit this part of the code where it says height and width.
And to get it to link to wherever you want it to, you simpy put the link where it says 'LINK GOES HERE'.
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>
Re: Please Help Me Toggle My Staff List
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?
Re: Please Help Me Toggle My Staff List
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.
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)
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)
Re: Please Help Me Toggle My Staff List
@Canis Kingdom Replace your code with this.
If you plan on adding more than one staff member then I advise copying this:
But replacing
with
and adding this style between the
tags.
- 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:
#staff2 { background: url(''); } /* Second staff member background image */
Re: Please Help Me Toggle My Staff List
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:
With this:
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™- Helper
- Posts : 6964
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Similar topics
» How to add a staff list page on your FORUM
» Staff List Help
» Please fix staff list for me
» Forum Staff List.
» Staff list widget problem
» Staff List Help
» Please fix staff list for me
» Forum Staff List.
» Staff list widget problem
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum