Badges with profiles
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1 • Share •
Badges with profiles
Hey,
So I wanted to place badges at the characters, what works great, but now I'd like to experiment a bit with it.
I added the badges by going to Users & Groups > Profiles and make a profile with a URL attached to it.
I have two questions:
1#
Is there a way, I suspect it will be a java script thing, to have a badge small (when you don't hover over it with your mouse) and than to get it bigger when you do hover over it with your mouse. Kinda like a button, when you don't hover over it it won't change but when you do hover over it it will change color.
2# - Solved
How do you let people of a certain group add badges to their own profiles, so regular members can't put badges at their own profile.
Thanks already
So I wanted to place badges at the characters, what works great, but now I'd like to experiment a bit with it.
I added the badges by going to Users & Groups > Profiles and make a profile with a URL attached to it.
I have two questions:
1#
Is there a way, I suspect it will be a java script thing, to have a badge small (when you don't hover over it with your mouse) and than to get it bigger when you do hover over it with your mouse. Kinda like a button, when you don't hover over it it won't change but when you do hover over it it will change color.
Thanks already

Last edited by Mr Rockeye on May 1st 2014, 11:42 am; edited 2 times in total
Re: Badges with profiles
Hi 
I can only answer #2 since I've been playing with #1 without a good result.
When you're making it as an option in the profile, you can choose whether it would be modifiable for a moderator and a member
. Just change those to your liking~
Regards,
Pizza Boi

I can only answer #2 since I've been playing with #1 without a good result.
When you're making it as an option in the profile, you can choose whether it would be modifiable for a moderator and a member

Regards,
Pizza Boi
Re: Badges with profiles
Yea but I mean that, for example, if you are part of a donators group you'll get the access to put a own made badge under your avatar. The thing is that I don't want them to be able to moderate the forums is that an option?
Re: Badges with profiles
Hello,
Sorry but the option tells that they should be a moderator, the only thing you can do is to create a dummy forum and give that group a moderation right to the dummy forum.
Sorry but the option tells that they should be a moderator, the only thing you can do is to create a dummy forum and give that group a moderation right to the dummy forum.
Jophy- ForumGuru
-
Posts : 17924
Reputation : 835
Language : English
Location : Somewhere
Re: Badges with profiles
Oh okay.
Pizza boi I saw a site where they had the badge fall out thing and this was the CSS code:
Yet I don't know if it might be the right code or if I'm just guessing in the wild.
Maybe it needs some adjustments (I don't know).
Anyone that understands CSS can take a look into it?
Pizza boi I saw a site where they had the badge fall out thing and this was the CSS code:
- Code:
.label~img {position: absolute;clip: rect(0,70px,40px,29px);}
.label~img:nth-of-type(1) {top: 58px;left: -40px;z-index: 199}
.label~img:nth-of-type(1):hover {top:18px}
.label~img:nth-of-type(2) {top: 58px;left: 3px;z-index: 198}
.label~img:nth-of-type(2):hover {top:18px}
.label~img:nth-of-type(3) {top: 58px;left: 46px;z-index: 197}
.label~img:nth-of-type(3):hover {top:18px}
.label~img:nth-of-type(4) {top: 58px;left: 89px;z-index: 196}
.label~img:nth-of-type(4):hover {top:18px}
.label~img:hover {z-index:999;clip: rect(40px,112px,99px,0)}
Yet I don't know if it might be the right code or if I'm just guessing in the wild.
Maybe it needs some adjustments (I don't know).
Anyone that understands CSS can take a look into it?
Re: Badges with profiles
Hi 
Can you provide the exact link to where you found this? Thank you.
Regards,
Pizza Boi

Can you provide the exact link to where you found this? Thank you.
Regards,
Pizza Boi
Re: Badges with profiles
Hi 
Sorry, mate for ignoring this topic for so long as I have been trying to understand it. Anyway, they are using 'nth-child' which is highly inaccurate and change for browser to browser but, if you want, in your profile with the badges, please highlight over it and then click on 'Inspect Element' (Which is a right click function of your profile) and then add a similar type of code to theirs, changing the nth-child value (Automatically for chrome already) .
That's the best you can do, unless someone creates a script which I'm afraid still not capable doing for this type of thing.
Regards,
Pizza Boi

Sorry, mate for ignoring this topic for so long as I have been trying to understand it. Anyway, they are using 'nth-child' which is highly inaccurate and change for browser to browser but, if you want, in your profile with the badges, please highlight over it and then click on 'Inspect Element' (Which is a right click function of your profile) and then add a similar type of code to theirs, changing the nth-child value (Automatically for chrome already) .
That's the best you can do, unless someone creates a script which I'm afraid still not capable doing for this type of thing.
Regards,
Pizza Boi
Re: Badges with profiles
Is there something else to put in CSS?
Something like
And than betwene the { and } some kind of code that says 'only display (X)px by (Y)px from total IMG'?
Something like
- Code:
.postprofile dd + img:hover { }
And than betwene the { and } some kind of code that says 'only display (X)px by (Y)px from total IMG'?
Re: Badges with profiles
Hi 
Hmm... you can try greyscale code or something. You can style it like:
Anything really.
Regards,
Pizza Boi

Hmm... you can try greyscale code or something. You can style it like:
- Code:
.postprofile dd + img:hover {
opacity: 0.5;
background-color: #Color;
padding: #px;
}
Anything really.
Regards,
Pizza Boi
Re: Badges with profiles
Dimensions are like this:
- Code:
width: 50px;
height: 50px;

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

Re: Badges with profiles
So I tried this code:
- Code:
.label~img:nth-of-type(1) {
background: url('http://illiweb.com/fa/pbucket.gif');
}
.label~img:nth-of-type(1):hover {
background: url('http://illiweb.com/fa/pbucket.gif');
}
Re: Badges with profiles
Hi 
I cannot see the awards, please enable guests to see them. You did mean the one in profiles, right? If not, please highlight them in a box so I can understand more.
Regards,
Pizza Boi

I cannot see the awards, please enable guests to see them. You did mean the one in profiles, right? If not, please highlight them in a box so I can understand more.
Regards,
Pizza Boi
Re: Badges with profiles
Yes I mean the once placed by the profiles, you should be able to see them as a guest. The profiles are all enabled for guests+, might it be a browser issue?
I don't know if you have the right site but this is the link:
www.unitedcommunity.topdiscussion.com
I don't know if you have the right site but this is the link:
www.unitedcommunity.topdiscussion.com
Re: Badges with profiles
The badge is the colored thing under his name with the text on it 'veteran'.
Here is an image with a green box surrounding the badge:

Here is an image with a green box surrounding the badge:

Re: Badges with profiles
Guys he means the ranks he wants to hover over not a badge at all.
he wants the rank to be a small size and then when you hover over it it becomes bigger
he wants the rank to be a small size and then when you hover over it it becomes bigger

Re: Badges with profiles
It's not the rank, it's the badge you can have multiple badges.
With ranks you can only have one image at the time.
With ranks you can only have one image at the time.
Re: Badges with profiles
Hello Mr Rockeye,
Are you wanting something like this ?
Display > colors > css stylesheet
Are you wanting something like this ?
Display > colors > css stylesheet
- Code:
.postprofile dd span + img {
-webkit-transition:250ms;
-moz-transition:250ms;
-o-transition:250ms;
transition:250ms;
}
.postprofile dd span + img:hover {
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-ms-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
}
Re: Badges with profiles
Well not exactly, what I mean is if you have a badge and don't hover over it it will show the top part of the image placed as the badge. When you are hovering over it it shows the bottom part of the badge image, with containing the same ratio of the image.
I don't need the image to turn bigger, only to show a particular part of the image.
By the way the code to describe the badge works
Edit:
To clarify I have an image. The image in the blue box should be seen while NOT hovering it.
And the image inside the orange box should be seen when you do hover it.
Does anyone know the CSS code for it? Because I've searched a lot on the internet and couldn't find any.

I don't need the image to turn bigger, only to show a particular part of the image.
By the way the code to describe the badge works

Edit:
To clarify I have an image. The image in the blue box should be seen while NOT hovering it.
And the image inside the orange box should be seen when you do hover it.
Does anyone know the CSS code for it? Because I've searched a lot on the internet and couldn't find any.

Re: Badges with profiles


With this code:
- Code:
.label~img {
position: absolute;
clip: rect(0,70px,40px,29px);
}
.label~img:hover {
clip: rect(40px,100px,90px,0px);
position: absolute;
}
.label~img:nth-of-type(1) {
left: -9px;
top: 191px;
z-index: 199;
}
.label~img:nth-of-type(1):hover {
top: 151px;
left: -9px;
z-index: 199;
}
The .label~img is for all the images in the profiles.
The .label~img:nth-of-type(x) defines the profile image x is the order of the profile image in the image list.
Glad it's finally solved

The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum