Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28
» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15
» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11
» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24
» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58
» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50
» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22
» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12
» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10
» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51
» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11
» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19
» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28
» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15
» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11
» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24
» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58
» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50
» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22
» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12
» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10
» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51
» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11
» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19
» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34
Recent Tutorials
Top posting users this month
Top Achievers
Who is online?
In total there are 23 users online :: 0 Registered, 0 Hidden and 23 Guests :: 1 Bot
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
Rank CSS
Page 1 of 1 • Share
- Mr_Grande
- Gender :
Age : 26
Posts : 42
Points : 2898
Reputation : 9
Language : English
Browser : Forum Version :
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
- Mr_Grande
- Gender :
Age : 26
Posts : 42
Points : 2898
Reputation : 9
Language : English
Browser : Forum Version :
Is there any Tutorial or anything.
- Mr_Grande
- Gender :
Age : 26
Posts : 42
Points : 2898
Reputation : 9
Language : English
Browser : Forum Version :
Still looking
- Mr_Grande
- Gender :
Age : 26
Posts : 42
Points : 2898
Reputation : 9
Language : English
Browser : Forum Version :
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
- Mr_Grande
- Gender :
Age : 26
Posts : 42
Points : 2898
Reputation : 9
Language : English
Browser : Forum Version :
Still looking @Valoish I posted a example^
Hi @Mr_Grande.
Create ranks in the control panel.
And add the CSS topic, you will get this result:
Create ranks in the control panel.
- Code:
<div class="admin">Administrator</div>
And add the CSS topic, you will get this result:
- Mr_Grande
- Gender :
Age : 26
Posts : 42
Points : 2898
Reputation : 9
Language : English
Browser : Forum Version :
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 is there a way of changing the colors for each rank though?
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...
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%;
}
- Mr_Grande
- Gender :
Age : 26
Posts : 42
Points : 2898
Reputation : 9
Language : English
Browser : Forum Version :
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
- Sponsored content
Similar topics
Create an account or log in to leave a reply
You need to be a member in order to leave a reply.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum