MyBB Community Forums

MyBB Community Forums > Community > General Discussion > myBB ranks banners for download
Full Version: myBB ranks banners for download
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

PT82

2018-10-17, 01:15 PM
Hello, i like new mybb team rank banners. Its possible download source file .psd or .ai ?
Or it is possible make same ranks on my forum via css ?

Thanks

[Image: ck8UUAY.jpg]

meetdilip

2018-10-17, 01:57 PM
It is made using CSS. You can easily do it through CSS for your own board. If you want to use it as images, some skill with Photoshop will help you do it.

You can start with these 

.smalltext {
    font-size: 12px;
    color: #8967de;
    border-color: #8967de;
    border: solid 1px #AAA;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    text-transform: uppercase;

}
[attachment=41091]

Ashley1

2018-10-17, 02:02 PM
This thread may be useful:
https://community.mybb.com/thread-165413.html

meetdilip

2018-10-18, 03:06 AM
I can pack and upload these to the Mod site if there is enough interest

[attachment=41095]

Ashley1

2018-10-18, 04:31 AM
(2018-10-18, 03:06 AM)meetdilip Wrote: [ -> ]I can pack and upload these to the Mod site if there is enough interest

There's not much activity lately  Sad

hope things change with the release of 1.9

Serpius

2018-10-18, 09:11 AM
(2018-10-18, 03:06 AM)meetdilip Wrote: [ -> ]I can pack and upload these to the Mod site if there is enough interest

Go ahead and do it.

At least this will be ready when MyBB 1.9.xx is released. 

Admins will be asking for those usergroup images. 

Some are already asking for those images now. A few downloads now, but a ton of downloads as soon as 1.9.xx is released.

Why not go ahead and release it now?

meetdilip

2018-10-18, 11:01 AM
I tried to upload at the mod site. It is asking for some code name. What I entered is not working fine. I think I will attach here itself

Ashley1

2018-10-18, 11:13 AM
(2018-10-18, 11:01 AM)meetdilip Wrote: [ -> ]I tried to upload at the mod site. It is asking for some code name. What I entered is not working fine. I think I will attach here itself

I uploaded something the other day. That code is a 3 digit code - alphabet letters only, needs to be unique - then you should be able to upload.

User 6029

2018-10-18, 10:00 PM
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

Example:
[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:

[attachment=41130]


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




If you are having difficulty with the tutorial steps and you want the similar MyBBComm_Default theme that has these steps included already as shown above though not the font-awesome variant, you can grab it below though you will still need to add additional usergroups in acp to allow for the included styling.

meetdilip

2018-10-19, 01:26 AM
(2018-10-18, 11:13 AM)Ashley1 Wrote: [ -> ]
(2018-10-18, 11:01 AM)meetdilip Wrote: [ -> ]I tried to upload at the mod site. It is asking for some code name. What I entered is not working fine. I think I will attach here itself

I uploaded something the other day. That code is a 3 digit code - alphabet letters only, needs to be unique - then you should be able to upload.

Thanks

https://community.mybb.com/mods.php?acti...w&pid=1177
Pages: 1 2
MyBB Community Forums > Community > General Discussion > myBB ranks banners for download