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.

Name + badge placement

View previous topic View next topic Go down

Solved Name + badge placement

Post by Mr Rockeye on March 25th 2014, 9:07 pm

Hey so I have the question if it's possible to put the Name and rank name above the avatar and the badge that applies to the rank under the avatar.
Also, is it possible to add badges to groups? so you can have multiple badges under your avatar.

Thanks in advance.

P.S. please explain it in detail to me since I'm fairly new to the 'website making' thing and don't understand everything yet.


Last edited by Mr Rockeye on March 27th 2014, 3:44 pm; edited 1 time in total

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Name + badge placement

Post by Pizza Boi on March 26th 2014, 3:12 am

Hi Very Happy

This is the code I came up with in seeing your topic "Update 24/3/14" and I did not see any 'badges' or whatever it is concerned with it.

I tried generalizing the code to every user so please try this:

Code:
dl > dt > strong > a > span, dl > dd:nth-child(2) {
position: relative;
bottom: 100px;
}
dl > dt > a > img {
position: relative;
top: 30px;
}

dl > dd:nth-child(4), dl > dd:nth-child(6) {
position: relative;
top: 15px;
}

The badges as of now, I cannot see them so if you can modify it as view-able for guests, that would be great.

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: Name + badge placement

Post by Ange Tuteur on March 26th 2014, 4:16 am

Hello Mr Rockeye,

I had written some CSS for this a few months back to place the rank and name above the ava. You can add it to your CSS :
Administration panel > dispay > colors > CSS stylesheet
Code:
.postprofile, .postprofile dt { position:relative; }

/* margin above avatar for rank and name */
.postprofile dl dt img {
margin-top:55px;
/* negate margin from fallback */
margin-bottom:-15px;
}

/* fallback for users without avatars */
.postprofile dt+dd+dd+dd { margin-top:15px; }

/* username */
.postprofile dl dt br + strong {
position:absolute;
top:0px;
right:0px;
left:0px;
}

/* rank */
.postprofile dl dt + dd {
position:absolute;
top:15px;
right:0px;
left:0px;
}

Depending on the type of ranks you use, simply edit the 55px in this rule :
Code:
.postprofile dl dt img {
margin-top:55px;
/* negate margin from fallback */
margin-bottom:-15px;
}

Pizza boi,

For your CSS, users without avas result in the following :


You can instead relatively position the parent(postprofile) and absolutely position the element you want to move. This restricts the absolutely positioned child element to the range of the relatively positioned parent. Note : when an element is position:absolute it takes up no space in the DOM; because of this you need to make space for it with either padding, or margin.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Name + badge placement

Post by Pizza Boi on March 26th 2014, 4:32 am

@Ange Tuteur wrote:Hello Mr Rockeye,

I had written some CSS for this a few months back to place the rank and name above the ava. You can add it to your CSS :
Administration panel > dispay > colors > CSS stylesheet
Code:
.postprofile, .postprofile dt { position:relative; }

/* margin above avatar for rank and name */
.postprofile dl dt img {
margin-top:55px;
/* negate margin from fallback */
margin-bottom:-15px;
}

/* fallback for users without avatars */
.postprofile dt+dd+dd+dd { margin-top:15px; }

/* username */
.postprofile dl dt br + strong {
position:absolute;
top:0px;
right:0px;
left:0px;
}

/* rank */
.postprofile dl dt + dd {
position:absolute;
top:15px;
right:0px;
left:0px;
}

Depending on the type of ranks you use, simply edit the 55px in this rule :
Code:
.postprofile dl dt img {
margin-top:55px;
/* negate margin from fallback */
margin-bottom:-15px;
}

Pizza boi,

For your CSS, users without avas result in the following :


You can instead relatively position the parent(postprofile) and absolutely position the element you want to move. This restricts the absolutely positioned child element to the range of the relatively positioned parent. Note : when an element is position:absolute it takes up no space in the DOM; because of this you need to make space for it with either padding, or margin.

Hi Very Happy

Oh right, thanks for correcting me Smile .

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: Name + badge placement

Post by Mr Rockeye on March 26th 2014, 5:06 pm

Thanks for the name and rank placing a lotVery Happy, now I finally know what that CSS is what all the sites are talking about Smile.
I still have one question, is it possible to put badges on groups?
Or if not possible to put the rank badge below the avatar and the name of it above the avatar?

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Name + badge placement

Post by Rhino.Freak on March 26th 2014, 5:30 pm

What do you mean by badges on groups? Image in front of group name in legend or whole replacement of text to an image in legend?

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Name + badge placement

Post by Mr Rockeye on March 26th 2014, 5:48 pm

I mean that if you are part of a particular group you will have a badge under your avatar if your post is placed. Not the badges in the legend.

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Name + badge placement

Post by Ange Tuteur on March 27th 2014, 5:40 am

Please read this tuto :
http://help.forumotion.com/t131443-#881088

It will explain how to customize members of a certain groupe.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Name + badge placement

Post by Mr Rockeye on March 27th 2014, 2:47 pm

I already used that tutorial, but the question is how to add badges to people if they are part of the group.
With badges I mean alike the rank badges but than for groups and underneath their name.
Also with that tutorial is there a way to let the system instantly add a badge to a person if they become part of the group? I've added them but I've still got to put the icons in front of each person by specification.

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Name + badge placement

Post by Rhino.Freak on March 27th 2014, 2:53 pm

There's no system, you have to add ranks n badges manually Smile

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Name + badge placement

Post by Mr Rockeye on March 27th 2014, 3:43 pm

I've found what I've been searching for:http://help.forumotion.com/t68403-award-system
Solved Smile

Mr Rockeye
Forumember

Posts : 86
Reputation : 1
Language : English

http://www.unitedcommunity.tk

Back to top Go down

Solved Re: Name + badge placement

Post by Ange Tuteur on March 27th 2014, 4:32 pm

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
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