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.

User rank style on topics/posts

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Solved User rank style on topics/posts

Post by George Abdo on May 22nd 2016, 3:24 pm

hi can someone tell me how can i make my forum ranks appear like this in posts/topics ?
http://i.imgur.com/bu6JDyz.png
like in that image

i see it here http://alphaknightacademy.forumotion.com/t470-the-dankspacular-signatures-contest#7201


Last edited by George Abdo on May 29th 2016, 12:11 am; edited 1 time in total

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Luffy on May 22nd 2016, 3:39 pm

Hello @George Abdo,

Go to your CSS and add this code: Admin Panel > Display > Pics and Colors > Colors > CSS Stylesheet
Code:
.postprofile dt + dd {
    color: #FFF;
    font-weight: bold;
    background: #C16565;
    border: 1px solid #AD0000;
    border-radius: 0 0 3px 3px;
    position: relative;
    margin: 3px -10px;
    padding: 3px;
    text-shadow: 1px 1px 0px #000;
    font-size: 12px;
}
.postprofile dt + dd:before {
    border-radius: 4px 0 0 0;
    left: -1px;
}
.postprofile dt + dd:after {
    border-radius: 0 4px 0 0;
    right: -1px;
}
.postprofile dt + dd:before, .postprofile dt + dd:after {
    content: ".";
    font-size: 0;
    background: #9E3E3E;
    display: block;
    position: absolute;
    top: -6px;
    height: 6px;
    width: 6px;
}
Click save and you should have what you wanted! Smile






Luffy
Manager
Manager

Male Posts : 4252
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 22nd 2016, 4:08 pm

i am not around a computer atm i will try it soon! thank you luffy i will let you know if it work or not

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Luffy on May 22nd 2016, 4:11 pm

@George Abdo wrote:i am not around a computer atm i will try it soon! thank you luffy i will let you know if it work or not
Sure thing!






Luffy
Manager
Manager

Male Posts : 4252
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 22nd 2016, 4:18 pm

i forget to say i want it each rank to have color of the group the member is in how can i do that?

thank you alot!

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Rhino.Freak on May 22nd 2016, 5:07 pm

Just style the rank title itself.
Name the rank:
Code:
<span style="color: red;">Admin</span>

Rhino.Freak
Helper
Helper

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

http://freetest.forumotion.net/

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 22nd 2016, 11:08 pm

@Luffy i try your code it doesnt work can you please help me? this is the topic http://montadasy.arab.st/t1-your-first-subject

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Luffy on May 22nd 2016, 11:16 pm

Have you added what @Rhino.Freak said to you about the rank? Because we'll be needing that since you have a PunBB forum. I am so sorry i didn't see that before.. Think






Luffy
Manager
Manager

Male Posts : 4252
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 22nd 2016, 11:23 pm

i turned it to phpbb2 i want my forum to be phpbb2 and have that style for rank sorry if i caused you confusion

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Luffy on May 22nd 2016, 11:28 pm

No no you haven't, it's just that the code you found it's easier to implement for phpbb3 but it could be done for punbb also. All you had to do and for the color of the rank you'll have to do what Rhino said to all versions, and that way it's easier to grab that rank "coding" wise.

Anyway, you'll again have to do what Rhino said in order to give you the code for phpbb2 now. Smile






Luffy
Manager
Manager

Male Posts : 4252
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 23rd 2016, 12:11 am

i tried what rhino said its not working what i want is for my ranks to look like this
http://i.imgur.com/DG7Tn82.png
and the text in the middle color be black and it will have the rank name as it's shown in the image it says "Member" and the color of the shape is the group color that the member is in how can i do that please?
example look here http://alphaknightacademy.forumotion.com/t473-i-would-like-to-be-tested#7221

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 23rd 2016, 3:07 pm

@Luffy its not working Sad

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Luffy on May 23rd 2016, 5:48 pm

I am not really sure how to do that based on the rank they are in.. I can help you do it a simple color and the name of the rank to change color as a text only. Sorry.






Luffy
Manager
Manager

Male Posts : 4252
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 23rd 2016, 8:50 pm

its ok thank you for try anyone else can please help?

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 24th 2016, 3:18 am

up

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by SLGray on May 24th 2016, 3:58 am

@George Abdo wrote:its ok thank you for try anyone else can please help?

@George Abdo wrote:up
Please don't double post. Your post needs to be separated by at least 24 hours before bumping. Please use the edit button instead!


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


SLGray
Administrator
Administrator

Male Posts : 36735
Reputation : 2446
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Rhino.Freak on May 24th 2016, 6:39 am

Okay try this. Follow the steps carefully.

Step 1: Replace ALL your current rank titles by this.
Code:
<span class="rank-title">CURRENT RANK TITLE</span>
Replace CURRENT RANK TITLE with Member, for a member rank and so on.

Step 2: Go to Admin Panel > Display > Colors > CSS Stylesheet
And paste the following code and hit save.
Code:
.rank-title {
    display: block;
    color: black;
    background: red;
    margin: 0px -10px;
    padding: 4px;
    text-align: center;
    position: relative;
}
.rank-title:before, .rank-title:after {
    background-color: red;
    content: "";
    display: block;
    height: 34px;
    position: absolute;
    text-align: center;
    top: -6px;
    width: 6px;
}
.rank-title:before {
    border-radius: 5px 0 0 5px;
    left: -6px;
}
.rank-title:after {
    border-radius: 0 5px 5px 0;
    right: -6px;
}


Last edited by Rhino.Freak on May 24th 2016, 11:59 am; edited 3 times in total (Reason for editing : Updated Code)

Rhino.Freak
Helper
Helper

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

http://freetest.forumotion.net/

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 24th 2016, 10:45 am

@Rhino.Freak wrote:Okay try this. Follow the steps carefully.

Step 1: Replace ALL your current rank titles by this.
Code:
<span class="rank-title">CURRENT RANK TITLE</span>
Replace CURRENT RANK TITLE with Member, for a member rank and so on.

Step 2: Go to Admin Panel > Display > Colors > CSS Stylesheet
And paste the following code and hit save.
Code:
.rank-title {
    color: black;
    background: red;
    margin: 0px -10px;
    padding: 4px;
    text-align: center;
    position: relative;
}
.rank-title:before, .rank-title:after {
    content: ".";
    display: block;
    font-size: 0;
    height: 6px;
    position: absolute;
    text-align: center;
    top: -6px;
    width: 6px;
}
.rank-title:before {
    border-radius: 100% 0 0 0;
    left: -1px;
    text-align: center;
}
.rank-title:after {
    border-radius: 0 100% 0 0;
    right: -1px;
    text-align: center;
}

it almost work Sad it look like this http://i.imgur.com/wsh6i6A.png just a little square i want it to look like this one
http://i.imgur.com/DG7Tn82.png

please and thank you

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Rhino.Freak on May 24th 2016, 11:08 am

I need the link to your forum where you have applied this, so I can debug it. The forum link in your profile does not have this code applied yet.

Rhino.Freak
Helper
Helper

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

http://freetest.forumotion.net/

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 24th 2016, 11:22 am

i applied it then removed it since i see it not like what i want i just put it back http://montadasy.arab.st/ this my forum i put it back now

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Rhino.Freak on May 24th 2016, 11:59 am

I updated my code upwards (http://help.forumotion.com/t147209-user-rank-style-on-topics-posts#1013954)
It works now Smile

Rhino.Freak
Helper
Helper

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

http://freetest.forumotion.net/

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 24th 2016, 1:29 pm

@Rhino.Freak wrote:I updated my code upwards (http://help.forumotion.com/t147209-user-rank-style-on-topics-posts#1013954)
It works now Smile

it look good but how can i make it change color for each different rank? example: i want it white for admin rank and blue for moderator rank
thank you

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Rhino.Freak on May 24th 2016, 1:58 pm

You have to do the following.
Replace rank's title by
Code:
<span class="rank-title admin">Admin</span>
And then add this css:
Code:
.admin {
    color: black !important;
    background: red !important;
}
.admin:before, .admin:after {
    background-color: red !important;
}

Similarly replace admin by mod or whatever and then add the css by replacing the name.


Last edited by Rhino.Freak on May 25th 2016, 8:45 am; edited 1 time in total

Rhino.Freak
Helper
Helper

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

http://freetest.forumotion.net/

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 24th 2016, 9:07 pm

@Rhino.Freak wrote:You have to do the following.
Replace rank's title by
Code:
<span class="rank-title admin">Admin</span>
And then add this css:
Code:
admin {
    color: black !important;
    background: red !important;
}
.admin:before, .admin:after {
    background-color: red !important;
}

Similarly replace admin by mod or whatever and then add the css by replacing the name.

@Rhino.Freak i try it work
http://i.imgur.com/Ejc489g.png
but it is not taking color of group i am in it stays red for all groups please how can i make it change color for each group color?

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by SLGray on May 24th 2016, 9:20 pm

Are you just trying to change the color of the group? If so, just go here: AP > Users & Groups > Groups. Click the modify button for the group you what to change. There is a color changer on the page that loads.


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


SLGray
Administrator
Administrator

Male Posts : 36735
Reputation : 2446
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 24th 2016, 9:50 pm

no what i want is to change the color of this (the red one) http://i.imgur.com/DMIlkGS.png to the color of the group that each user is in depending on his/her rank

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Rhino.Freak on May 25th 2016, 4:08 am

You need to edit the css.
Like I have written background red inside admin just change it to whatever color you want.

Rhino.Freak
Helper
Helper

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

http://freetest.forumotion.net/

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 25th 2016, 8:32 am


George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Solved Re: User rank style on topics/posts

Post by Rhino.Freak on May 25th 2016, 8:46 am

I missed a dot in front of admin.
Updated code in my previous post. Should work now.

Rhino.Freak
Helper
Helper

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

http://freetest.forumotion.net/

Back to top Go down

Solved Re: User rank style on topics/posts

Post by George Abdo on May 25th 2016, 10:37 am

thank you it work now but how can i remove the edge that is on the left side and for later how can i remove the both edges?

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


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