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.

CSS Rank Styling

View previous topic View next topic Go down

CSS Rank Styling

Post by Jadster on January 24th 2015, 8:54 pm

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

Jadster
Forumember

Male Posts : 659
Reputation : 78
Language : English
Location : United States

http://adminvortex.forumotion.com

Back to top Go down

Re: CSS Rank Styling

Post by Ange Tuteur on January 24th 2015, 9:04 pm

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. Smile

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Re: CSS Rank Styling

Post by Jadster on January 24th 2015, 11:30 pm

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.

Jadster
Forumember

Male Posts : 659
Reputation : 78
Language : English
Location : United States

http://adminvortex.forumotion.com

Back to top Go down

Re: CSS Rank Styling

Post by _Twisted_Mods_ on January 24th 2015, 11:43 pm

add


Code:
margin-top:10px;

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: CSS Rank Styling

Post by Ange Tuteur on January 25th 2015, 1:09 am

What twisted posted should help you. Wink

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. Smile

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Re: CSS Rank Styling

Post by _Twisted_Mods_ on February 13th 2015, 2:03 am

Has this request been completed?
If so could you edit your first post and change the post icon to Solved.
Thank you!

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.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