CSS Rank Styling

Technical Details

Forum version : PunBB
Position : Founder
Concerned browser(s) : Google Chrome
Screenshot of problem :

View image:

Who the problem concerns : All members
When the problem appeared : Just as I saved the code and refreshed the page.
Forum link : http://www.adminvortex.com

Description of problem

I have recently entered some code to my CSS to style my ranks but the issue is I don't know how to change the color to the color I am wanting which is the same orange I am using for the group. I am wanting to make specific ranks for each group to match their color. Another issue with this is I am trying to pull icons from "Font Awesome" but they come up as a square and not the icon. I have provided the code for further inspection. The inside of the rank should be darker then the edges as shown in the image, that is perfect but I want the colors to be different for each rank.

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

Sincerely,
James

Hi @Jadster,

For the background color, you'll have to change #3983BA

The border uses a slightly darker color which is #278EDF

and the box-shadow adds a somewhat inset border which is #F9F9F9

You can use http://colorpicker.com to choose colors.


Now to install font awesome, go to Administration Panel > Display > Templates > General > overall_header

Find :

Code:

{CSS}

and paste this after it :

Code:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

Save and publish the template, and you're ready to use font awesome.


For different ranks, you'll want to use a different classname, I'm pretty sure you know how that works, right ? If any questions, let me know.

Thank you @Ange Tuteur!
One last question I have is how do I add a slight space between the avatar box and rank now? If you look here...
http://adminvortex.forumotion.com/t5-few-suggestions

You will see they are touching and I wanted to add a few pixels of space between them and I am not sure what to do about that.

add

Code:

margin-top:10px;

What twisted posted should help you.

If you want to add a margin of space all around the rank, then you can simply use margin.

Code:

margin:3px;

For one specific side you can use :
margin-left
margin-top
margin-right
margin-bottom

Their names should be self explanatory.