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

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

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?

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.

Oh okay.

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?

Hi

Can you provide the exact link to where you found this? Thank you.

Regards,
Pizza Boi

Here is the link:
http://www.smokinelite.com/t78827-daily-competition

Bumping since I'm curious to the solution.

Bumping again since it's been a week...

Bump...

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

Is there something else to put in CSS?
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'?

Hi

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

How do you say in CSS code 'display 50px by 50px from the image'?

Dimensions are like this:

Code:

width:  50px;
height: 50px;

So I tried this code:

Code:

.label~img:nth-of-type(1) {
  background: url('http://i1056.photobucket.com/albums/t379/Mr_Rockeye/Administratorbadge_zpsb74dc6e3.png');
}
.label~img:nth-of-type(1):hover {
  background: url('http://i1056.photobucket.com/albums/t379/Mr_Rockeye/Ex-staff_zpsca081314.png');
}

But nothing happens, when I inspect the element all the code is implied but doesn't work.

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

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

Hi

Can you verify where the badge is here?



Regards,
Pizza Boi

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:

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

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.

Hello Mr Rockeye,

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);
}

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.

 Solved  

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

Thanks for providing the solution.

Topic solved and archived