MyBB Community Forums

(2018-10-04, 11:34 AM)Serpius Wrote: [ -> ]

(2018-10-04, 02:07 AM)vintagedaddyo Wrote: [ -> ]

(2018-10-04, 01:32 AM)Serpius Wrote: [ -> ]

(2018-09-28, 05:07 PM)vintagedaddyo Wrote: [ -> ]For those having trouble linking FA for whatever reason, have you tried adding FA internally?

For example to add the 4.7 library attached below you would add this to your headerinclude:

<link rel="stylesheet" href="{$mybb->asset_url}/fontawesome/css/font-awesome.min.css">

And then uploading the FA library to your forum directory. Below you will find a zip file of the FA 4.7 library that you can add internally.

What about the FA 5 library? Is that readily available? (I meant the free version, not the paid version)

It is available but I have yet to strip down the dist pkg to make it small enough for theme include as the dist pkg is roughly around 9 gb extraction on initial download from font awesome site. https://use.fontawesome.com/releases/v5.....1-web.zip

9 GB?? Yikes!! Pretty big!

When you make the "light-weight" version of FA 5, can you post the download link in this thread or make it available in the Extend section?

Yeah the dist pkg is actually 12 gb..., but almost most of the pkg is not needed for theme include...
A stripped down version for theme internal include is attached below.

To include internally in themes add this to headerinclude:

<link rel="stylesheet" href="{$mybb->asset_url}/fontawesome5/css/all.css">

[attachment=40951]

UPDATE: FA v 5.63 pkg trimmed for MyBB theme include: http://s000.tinyupload.com/index.php?fil...9123833992

Still waiting for the tutorial where you can color the icons based on usergroup!

(2018-10-04, 10:40 PM)Mattaffix Wrote: [ -> ]Still waiting for the tutorial where you can color the icons based on usergroup!

Gid color usergroup star rating - FontAwesome



For Font Awesome 4.7 :

In headerinclude add:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

For Font Awesome 5:

In headerinclude add:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

In posbit and postbit_classic find:

{$post['userstars']} 

Replace with:

<span style="text-align: center;" class="userstar star_{$post['stars']} stargroup_{$usergroup['gid']}" title="{$post['usertitle']}"></span>

In memberlist_user find:

{$user['userstars']} 

Replace with:

<span style="text-align: center;" class="userstar star_{$user['stars']} stargroup_{$usergroup['gid']}" title="{$user['usertitle']}"></span>

In member_ profile find:

{$userstars} 

Replace with:

<span style="text-align: center;" class="userstar star_{$stars} stargroup_{$memprofile['usergroup']}" title="{$usertitle}"></span> 

For Font Awesome 4.7:

Add to global.css:

/** Gid Color Usergroup star rating - FontAwesome 4.7 **/

.userstar {
    font-family: "FontAwesome";
    font-size: 13px;
    color: #D5CA3C;
    line-height: 13px;
    display: inline-block;
    letter-spacing: 2px;
}

.star_0:before {
    content: "\f006\f006\f006\f006\f006\f006\f006";
}

.star_1:before {
    content: "\f005\f006\f006\f006\f006\f006\f006";
}

.star_2:before {
    content: "\f005\f005\f006\f006\f006\f006\f006";
}

.star_3:before {
    content: "\f005\f005\f005\f006\f006\f006\f006";
}

.star_4:before {
    content: "\f005\f005\f005\f005\f006\f006\f006";
}

.star_5:before {
    content: "\f005\f005\f005\f005\f005\f006\f006";
}

.star_6:before {
    content: "\f005\f005\f005\f005\f005\f005\f006";
} 

.star_7:before {
    content: "\f005\f005\f005\f005\f005\f005\f005";
} 

.stargroup_4 {
  color: #008000 !important;
}

.stargroup_6 {
  color: #CC00CC !important;
}

.stargroup_3 {
  color: #CC00CC !important;
}

.stargroup_2 {
  color: #0072BF !important;
}

For Font Awesome 5:


Add to global.css:

/** Gid Color Usergroup star rating - FontAwesome 5 **/

.userstar {
   font-family: "Font Awesome 5 Free";
   font-size: 13px;
   color: #D5CA3C;
   line-height: 13px;
   display: inline-block;
   letter-spacing: 2px;
   font-weight: 900;
}

.star_0:before {
   content: "\f005\f005\f005\f005\f005\f005\f005";
   font-weight: 400;
}

.star_1:before {
   content: "\f005";
}

.star_1:after {
   content: "\f005\f005\f005\f005\f005\f005";
   font-weight: 400;
}

.star_2:before {
   content: "\f005\f005";
}

.star_2:after {
   content: "\f005\f005\f005\f005\f005";
   font-weight: 400;
}

.star_3:before {
   content: "\f005\f005\f005";
}

.star_3:after {
   content: "\f005\f005\f005\f005";
   font-weight: 400;
}

.star_4:before {
   content: "\f005\f005\f005\f005";
}

.star_4:after {
   content: "\f005\f005\f005";
   font-weight: 400;
}

.star_5:before {
   content: "\f005\f005\f005\f005\f005";
}

.star_5:after {
   content: "\f005\f005";
   font-weight: 400;
}

.star_6:before {
   content: "\f005\f005\f005\f005\f005\f005";
}

.star_6:after {
   content: "\f005";
   font-weight: 400;
}

.star_7:before {
   content: "\f005\f005\f005\f005\f005\f005\f005";
}


.stargroup_4 {
  color: #008000 !important;
}

.stargroup_6 {
  color: #CC00CC !important;
}

.stargroup_3 {
  color: #CC00CC !important;
}

.stargroup_2 {
  color: #0072BF !important;
}

Now, you can keep adding to this by adding additional "gids" to the css.

MyBB default "gids" are:

 [ 1 ] _ Guests
 [ 2 ] _ Registered
 [ 3 ] _ Super Moderators
 [ 4 ] _ Administrators
 [ 5 ] _ Awaiting Activation
 [ 6 ] _ Moderators
 [ 7 ] _ Banned

And same can be done by further adding your non default "gids" to the css.

If you are having a hard time figuring out all your gids you can download getgroups.php attached below and upload it to your forum root directory and visit it by "forum/getgroups.php" and it will display all of your currrent gids by number and name.

I just tested it and it's working just perfect! Thanks again and good job on those awesome tutorials!

http://prntscr.com/l2bzwx

(2018-10-04, 11:57 PM)Mattaffix Wrote: [ -> ]I just tested it and it's working just perfect! Thanks again and good job on those awesome tutorials!

http://prntscr.com/l2bzwx

Cool beans, glad I finally got the time to get to it and that you enjoyed it. Now if you want to say have the background stars a different color than the foreground colors

change your css for font awesome 5 to:

/** Gid Color Usergroup star rating - FontAwesome 5 **/

.userstar:before {
   font-family: "Font Awesome 5 Free";
   font-size: 13px;
   color: #D5CA3C;
   line-height: 13px;
   display: inline-block;
   letter-spacing: 2px;
   font-weight: 900;
}

.userstar:after {
   font-family: "Font Awesome 5 Free";
   font-size: 13px;
   color: #CCCCCC;
   line-height: 13px;
   display: inline-block;
   letter-spacing: 2px;
   font-weight: 900;
}

.star_0:before {
   content: "\f005\f005\f005\f005\f005\f005\f005";
   font-weight: 400;
}

.star_1:before {
   content: "\f005";
}

.star_1:after {
   content: "\f005\f005\f005\f005\f005\f005";
   font-weight: 400;
}

.star_2:before {
   content: "\f005\f005";
}

.star_2:after {
   content: "\f005\f005\f005\f005\f005";
   font-weight: 400;
}

.star_3:before {
   content: "\f005\f005\f005";
}

.star_3:after {
   content: "\f005\f005\f005\f005";
   font-weight: 400;
}

.star_4:before {
   content: "\f005\f005\f005\f005";
}

.star_4:after {
   content: "\f005\f005\f005";
   font-weight: 400;
}

.star_5:before {
   content: "\f005\f005\f005\f005\f005";
}

.star_5:after {
   content: "\f005\f005";
   font-weight: 400;
}

.star_6:before {
   content: "\f005\f005\f005\f005\f005\f005";
}

.star_6:after {
   content: "\f005";
   font-weight: 400;
}

.star_7:before {
   content: "\f005\f005\f005\f005\f005\f005\f005";
}

.stargroup_4:before {
  color: #008000 !important;
}

.stargroup_6:before {
  color: #CC00CC !important;
}

.stargroup_3:before {
  color: #CC00CC !important;
}

.stargroup_2:before {
  color: #0072BF !important;
}

.stargroup_4:after {
  color: #CCCCCC !important;
}

.stargroup_6:after {
  color: #CCCCCC !important;
}

.stargroup_3:after {
  color: #CCCCCC !important;
}

.stargroup_2:after {
  color: #CCCCCC !important;
}

That could work out fine for the default user titles based on posts, hehe!

You should make a library with font awesome tutorials and maybe update the one to replace rathing stars to FA stars.