Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] Simple css groupimages for default usergroup & mybblike team ranks for custom group
#1
Information 
Originally posted as a response here: https://community.mybb.com/thread-220273...pid1317126

Opted to include it in tutorial section just in case someone finds a usage for it and or value.


Add to global.css:

/* general styling of all team group */

div[class^=team_usergroup_] {
  display: inline-block;
  margin: 6px 2px;
  padding: 0 8px;
  border: solid 1px #AAA;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 400;
  color: #767676;
  text-transform: uppercase;
}

div[class^=team_usergroup_] i {
  font-style: normal;
}

/* default */

/* individual styling of team group for user group 4 Administrator */

div.team_usergroup_4 {
  color: #FFF;
  background-color: #008000;
  border-color: #008000;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 3 Super Moderator */

div.team_usergroup_3 {
  color: #FFF;
  background-color: #CC00CC;
  border-color: #CC00CC;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 6 Moderator */

div.team_usergroup_6 {
  color: #FFF;
  background-color: #CC00CC;
  border-color: #CC00CC;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 2 Registered */

div.team_usergroup_2 {
  color: #FFF;
  background-color: #0072BF;
  border-color: #0072BF;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 1 Guest */

div.team_usergroup_1 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 7 Banned */

div.team_usergroup_7 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 5 Awaiting Activation */

div.team_usergroup_5 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
}

/* Additional groups */

/* individual styling of team group for user group 8 Management */

div.team_usergroup_8 {
  color: #008a00;
  border-color: #008a00;
  vertical-align: middle;
  padding-top: 2px;
}


/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 10 Design */

div.team_usergroup_10 {
  color: #657d08;
  border-color: #657d08;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 11 Security */

div.team_usergroup_11 {
  color: #927878;
  border-color: #927878;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 12 DevOps */

div.team_usergroup_12 {
  color: #8967de;
  border-color: #8967de;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 13 Support */

div.team_usergroup_13 {
  color: #f35858;
  border-color: #f35858;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 14 Community */

div.team_usergroup_14 {
  color: #2bb7c7;
  border-color: #2bb7c7;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 15 Web */

div.team_usergroup_15 {
  color: #2ba4eb;
  border-color: #2ba4eb;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 16 Editorial */

div.team_usergroup_16 {
  color: #62c9a1;
  border-color: #62c9a1;
  vertical-align: middle;
  padding-top: 2px;
}

Replace postbit_groupimage with:

<div class="team_usergroup_{$usergroup['gid']}" title="{$usergroup['title']}">{$usergroup['image']}</div>

Replace memberlist_user_groupimage with:


<div class="team_usergroup_{$usergroup['gid']}" title="{$usergroup['title']}">{$usergroup['image']}</div>

Replace member_profile_groupimage with:

<div class="team_usergroup_{$memprofile['usergroup']}" alt="{$usertitle}" title="{$usertitle}">{$memperms['image']}</div><br />

Add in groups in groupimage input for example for each usergroup its respective group name:

Quote:Group Image

Here you can set a group image which will show on each post made by users in this group.

Example:

<i>administrator</i>

Add additional usergroups 8 through 16 as follows:

8) Management
9) Development
10) Design
11) Security
12) DevOps
13) Support
14) Community
15) Web
16) Editorial

[Image: iycrpt.png]


Now some people may want to add font awesome icons to any or all of the groupimages. Now we could take the time to define each groupimage class with a fa icon or we can choose to do it simply via the groupimage input like so.

   

For example:

FA4.7:
<icon class="fa fa-wrench"></icon>&nbsp;<i>development</i>

FA5:
<icon class="fas fa-wrench"></icon>&nbsp;<i>development</i>


For groupimage with font awesome you need to understand it will modify the text slightly so you need to change for example:

/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
}

To:

/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}


Now, lets say you want to have the icon be a different color than the text we can simple modify via css file rather than inline styling:

From:

/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

To:

/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_9 icon {
  color: #555;
}

So after modifying for fa icons with option to color apart from text the css  would now be like:

/* general styling of all team group */

div[class^=team_usergroup_] {
  display: inline-block;
  margin: 6px 2px;
  padding: 0 8px;
  border: solid 1px #AAA;
  border-radius: 2px;
  font-size: 11px;
  color: #767676;
  text-transform: uppercase;
}

div[class^=team_usergroup_] i {
  font-style: normal;
}

/* default */

/* individual styling of team group for user group 4 Administrator */

div.team_usergroup_4 {
  color: #FFF;
  background-color: #008000;
  border-color: #008000;
  vertical-align: middle;
  font-weight: 600;
}

div.team_usergroup_4 icon {
  color: #FFF;
}

/* individual styling of team group for user group 3 Super Moderator */

div.team_usergroup_3 {
  color: #FFF;
  background-color: #CC00CC;
  border-color: #CC00CC;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_3 icon {
  color: #FFF;
}

/* individual styling of team group for user group 6 Moderator */

div.team_usergroup_6 {
  color: #FFF;
  background-color: #CC00CC;
  border-color: #CC00CC;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_6 icon {
  color: #FFF;
}

/* individual styling of team group for user group 2 Registered */

div.team_usergroup_2 {
  color: #FFF;
  background-color: #0072BF;
  border-color: #0072BF;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_2 icon {
  color: #FFF;
}

/* individual styling of team group for user group 1 Guest */

div.team_usergroup_1 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_1 icon {
  color: #555;
}

/* individual styling of team group for user group 7 Banned */

div.team_usergroup_7 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_7 icon {
  color: #555;
}

/* individual styling of team group for user group 5 Awaiting Activation */

div.team_usergroup_5 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_5 icon {
  color: #555;
}

/* Additional groups */

/* individual styling of team group for user group 8 Management */

div.team_usergroup_8 {
  color: #008a00;
  border-color: #008a00;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_8 icon {
  color: #008a00;
}


/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_9 icon {
  color: #d23b67;
}

/* individual styling of team group for user group 10 Design */

div.team_usergroup_10 {
  color: #657d08;
  border-color: #657d08;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_10 icon {
  color: #657d08;
}

/* individual styling of team group for user group 11 Security */

div.team_usergroup_11 {
  color: #927878;
  border-color: #927878;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_11 icon {
  color: #927878;
}

/* individual styling of team group for user group 12 DevOps */

div.team_usergroup_12 {
  color: #8967de;
  border-color: #8967de;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_12 icon {
  color: #8967de;
}

/* individual styling of team group for user group 13 Support */

div.team_usergroup_13 {
  color: #f35858;
  border-color: #f35858;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_13 icon {
  color: #f35858;
}

/* individual styling of team group for user group 14 Community */

div.team_usergroup_14 {
  color: #2bb7c7;
  border-color: #2bb7c7;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_14 icon {
  color: #2bb7c7;
}

/* individual styling of team group for user group 15 Web */

div.team_usergroup_15 {
  color: #2ba4eb;
  border-color: #2ba4eb;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_15 icon {
  color: #2ba4eb;
}

/* individual styling of team group for user group 16 Editorial */

div.team_usergroup_16 {
  color: #62c9a1;
  border-color: #62c9a1;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_16 icon {
  color: #62c9a1;
}




* either way, this requires already having the font-awesome library included in your existing theme headerinclude template.

For example:

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

FA5:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#2
(10-19-2018, 02:30 AM)vintagedaddyo Wrote: Originally posted as a response here: https://community.mybb.com/thread-220273...pid1317126

Opted to include it in tutorial section just in case someone finds a usage for it and or value.


Add to global.css:

-- SNIP --

This is GREAT!

I will be planning to implement this for my website.

One question...

Is there any way that the text can be centered vertically? 

It looks like the text is sitting up just a bit too high in the box.
I'm Serpius and You're Not    ¯\_(ツ)_/¯
[Image: 5M7sb0n.png?1]
Reply
#3
(10-19-2018, 09:01 AM)Serpius Wrote: Is there any way that the text can be centered vertically?

This ?

vertical-align: middle;
Reply
#4
(10-19-2018, 09:52 AM)meetdilip Wrote:
(10-19-2018, 09:01 AM)Serpius Wrote: Is there any way that the text can be centered vertically?

This ?

vertical-align: middle;

Maybe? I am not a coder, so I can't confirm this to be correct. 

It looks logical to me, but I will wait for @vintagedaddyo to confirm this.

Also, precisely where would this code be inserted? In every instance of the groupimage?

Something like this? 

/* individual styling of team group for user group 4 Administrator */

div.team_usergroup_4 {
  color: #FFF;
vertical-align: middle;
  background-color: #008000;
  border-color: #008000;
}
I'm Serpius and You're Not    ¯\_(ツ)_/¯
[Image: 5M7sb0n.png?1]
Reply
#5
Is there any way that the user group text is removed and the stars too?
Reply
#6
(10-19-2018, 09:52 AM)meetdilip Wrote:
(10-19-2018, 09:01 AM)Serpius Wrote: Is there any way that the text can be centered vertically?

This ?

vertical-align: middle;

(10-19-2018, 10:00 AM)Serpius Wrote:
(10-19-2018, 09:52 AM)meetdilip Wrote:
(10-19-2018, 09:01 AM)Serpius Wrote: Is there any way that the text can be centered vertically?

This ?

vertical-align: middle;

Maybe? I am not a coder, so I can't confirm this to be correct. 

It looks logical to me, but I will wait for @vintagedaddyo to confirm this.

Also, precisely where would this code be inserted? In every instance of the groupimage?

Something like this? 

/* individual styling of team group for user group 4 Administrator */

div.team_usergroup_4 {
  color: #FFF;
vertical-align: middle;
  background-color: #008000;
  border-color: #008000;
}

@meetdilip

t/y

@serpius

Sorry for delay in response, but I had been trying to get some much needed sleep to no avail, haha. Anyhoo, have you tried say for example:

/* general styling of all team group */

div[class^=team_usergroup_] {
   display: inline-block;
   margin: 6px 2px;
   padding: 0 8px;
   border: solid 1px #AAA;
   border-radius: 2px;
   font-size: 11px;
   font-weight: 400;
   color: #767676;
   text-transform: uppercase;
   text-align: center;
   vertical-align: middle;
}

(10-19-2018, 10:34 AM)Mattaffix Wrote: Is there any way that the user group text is removed and the stars too?

@mattaffix

This is for groupimage and NOT userstar or usertitle of which are completely a different focus. Yeah alot of people tend to mistake usertitle for groupimage and vis versa..., but they are not the same as I have had to explain in other tutorials for other users in the past. For the scope of this particular tutorial I have no need to focus on unrelated elements. I have presented other tutorials that modify both of those elements "userstar and usertitle" and identify which templates to modify so in theory you could follow those and delete the suggested inserts though.if that is your desire. Wink
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#7
(10-19-2018, 10:49 AM)vintagedaddyo Wrote: @meetdilip & @serpius

Sorry for delay in response, but I had been trying to get some much needed sleep to no avail, haha. Anyhoo, have you tried say for example:

/* general styling of all team group */

div[class^=team_usergroup_] {
   display: inline-block;
   margin: 6px 2px;
   padding: 0 8px;
   border: solid 1px #AAA;
   border-radius: 2px;
   font-size: 11px;
   font-weight: 400;
   color: #767676;
   text-transform: uppercase;
   text-align: center;
   vertical-align: middle;
}

Aha, now, I see it. The key to this is: "general styling of all team group". 

That forces all usergroup images to follow this styling unless otherwise overwritten by a specific code for a usergroup. 

I will try this shortly and report back on how things go.
I'm Serpius and You're Not    ¯\_(ツ)_/¯
[Image: 5M7sb0n.png?1]
Reply
#8
(10-19-2018, 11:21 AM)Serpius Wrote:
(10-19-2018, 10:49 AM)vintagedaddyo Wrote: @serpius

Sorry for delay in response, but I had been trying to get some much needed sleep to no avail, haha. Anyhoo, have you tried say for example:

/* general styling of all team group */

div[class^=team_usergroup_] {
   display: inline-block;
   margin: 6px 2px;
   padding: 0 8px;
   border: solid 1px #AAA;
   border-radius: 2px;
   font-size: 11px;
   font-weight: 400;
   color: #767676;
   text-transform: uppercase;
   text-align: center;
   vertical-align: middle;
}

Aha, now, I see it. The key to this is: "general styling of all team group". 

That forces all usergroup images to follow this styling unless otherwise overwritten by a specific code for a usergroup. 

I will try this shortly and report back on how things go.

Sorry, I must have been rather tired when I responded last, but I had a free moment just now to correct this to factor in for the Uppercase transform. OP is updated to reflect.

css should be more like for example:

/* general styling of all team group */

div[class^=team_usergroup_] {
  display: inline-block;
  margin: 6px 2px;
  padding: 0 8px;
  border: solid 1px #AAA;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 400;
  color: #767676;
  text-transform: uppercase;
}

div[class^=team_usergroup_] i {
  font-style: normal;
}

/* default */

/* individual styling of team group for user group 4 Administrator */

div.team_usergroup_4 {
  color: #FFF;
  background-color: #008000;
  border-color: #008000;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 3 Super Moderator */

div.team_usergroup_3 {
  color: #FFF;
  background-color: #CC00CC;
  border-color: #CC00CC;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 6 Moderator */

div.team_usergroup_6 {
  color: #FFF;
  background-color: #CC00CC;
  border-color: #CC00CC;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 2 Registered */

div.team_usergroup_2 {
  color: #FFF;
  background-color: #0072BF;
  border-color: #0072BF;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 1 Guest */

div.team_usergroup_1 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 7 Banned */

div.team_usergroup_7 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 5 Awaiting Activation */

div.team_usergroup_5 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
}

/* Additional groups */

/* individual styling of team group for user group 8 Management */

div.team_usergroup_8 {
  color: #008a00;
  border-color: #008a00;
  vertical-align: middle;
  padding-top: 2px;
}


/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 10 Design */

div.team_usergroup_10 {
  color: #657d08;
  border-color: #657d08;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 11 Security */

div.team_usergroup_11 {
  color: #927878;
  border-color: #927878;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 12 DevOps */

div.team_usergroup_12 {
  color: #8967de;
  border-color: #8967de;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 13 Support */

div.team_usergroup_13 {
  color: #f35858;
  border-color: #f35858;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 14 Community */

div.team_usergroup_14 {
  color: #2bb7c7;
  border-color: #2bb7c7;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 15 Web */

div.team_usergroup_15 {
  color: #2ba4eb;
  border-color: #2ba4eb;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 16 Editorial */

div.team_usergroup_16 {
  color: #62c9a1;
  border-color: #62c9a1;
  vertical-align: middle;
  padding-top: 2px;
}


Attached Files Thumbnail(s)
   
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#9
it does not work http://forumlife.x10host.com/showthread....pid=8#pid8
Reply
#10
(10-24-2018, 08:47 PM)DevLife Wrote: it does not work http://forumlife.x10host.com/showthread....pid=8#pid8

umm, actually it does if you follow the instructions correctly doing all the file edits correctly and adding the css and finally not forgetting to input the correct input for each usergroup in the groupimage input via acp.  Proof of it working are in the provided screenshots.


Quote:Group Image

Here you can set a group image which will show on each post made by users in this group.

Ie:

<i>administrator</i>


<i>super moderator</i>


<i>moderator</i>


<i>registered</i>

Etc, etc....

I can clearly see via viewing source of your forum using my cerulean theme that you have not added the css from this tutorial and most likely not even the file edits. Also it appears you have modified the exising gid user title for this theme to no longer function and seeing how those are already in the theme and not related to this tutorial I can again assume the reason for things not working has nothing to do with my instructions not working at all. Food for thought. 

Even though there are built in usetitle styling by gid already and yes you csn add this tutorial for groupimage, I suggest that you modify the css for this tutorial or modify the css of the grouptag styling so they dont clash...., also the only difference in getting it to work in cerulean is adding a few <br/> and adding a single call to add this to the already highly customised memberlist.


Here is the exact same tutorial with only a minor change to show you how I just did it on cerulean theme to verify it works perfectly fine:

Add to global.css:

/* general styling of all team group */

div[class^=team_usergroup_] {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 3px;
    font-weight: 600;
    border: solid 1px #AAA;
    color: #767676;
    text-transform: uppercase;
    margin-top: 5px;
}

div[class^=team_usergroup_] i {
  font-style: normal;
}

/* default */

/* individual styling of team group for user group 4 Administrator */

div.team_usergroup_4 {
  color: #FFF;
  background-color: #008000;
  border-color: #008000;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 3 Super Moderator */

div.team_usergroup_3 {
  color: #FFF;
  background-color: #CC00CC;
  border-color: #CC00CC;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 6 Moderator */

div.team_usergroup_6 {
  color: #FFF;
  background-color: #CC00CC;
  border-color: #CC00CC;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 2 Registered */

div.team_usergroup_2 {
  color: #FFF;
  background-color: #0072BF;
  border-color: #0072BF;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 1 Guest */

div.team_usergroup_1 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 7 Banned */

div.team_usergroup_7 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 5 Awaiting Activation */

div.team_usergroup_5 {
  background: none;
  vertical-align: middle;
  padding-top: 2px;
}

/* Additional groups */

/* individual styling of team group for user group 8 Management */

div.team_usergroup_8 {
  color: #008a00;
  border-color: #008a00;
  vertical-align: middle;
  padding-top: 2px;
}


/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 10 Design */

div.team_usergroup_10 {
  color: #657d08;
  border-color: #657d08;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 11 Security */

div.team_usergroup_11 {
  color: #927878;
  border-color: #927878;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 12 DevOps */

div.team_usergroup_12 {
  color: #8967de;
  border-color: #8967de;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 13 Support */

div.team_usergroup_13 {
  color: #f35858;
  border-color: #f35858;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 14 Community */

div.team_usergroup_14 {
  color: #2bb7c7;
  border-color: #2bb7c7;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 15 Web */

div.team_usergroup_15 {
  color: #2ba4eb;
  border-color: #2ba4eb;
  vertical-align: middle;
  padding-top: 2px;
}

/* individual styling of team group for user group 16 Editorial */

div.team_usergroup_16 {
  color: #62c9a1;
  border-color: #62c9a1;
  vertical-align: middle;
  padding-top: 2px;
}

Replace postbit_groupimage with:

<br />
<div class="team_usergroup_{$usergroup['gid']}" title="{$usergroup['title']}">{$usergroup['image']}</div>

Replace memberlist_user_groupimage with:


<div class="team_usergroup_{$usergroup['gid']}" title="{$usergroup['title']}">{$usergroup['image']}</div><br />

Replace member_profile_groupimage with:

<div class="team_usergroup_{$memprofile['usergroup']}" alt="{$usertitle}" title="{$usertitle}">{$memperms['image']}</div><br />

Replace memberlist_user with:

<tr>
  <div class="memberlistprofile">
    <center>
    <div class="memberlist_avatar">{$user['avatar']}</div>
	<div class="usertitle"><span class="grouptag grouptag_{$usergroup['gid']}">&nbsp; {$user['usertitle']}</span><br /></div>
{$usergroup['groupimage']}
    <div class="userstar"><span style="text-align: center;" class="userstar star_{$user['stars']}" title="{$user['usertitle']}"></span></div>
<h4 class="memberlistname">{$user['profilelink']}</h4>
    <div class="memberlistbio"><i class="infothead-date fa fa-pencil-square" title="Joined"></i> {$user['regdate']}</div>
    <div class="infothead">
      <center>
        <li class="fa fa-comments"></li>
        Comments: {$user['postnum']}
        <li class="fa fa-comments-o"></li>
        Threads:{$user['threadnum']}
      </center>
    </div>
  </div>
</tr>
</ br>

Add in groups in groupimage input for example for each usergroup its respective group name:

Quote:Group Image

Here you can set a group image which will show on each post made by users in this group.

Example:

<i>administrator</i>

Add additional usergroups 8 through 16 as follows:

8) Management
9) Development
10) Design
11) Security
12) DevOps
13) Support
14) Community
15) Web
16) Editorial

Now you may want to add font awesome icons to any or all of the groupimages. Now we could take the time to define each groupimage class with a fa icon or we can choose to do it simply via the groupimage input like so.


For example:

FA4.7:
<icon class="fa fa-wrench"></icon><i>development</i>


For groupimage with font awesome you need to understand it will modify the text slightly so you need to change for example:

/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
}

To:

/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}


Now, lets say you want to have the icon be a different color than the text we can simple modify via css file rather than inline styling:

From:

/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

To:

/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
  color: #d23b67;
  border-color: #d23b67;
  vertical-align: middle;
  padding-top: 2px;
  font-weight: 600;
}

div.team_usergroup_9 icon {
  color: #555;
  padding-right: 5px;
}

So after modifying for fa icons with option to color apart from text the css  would now be like:

/* general styling of all team group */

div[class^=team_usergroup_] {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 3px;
    font-weight: 600;
    border: solid 1px #AAA;
    color: #767676;
    text-transform: uppercase;
    margin-top: 5px;
}

div[class^=team_usergroup_] i {
    font-style: normal;
}


/* default */


/* individual styling of team group for user group 4 Administrator */

div.team_usergroup_4 {
    color: #FFF;
    background-color: #008000;
    border-color: #008000;
    vertical-align: middle;
    font-weight: 600;
}

div.team_usergroup_4 icon {
    color: #FFF;
    padding-right: 5px;
}


/* individual styling of team group for user group 3 Super Moderator */

div.team_usergroup_3 {
    color: #FFF;
    background-color: #CC00CC;
    border-color: #CC00CC;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_3 icon {
    color: #FFF;
    padding-right: 5px;
}


/* individual styling of team group for user group 6 Moderator */

div.team_usergroup_6 {
    color: #FFF;
    background-color: #CC00CC;
    border-color: #CC00CC;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_6 icon {
    color: #FFF;
    padding-right: 5px;
}  


/* individual styling of team group for user group 2 Registered */

div.team_usergroup_2 {
    color: #FFF;
    background-color: #0072BF;
    border-color: #0072BF;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_2 icon {
    color: #FFF;
    padding-right: 5px;
}    


/* individual styling of team group for user group 1 Guest */

div.team_usergroup_1 {
    background: none;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_1 icon {
    color: #555;
    padding-right: 5px;
}


/* individual styling of team group for user group 7 Banned */

div.team_usergroup_7 {
    background: none;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_7 icon {
    color: #555;
    padding-right: 5px;
}


/* individual styling of team group for user group 5 Awaiting Activation */

div.team_usergroup_5 {
    background: none;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_5 icon {
    color: #555;
    padding-right: 5px;
}


/* Additional groups */


/* individual styling of team group for user group 8 Management */

div.team_usergroup_8 {
    color: #008a00;
    border-color: #008a00;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_8 icon {
    color: #008a00;
    padding-right: 5px;
}


/* individual styling of team group for user group 9 Development */

div.team_usergroup_9 {
    color: #d23b67;
    border-color: #d23b67;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_9 icon {
    color: #d23b67;
    padding-right: 5px;
}


/* individual styling of team group for user group 10 Design */

div.team_usergroup_10 {
    color: #657d08;
    border-color: #657d08;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_10 icon {
    color: #657d08;
    padding-right: 5px;
}


/* individual styling of team group for user group 11 Security */

div.team_usergroup_11 {
    color: #927878;
    border-color: #927878;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_11 icon {
    color: #927878;
    padding-right: 5px;
}


/* individual styling of team group for user group 12 DevOps */

div.team_usergroup_12 {
    color: #8967de;
    border-color: #8967de;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_12 icon {
    color: #8967de;
    padding-right: 5px;
}


/* individual styling of team group for user group 13 Support */

div.team_usergroup_13 {
    color: #f35858;
    border-color: #f35858;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_13 icon {
    color: #f35858;
    padding-right: 5px;
}


/* individual styling of team group for user group 14 Community */

div.team_usergroup_14 {
    color: #2bb7c7;
    border-color: #2bb7c7;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_14 icon {
    color: #2bb7c7;
    padding-right: 5px;
}


/* individual styling of team group for user group 15 Web */

div.team_usergroup_15 {
    color: #2ba4eb;
    border-color: #2ba4eb;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_15 icon {
    color: #2ba4eb;
    padding-right: 5px;
}


/* individual styling of team group for user group 16 Editorial */

div.team_usergroup_16 {
    color: #62c9a1;
    border-color: #62c9a1;
    vertical-align: middle;
    padding-top: 2px;
    font-weight: 600;
}

div.team_usergroup_16 icon {
    color: #62c9a1;
    padding-right: 5px;
}



Now lets modify for font awesome icon and add in groups in groupimage input for example for each usergroup its respective group name:

Quote:Group Image

Here you can set a group image which will show on each post made by users in this group.

Example
<icon class="fa fa-cog"></icon><i>administrator</i>



<icon class="fa fa-gavel"></icon><i>super moderator</i>



<icon class="fa fa-gavel"></icon><i>moderator</i>



<icon class="fa fa-user"></icon><i>registered</i>

Etc, etc....


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)