The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Badges with profiles

View previous topic View next topic Go down

Solved Badges with profiles

Post by Mr Rockeye on April 10th 2014, 10:43 pm

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 Smile


Last edited by Mr Rockeye on May 1st 2014, 11:42 am; edited 2 times in total

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Pizza Boi on April 10th 2014, 11:28 pm

Hi Very Happy

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 Smile . Just change those to your liking~

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 11th 2014, 2:18 pm

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?

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Jophy on April 11th 2014, 2:53 pm

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.

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 12th 2014, 1:28 pm

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?

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Pizza Boi on April 14th 2014, 4:40 am

Hi Very Happy

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

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 14th 2014, 5:42 pm


Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 16th 2014, 11:05 pm

Bumping since I'm curious to the solution.

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 22nd 2014, 8:42 pm

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

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 25th 2014, 4:46 pm

Bump...

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Pizza Boi on April 25th 2014, 10:51 pm

Hi Very Happy

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

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 25th 2014, 11:46 pm

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'?

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Pizza Boi on April 26th 2014, 4:12 am

Hi Very Happy

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

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 26th 2014, 10:08 am

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

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by SLGray on April 26th 2014, 10:16 am

Dimensions are like this:
Code:
width:  50px;
height: 50px;


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35661
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 27th 2014, 1:23 pm

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.

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Pizza Boi on April 27th 2014, 7:06 pm

Hi Very Happy

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

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 27th 2014, 10:32 pm

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

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Pizza Boi on April 28th 2014, 11:46 am

Hi Very Happy

Can you verify where the badge is here?



Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 29th 2014, 11:27 am

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:

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by APE on April 29th 2014, 2:44 pm

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 Wink





APE
Manager
Manager

Male Posts : 8326
Reputation : 717
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 29th 2014, 2:57 pm

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.

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Ange Tuteur on April 29th 2014, 3:10 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on April 29th 2014, 3:37 pm

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 Smile

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.

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Mr Rockeye on May 1st 2014, 11:16 am

:rose: Solved :rose:

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 Smile

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Badges with profiles

Post by Ange Tuteur on May 1st 2014, 5:22 pm

Thanks for providing the solution.

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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