MyBB Community Forums

Full Version: Showteam.php Page not display the icon Group (fa-gavel .titletag)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi Community, need some help....  Blush

today i am creating a new group YouTube Influencers but some customice its not correct or I am lost in code...

Showteam.php Page NOT display the icon Group (fa-gavel .titletag) in some groups, for example:

I am used the Gid FA 4.7 in root with Username Icon Postbit & Profile & Memberlist by Vintagedaddyo, my custom setting .titletag on group via Global.CSS

- the group 12 (.titletag_12:before) Display correct
- the gropu 15 (.titletag_15:before) NOT Display correct  Huh ....

i am lost in customice that setting.... any help or feedback are welcome.


That its my Code of Global.css

.titletag_12:before {
    content: "\f0e3";
    color: #2f9c0e;
 }
 
  .titletag_15:before {
    /* content: "\f03d"; */
     content: "\f0e3";
     color: #2f9c0e;
  }

-------

.grouptag12 {
   border: 3px solid #5f9017;
   background: #006600;
   color: #ffcc33;
}

.grouptag15 {
    border: 3px solid #5f9017;
    background: #006600;
    color: #ffcc33;
 }


Result test user:

[Image: customice-titletag-mybb.png]

Thanks in advance for support!

Blush
(2021-03-12, 06:24 PM)DiegoPino Wrote: [ -> ]I am used the Gid FA 4.7 in root with Username Icon Postbit & Profile & Memberlist by Vintagedaddyo, my custom setting .titletag on group via Global.CSS


ok, guick question as it has been a good while since I looked at and or wrote any of these but I assume you were using the old tutorial: [Tutorial] - Gid FA Username Icon Postbit & Profile & Memberlist & Whosoline ? I only ask that as I also see css examples in your snippet from another bit older tutorial that was also gid specific but applied very differently? Also can you provide me source of what tutorial you used as I wrote several similar but different such back then and it would be easier to help you if I knew exactly what one you are working from...., thanks, though part of me is thinking by you snippet and image that you are possibly confusing two different tutorials ie: one that uses titletag and another that uses grouptag as they were different tutorials and implementations and also you can see where my confusion can be is that by your image you are showing me an example of usergroup image by gid/css tutorial which was a completely different tutorial than username icon tutorial not to mention then confusing me further by having grouptag examples in your snippet as that was not part of the titletag tutorial...

anyhoo, I assume what you are asking about now is something that I actually never included in any of those tutorials as far as I can remember, but I might have in a reply, dunno but I assume you mean:

ie:
[Image: Forums-Forum-Team.png]


[Tutorial] - Gid FA Username Icon Postbit & Profile & Memberlist & Whosoline & ShowTeam

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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

Add to global.css

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



for FA 5:

/** 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.

Download:

[attachment=43921]

Gid FA Username Icon Index Whosonline:


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}


Gid FA Username Icon ShowTeam:

Update: another user asked if this can be also used on the showteam and the answer is yes


in showteam_usergroup_user template find:

<a href="{$user['profilelink']}">

add this right before it:

<span class="titletag titletag_{$user['usergroup']}">&nbsp;</span>
(2021-03-12, 09:24 PM)censor_deeznutz Wrote: [ -> ]ok, guick question as it has been a good while since I looked at and or wrote any of these but I assume you were using the old tutorial: [Tutorial] - Gid FA Username Icon Postbit & Profile & Memberlist & Whosoline ? I only ask that as I also see css examples in your snippet from another bit older tutorial that was also gid specific but applied very differently? Also can you provide me source of what tutorial you used as I wrote several similar but different such back then and it would be easier to help you if I knew exactly what one you are working from....,

Thank you for your support
You are right the tutorial I am using thise Gid FA Username Icon Postbit & Profile & Memberlist
customize with  Font Awesome 4.7, the 4.7 files are in root hosting and customize the ---> Ungrouped Templates ---> headerinclude template:

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

that its my code in Global.css
/** 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: #ef6f1c;
}

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

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

.titletag_2:before {
   content: "\f007";
   color: #3366ff;
}

.titletag_12:before {
   content: "\f0e3";
   color: #2f9c0e;
}

 .titletag_15:before {
   /* content: "\f03d"; */
	content: "\f0e3";
    color: #2f9c0e;
 }


Please, check the .CSS Group .titletag_15 NOT display the content: "\f0e3";   Huh

but the  .CSS Group .titletag_12  its ok  Cool

should display the image  (fa-gavelHuh

Anexo: getgroups.php

The new group i created its 15:
[ 15 ] _ YouTube Gaming Influencers

Quote:[ 1 ] _ Guests
[ 2 ] _ Registered
[ 3 ] _ Usuarios Update
[ 4 ] _ Administrators
[ 5 ] _ Awaiting Activation
[ 6 ] _ Moderators
[ 7 ] _ Banned
[ 8 ] _ Teams | Equipos de Futbol
[ 9 ] _ Google Group Bots
[ 10 ] _ Bing Group Bot
[ 11 ] _ Yandex Group Bots
[ 12 ] _ Programador - Winning Eleven & PES -
[ 13 ] _ Facebook Group Bots
[ 14 ] _ Apple Bots
[ 15 ] _ YouTube Gaming Influencers

I'm lost with the code and I don't know why it doesn't show up.
or am I editing another part of the code? Big Grin

THank you  Blush
(2021-03-12, 10:52 PM)DiegoPino Wrote: [ -> ]
(2021-03-12, 09:24 PM)censor_deeznutz Wrote: [ -> ]ok, guick question as it has been a good while since I looked at and or wrote any of these but I assume you were using the old tutorial: [Tutorial] - Gid FA Username Icon Postbit & Profile & Memberlist & Whosoline ? I only ask that as I also see css examples in your snippet from another bit older tutorial that was also gid specific but applied very differently? Also can you provide me source of what tutorial you used as I wrote several similar but different such back then and it would be easier to help you if I knew exactly what one you are working from....,

Thank you for your support
You are right the tutorial I am using thise Gid FA Username Icon Postbit & Profile & Memberlist
customize with  Font Awesome 4.7, the 4.7 files are in root hosting and customize the ---> Ungrouped Templates ---> headerinclude template:

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

that its my code in Global.css
/** 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: #ef6f1c;
}

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

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

.titletag_2:before {
   content: "\f007";
   color: #3366ff;
}

.titletag_12:before {
   content: "\f0e3";
   color: #2f9c0e;
}

 .titletag_15:before {
   /* content: "\f03d"; */
	content: "\f0e3";
    color: #2f9c0e;
 }


Please, check the .CSS Group .titletag_15 NOT display the content: "\f0e3";   Huh

but the  .CSS Group .titletag_12  its ok  Cool

should display the image  (fa-gavelHuh

Anexo: getgroups.php

The new group i created its 15:
[ 15 ] _ YouTube Gaming Influencers

Quote:[ 1 ] _ Guests
[ 2 ] _ Registered
[ 3 ] _ Usuarios Update
[ 4 ] _ Administrators
[ 5 ] _ Awaiting Activation
[ 6 ] _ Moderators
[ 7 ] _ Banned
[ 8 ] _ Teams | Equipos de Futbol
[ 9 ] _ Google Group Bots
[ 10 ] _ Bing Group Bot
[ 11 ] _ Yandex Group Bots
[ 12 ] _ Programador - Winning Eleven & PES -
[ 13 ] _ Facebook Group Bots
[ 14 ] _ Apple Bots
[ 15 ] _ YouTube Gaming Influencers

I'm lost with the code and I don't know why it doesn't show up.
or am I editing another part of the code?  Big Grin

THank you  Blush

hahaha, no worries, ok, well, I just re-created your issue and the icon is displaying fine..., it is the fact that you are mixing other tutorial styling from my tutorials with this that has you thinking it is not displaying when it actually is...

 .titletag_15:before {
   /* content: "\f03d"; */
	content: "\f0e3";
    color: #2f9c0e;
 }

[Image: Forums-Forum-Team-2.png]

notice this most likely copied from provided admin color styling?

    color: #2f9c0e;


Yet you are trying to style these like my usergroup image tutorials  and the styling in your images has an (admin gid color: green) background color of green and then you are trying to apply an (admin gid color: green) icon styling

ie:

[Image: 68747470733a2f2f692e6962622e636f2f4a7066...622e706e67]

note: the text on that green bg is for example:

#C4B237


but you are applying:
    color: #2f9c0e;

to what should have been a purple moderator gavel

ie:

[Image: Forums-Forum-Team-3.png]


or whatever respective color you assign to this particular added staff usergroup,

for example:

instead of the green text you are using that is causing conflict with same color green bg:

ie:

    background: #2f9c0e;
    color: #2f9c0e;

say try for example like the text you have in your image for green background

    color: #C4B237;

thus if not then "as is" the green background hides the fact that the exact same colored gavel is actually there just blended in due to your coloring conflict. Wink
(2021-03-12, 11:14 PM)censor_deeznutz Wrote: [ -> ]hahaha, ok well I just recreated your issue and the icon is displaying fine..., it is the fact that you are mixing other tutorial styling from my tutorials with this that has you thinking it is not displaying when it actually is...

notice this most likely copied from provided admin color styling?

    color: #2f9c0e;


Yet you are trying to style these like my usergroup image tutorials  and the styling in your images has an (admin gid color: green) background color of green and then you are trying to apply an (admin gid color: green) icon styling to what should have been a purple moderator gavel

ie:

[Image: Forums-Forum-Team-3.png]


or whatever respective color you assign to this particular added staff usergroup, thus as is the green background hides the fact that the exact same colored gavel is actually there just blended in due to your coloring conflict. Wink

ohh my God... now I understand!
I must study code well, to update Big Grin

I had a good time with this edition, it is funny your description of the conflict that I have... jaja

i am studing the code again Big Grin

to fix the conflict style tutorials...

Big Grin

Thank You
(2021-03-12, 11:33 PM)DiegoPino Wrote: [ -> ]
(2021-03-12, 11:14 PM)censor_deeznutz Wrote: [ -> ]hahaha, ok well I just recreated your issue and the icon is displaying fine..., it is the fact that you are mixing other tutorial styling from my tutorials with this that has you thinking it is not displaying when it actually is...

notice this most likely copied from provided admin color styling?

    color: #2f9c0e;


Yet you are trying to style these like my usergroup image tutorials  and the styling in your images has an (admin gid color: green) background color of green and then you are trying to apply an (admin gid color: green) icon styling to what should have been a purple moderator gavel

ie:

[Image: Forums-Forum-Team-3.png]


or whatever respective color you assign to this particular added staff usergroup, thus as is the green background hides the fact that the exact same colored gavel is actually there just blended in due to your coloring conflict. Wink

ohh my God... now I understand!
I must study code well, to update  Big Grin

I had a good time with this edition, it is funny your description of the conflict that I have... jaja

i am studing the code again  Big Grin

to fix the conflict style tutorials...

Big Grin

Thank You


no worries, Big Grin glad it is making sense and cool beans to now being aware of how to correct the issue Smile oh, by the way, note: I re-added this particular tutorial to the tutorials section ie: https://community.mybb.com/thread-231687...pid1364593
(2021-03-12, 11:40 PM)censor_deeznutz Wrote: [ -> ]no worries, Big Grin glad it is making sense and cool beans to now being aware of how to correct the issue Smile oh, by the way, note: I re-added this particular tutorial to the tutorials section ie: https://community.mybb.com/thread-231687...pid1364593

Excellent tutorial post, I will follow it step by step to update my code and eliminate code conflicts.

I feel more comfortable working with version 4.7

Thank you for the support ant tutorial.

+1
Cool

Muchas Gracias por tu soporte!
Por mi pais y en mi ciudad eres bienvenido, me haz ayudado mucho Cool

Blush
(2021-03-12, 11:40 PM)censor_deeznutz Wrote: [ -> ]no worries, Big Grin glad it is making sense and cool beans to now being aware of how to correct the issue Smile oh, by the way, note: I re-added this particular tutorial to the tutorials section ie: https://community.mybb.com/thread-231687...pid1364593

Please ReUpload the Tutorial, its amazing tutorial. Cool
This weekend I will study the code to update my forum


another small question could you upload The Fontawesome version and library 5. I have the version 4.7. I would like to study with that library too...

I would like to host thar librari 5 in my host to Learn with this code

Thanks in Advance for Suppot

Big Grin