Latest topics
» Hello everyone this is Adam from France
by Milouze14 Today at 09:49

» Auto-suggest @mentions as You Type
by T.C. Tue 21 Nov 2017, 12:36

» Personal Rank Titles
by T.C. Tue 21 Nov 2017, 12:04

» FM Themes
by SLGray Tue 21 Nov 2017, 01:08

» User - Made Creations
by SLGray Tue 21 Nov 2017, 01:07

» Search box only visible on hover
by SLGray Tue 21 Nov 2017, 00:58

» Browsers & Updates
by SLGray Tue 21 Nov 2017, 00:56

» Change newposts/no new posts/ locked icons
by T.C. Mon 20 Nov 2017, 19:52

» [HELP] About Profile Cover Code
by MaHwOs Sun 19 Nov 2017, 18:54

» bloquer un membre
by berlingo Fri 17 Nov 2017, 18:19

» IconSkouliki Graphics
by skouliki Fri 17 Nov 2017, 03:54

» [IN PROGRESS] Can this code work on pun version
by skouliki Thu 16 Nov 2017, 03:50

» [TUTORIAL] [ALL VERSIONS] Warning before posting
by demon99 Wed 15 Nov 2017, 08:12

» About Add Reply & New Topic button (popup form)
by omarpop23 Mon 13 Nov 2017, 20:31

» Add a login popup for the toolbar
by Ape Sun 12 Nov 2017, 18:41

Recent Tutorials
Top posting users this month
Who is online?
In total there are 8 users online :: 1 Registered, 0 Hidden and 7 Guests :: 2 Bots

Van-Helsing

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Rank CSS

View previous topic View next topic Go down

avatar
Mr_Grande

Title :
New Coder
Gender : Unspecified
Age : 19
Posts : 39
Points : 336
Reputation : 7
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile

PostMr_Grande on Mon 04 Sep 2017, 11:43

How do I make a rank CSS on Forumotion?


Last edited by Mr_Grande on Wed 04 Oct 2017, 15:44; edited 1 time in total
avatar
Mr_Grande

Title :
New Coder
Gender : Unspecified
Age : 19
Posts : 39
Points : 336
Reputation : 7
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile

PostMr_Grande on Mon 04 Sep 2017, 14:42

Is there any Tutorial or anything.
avatar
Mr_Grande

Title :
New Coder
Gender : Unspecified
Age : 19
Posts : 39
Points : 336
Reputation : 7
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile

PostMr_Grande on Wed 06 Sep 2017, 10:18

Still looking
avatar
Valoish
Graphic Designer
Title :
Gender : Female
Age : 21
Posts : 3652
Points : 4781
Reputation : 357
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/Valoishx3

PostValoish on Wed 06 Sep 2017, 14:11

What do you mean by Rank CSS?
Can you show an example of what you mean in a screenshot

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
avatar
Mr_Grande

Title :
New Coder
Gender : Unspecified
Age : 19
Posts : 39
Points : 336
Reputation : 7
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile

PostMr_Grande on Wed 06 Sep 2017, 15:20

I found this http://help.forumotion.com/t138548-css-rank-styling something basically the same thing how do i add it? to the user groups
avatar
Mr_Grande

Title :
New Coder
Gender : Unspecified
Age : 19
Posts : 39
Points : 336
Reputation : 7
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile

PostMr_Grande on Fri 08 Sep 2017, 09:24

Still looking @Valoish I posted a example^
avatar
Harleen
Member
Title :
Canary Cry
Gender : Female
Age : 31
Posts : 23
Points : 505
Reputation : 18
Location : Rio de Janeiro
Language : Portuguese
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://antenadogames.forumeiros.com/

PostHarleen on Wed 27 Sep 2017, 09:34

Hi @Mr_Grande.

Create ranks in the control panel.

Code:
<div class="admin">Administrator</div>

And add the CSS topic, you will get this result:


--------

Life is just a big old game to me
avatar
Mr_Grande

Title :
New Coder
Gender : Unspecified
Age : 19
Posts : 39
Points : 336
Reputation : 7
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile

PostMr_Grande on Wed 27 Sep 2017, 10:33

@Harleen wrote:Hi @Mr_Grande.

Create ranks in the control panel.

Code:
<div class="admin">Administrator</div>

And add the CSS topic, you will get this result:


Thanks so much Smile is there a way of changing the colors for each rank though?
avatar
Harleen
Member
Title :
Canary Cry
Gender : Female
Age : 31
Posts : 23
Points : 505
Reputation : 18
Location : Rio de Janeiro
Language : Portuguese
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://antenadogames.forumeiros.com/

PostHarleen on Mon 02 Oct 2017, 10:35

Yes there is, just follow what was posted in this message:

http://help.forumotion.com/t138548-css-rank-styling#938193

And to change the icon, go to font awesome and after choose the icon, select the unicode, in this case f2bd



I created three, admin, moderator and member... just change the colors...

Code:
.admin {
  background-color: #1381BE;
  border: 1px solid #278EDF !important;
  border-radius: 3px !important;
  box-shadow: 0 0 1px #F9F9F9 inset;
  color: #FFFFFF !important;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  padding: 0px 4px;
  vertical-align: middle;
}
.admin:before {
  content: "\f0eb";
  font-family: "FontAwesome";
  margin-right: 5px;
  font-weight: normal;
  font-size: 110%;
}
.mod {
  background-color: #7676F7;
  border: 1px solid #7676F7 !important;
  border-radius: 3px !important;
  box-shadow: 0 0 1px #F9F9F9 inset;
  color: #FFFFFF !important;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  padding: 0px 4px;
  vertical-align: middle;
}
.mod:before {
  content: "\f069";
  font-family: "FontAwesome";
  margin-right: 5px;
  font-weight: normal;
  font-size: 110%;
}
.member {
  background-color: #43AEE0;
  border: 1px solid #43AEE0 !important;
  border-radius: 3px !important;
  box-shadow: 0 0 1px #F9F9F9 inset;
  color: #FFFFFF !important;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  padding: 0px 4px;
  vertical-align: middle;
}
.member:before {
  content: "\f2bd";
  font-family: "FontAwesome";
  margin-right: 5px;
  font-weight: normal;
  font-size: 110%;
}

--------

Life is just a big old game to me
avatar
Mr_Grande

Title :
New Coder
Gender : Unspecified
Age : 19
Posts : 39
Points : 336
Reputation : 7
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile

PostMr_Grande on Wed 04 Oct 2017, 15:43

@Harleen wrote:Yes there is, just follow what was posted in this message:

http://help.forumotion.com/t138548-css-rank-styling#938193

And to change the icon, go to font awesome and after choose the icon, select the unicode, in this case f2bd



I created three, admin, moderator and member... just change the colors...

Code:
.admin {
  background-color: #1381BE;
  border: 1px solid #278EDF !important;
  border-radius: 3px !important;
  box-shadow: 0 0 1px #F9F9F9 inset;
  color: #FFFFFF !important;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  padding: 0px 4px;
  vertical-align: middle;
}
.admin:before {
  content: "\f0eb";
  font-family: "FontAwesome";
  margin-right: 5px;
  font-weight: normal;
  font-size: 110%;
}
.mod {
  background-color: #7676F7;
  border: 1px solid #7676F7 !important;
  border-radius: 3px !important;
  box-shadow: 0 0 1px #F9F9F9 inset;
  color: #FFFFFF !important;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  padding: 0px 4px;
  vertical-align: middle;
}
.mod:before {
  content: "\f069";
  font-family: "FontAwesome";
  margin-right: 5px;
  font-weight: normal;
  font-size: 110%;
}
.member {
  background-color: #43AEE0;
  border: 1px solid #43AEE0 !important;
  border-radius: 3px !important;
  box-shadow: 0 0 1px #F9F9F9 inset;
  color: #FFFFFF !important;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  padding: 0px 4px;
  vertical-align: middle;
}
.member:before {
  content: "\f2bd";
  font-family: "FontAwesome";
  margin-right: 5px;
  font-weight: normal;
  font-size: 110%;
}



Thanks so much marking this as Solved

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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