Jump to the post that solved this thread.
Solved: 1 Year, 10 Months ago Customise username style using Fontawesome?
#1
Solved: 1 Year, 10 Months ago
Hello!

Currently i'm using the following string to customise the username style on my forum.


<img src="images/moderator.png" alt="mod" align="center" valign="center" style="vertical-align:top;"><span style="font-weight:bold;color:#CC00CC; background: transparent url(E.gif);">{username}</span>


What i would like to do is,to replace that image,which is currently in my forum's directory to some fontawesome icon or animated icon.

I would like to know if there is some possibilty to add fontawesome icons for styling the username?

I tried adding it like this:


<i class="fas fa-spinner fa-spin"></i>{username}<

It works but how to change it's colour ecc?

Thankyou in advance.
Reply
#2
Solved: 1 Year, 10 Months ago
you can either put

<i class="fas fa-spinner fa-spin" style="color: red"></i>

or

<i class="fas fa-spinner fa-spin red-icon"></i>

then add to css:

.red-icon { color: red }
What goes around comes around
Reply
#3
Solved: 1 Year, 10 Months ago
Thanks a lot for your explaination.

It worked.
Reply
#4
Solved: 1 Year, 10 Months ago
You could try this....

Gid FA Username Icon Postbit & Profile & Memberlist


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">

Add to global.css

FA 4.7:

/** Gid FA 4.7 Username Icon Postbit & Profile & Memberlist by Vintagedaddyo **/

.titletag {
   display: inline-block;
   font-family: "FontAwesome";
   font-weight: 600;
}

.titletag_4:before {
   content: "\f013";
   color: #008000;
}

.titletag_6:before {
   content: "\f0e3";
   color: #CC00CC;
}

.titletag_3:before {
   content: "\f0e3";
   color: #CC00CC;
}

.titletag_2:before {
   content: "\f007";
   color: #0072BF;
}


/** Gid FA 5 Username Icon Postbit & Profile & Memberlist by Vintagedaddyo **/

.titletag {
   display: inline-block;
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
}

.titletag_4:before {
   content: "\f013";
   color: #008000;
}

.titletag_6:before {
   content: "\f0e3";
   color: #CC00CC;
}

.titletag_3:before {
   content: "\f0e3";
   color: #CC00CC;
}

.titletag_2:before {
   content: "\f007";
   color: #0072BF;
}



In postbit and postbit_classic find:


<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />


Replace with:


<span class="titletag titletag_{$usergroup['gid']}">&nbsp;</span><strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />


In member_profile find:


<span class="largetext"><strong>{$formattedname}</strong></span><br />


Replace with:


<span class="titletag titletag_{$memprofile['usergroup']}">&nbsp;</span><span class="largetext"><strong>{$formattedname}</strong></span><br />

In memberlist_user find:

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


And replace with:

<span class="titletag titletag_{$usergroup['gid']}">&nbsp;</span>{$user['profilelink']}<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.

Update: another user here https://community.mybb.com/thread-226039...pid1341637 asked if this can be also used on the index whosonline and the answer is yes

In index_whosonline_memberbit template find:

{$user['profilelink']}{$invisiblemark}

Replace with:
<span class="titletag titletag_{$user['usergroup']}">&nbsp;</span>{$user['profilelink']}{$invisiblemark}


Attached Files
.php   getgroups.php (Size: 400 bytes / Downloads: 21)
Reply
#5
Solved: 1 Year, 10 Months ago
Thanks a lot for your time!
Reply
#6
Solved: 1 Year, 10 Months ago
(2018-10-06, 08:00 PM)kbilly Wrote: Thanks a lot for your time!

No worries. Glad to help.
Reply
Jump to the post that solved this thread.


Forum Jump:


Users browsing this thread: 1 Guest(s)