Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] Add simple css and fontawesome userbars for usertitle
#1
Information 
You can simply try something like this for simple fontawesome css userbars for usertitle.

In headerinclude add:

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

in postbit and postbit_classic find:

{$post['usertitle']}


replace with:

<span class="grouptag {$post['usertitle']}">&nbsp; {$post['usertitle']}</span>



In member_profile find:


({$usertitle})<br />



Replace with:

<span class="grouptag {$usertitle}">&nbsp; {$usertitle}</span><br />


In memberlist_user find:

{$user['usertitle']}<br />


And replace with:

<span class="grouptag {$user['usertitle']}">&nbsp; {$user['usertitle']}</span><br />


Add to global.css:



/** Non Gid CSS FA Usertitle Postbit & Profile & Memberlist by Vintagedaddyo **/

.grouptag {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 3px;
    font-family: "FontAwesome";
    font-weight: 600;
}

.grouptag.Administrator:before {
    content: "\f013";
}

.grouptag.Moderator:before {
    content: "\f0e3";
}

.grouptag.Member:before {
    content: "\f007";
}

.grouptag.Administrator {
    border: 1px solid #008000;
    background: #008000;
    color: #ffffff;
}

.grouptag.Moderator {
    background: #CC00CC;
    border: 1px solid #CC00CC;
    color: #ffffff;
}

.grouptag.Member {
    background: #0072BF;
    border: 1px solid #0072BF;
    color: #ffffff;
}


You can then simply modify and expand upon that...


If you want this modified to use "gid" please see  https://community.mybb.com/thread-219795-post-1314599.html#pid1314599 below.


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.


.zip   FA-4.7_include.zip (Size: 562.5 KB / Downloads: 11)
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#2
any examples of what it looks like?
Reply
#3
(09-18-2018, 06:36 AM)AgentTesla Wrote: any examples of what it looks like?

These were done rather quickly as a suggestion / reply for a user via a general support request thread  and was shared there and now here also with the hope that the users will further modify for individual usage needs as I am currently on a mobile phone localhost so I am also limited on current screenshot size. When I get some free time and I am near a computer I will update the simple tutorial with hexidecimal color codes rather than color names for bg and border and perhaps enhance / improve further though they were quickly placed there as color names rather than hex simply to give the user a simple idea of where to start from.


Attached Files Thumbnail(s)
       
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#4
Very good Tutorial Cool

Thank You!
Reply
#5
Hello!

Could you make is possibile to see the userbars on the member profile page?

And finally thanks for this working tutorial.

My thread
Reply
#6
(09-18-2018, 03:09 PM)kbilly Wrote: Hello!

Could you make is possibile to see the userbars on the member profile page?

And finally thanks for this working tutorial.

My thread

 I haven't had the time to test it fully to see if it would need seperate styling  in case of any styling diff needed but when I do get the time I will look at it further, but for now you could try:

In member_profile find:


({$usertitle})<br />



Replace with:

<span class="grouptag {$usertitle}">&nbsp; {$usertitle}</span><br />
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#7
There is a working plugin for that - https://community.mybb.com/mods.php?action=view&pid=652
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#8
(09-18-2018, 07:23 PM)Eldenroot Wrote: There is a working plugin for that - https://community.mybb.com/mods.php?action=view&pid=652

Nice, though without looking at the source code I simply assume that that  plugin is designed for modifying user "groupimage" and or thereafter and not "usertitle" thus not related to this tutorial as this focuses on "usertitle" and not "groupimge"?
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#9
Yes, you are right! Thank you fro this tutorial, good job!
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#10
Ok, well the very same user asked for an example of this previous tutorial but with using "gid" rather that groupname...., so let us modify slightly my previous shared instructions to utilize "gid" for a quick example:



In headerinclude add:

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

For FA5:

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



Add to global.css

/** Gid CSS FA Usertitle Postbit & Profile & Memberlist by Vintagedaddyo **/

.grouptag {
   display: inline-block;
   padding: 3px 5px;
   border-radius: 3px;
   font-family: "FontAwesome";
   font-weight: 600;
}

.grouptag_4:before {
   content: "\f013";
}

.grouptag_6:before {
   content: "\f0e3";
}

.grouptag_3:before {
   content: "\f0e3";
}

.grouptag_2:before {
   content: "\f007";
}

.grouptag_4 {
   border: 1px solid #008000;
   background: #008000;
   color: #ffffff;
}

.grouptag_6 {
   background: #CC00CC;
   border: 1px solid #CC00CC;
   color: #ffffff;
}

.grouptag_3 {
   background: #CC00CC;
   border: 1px solid #CC00CC;
   color: #ffffff;
}

.grouptag_2 {
   background: #0072BF;
   border: 1px solid #0072BF;
   color: #ffffff;
}

For FA5:
/** Gid CSS FA5 Usertitle Postbit & Profile & Memberlist by Vintagedaddyo **/

.grouptag {
   display: inline-block;
   padding: 3px 5px;
   border-radius: 3px;
   font-family: "Font Awesome 5 Free";
   font-weight: 600;
}

.grouptag_4:before {
   content: "\f013";
}

.grouptag_6:before {
   content: "\f0e3";
}

.grouptag_3:before {
   content: "\f0e3";
}

.grouptag_2:before {
   content: "\f007";
}

.grouptag_4 {
   border: 1px solid #008000;
   background: #008000;
   color: #ffffff;
}

.grouptag_6 {
   background: #CC00CC;
   border: 1px solid #CC00CC;
   color: #ffffff;
}

.grouptag_3 {
   background: #CC00CC;
   border: 1px solid #CC00CC;
   color: #ffffff;
}

.grouptag_2 {
   background: #0072BF;
   border: 1px solid #0072BF;
   color: #ffffff;
}



In postbit and postbit_classic find:


{$post['usertitle']}<br />


Replace with:


<span class="grouptag grouptag_{$usergroup['gid']}">&nbsp; {$post['usertitle']}</span><br />


In member_profile find:


({$usertitle})<br />


Replace with:


<span class="grouptag grouptag_{$memprofile['usergroup']}">&nbsp; {$usertitle}</span><br />

In memberlist_user find:

{$user['usertitle']}<br />


And replace with:

<span class="grouptag grouptag_{$usergroup['gid']}">&nbsp; {$user['usertitle']}</span><br />


For reputation page:

Find:
({$usertitle})<br />


Replace with:
<span class="grouptag grouptag_{$user['usergroup']}">&nbsp; {$usertitle}</span><br />


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.


.php   getgroups.php (Size: 400 bytes / Downloads: 13)


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.


.zip   FA-4.7_include.zip (Size: 562.5 KB / Downloads: 7)


Attached Files Thumbnail(s)
           
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)