(2020-01-31, 04:25 PM)TheRazvy Wrote: [ -> ]Thanks vintagedaddyo for the answer, it is a very good version without the plugin.
Here now I will show you a quick way to modify styling by applying some changes to make it look a lil nicer and easier to know whats what:
delete only the styling you added previously in global.css as we want to get more organized and add it into a new stylesheet
in your themes create a stylesheet for your theme called:
staff_post.css
* attach it globally
add to staff_post.css
or if you don't want it like that then just add to global.css * Now I commented out old css styling to make the change easy to understand
/** Staff Post BG Colors by GID by: Vintagedaddyo **/
/** Staff Post BG Colors Head **/
.staff_post_head_bg3 {
/* Super Moderator */
/* background: #F9E5F9 !important; */
background: #ffd6fc !important;
}
.staff_post_head_bg4 {
/* Administrator */
/* background: #DEEFB7 !important; */
background: #b1f279 !important;
}
.staff_post_head_bg6 {
/* Moderator */
/* background-color: #DEEF75 !important; */
background: #ffd6fc !important;
}
/** Staff Post BG Colors Post **/
.staff_post_bg3 {
/* Super Moderator */
/* background: #E6E8FA !important; */
background: #f9e3f8 !important;
color: #CC00CC !important;
}
.staff_post_bg4 {
/* Administrator */
/* background: #E6E8FA !important; */
background: #e5fcd1 !important;
color: #318000 !important;
}
.staff_post_bg6 {
/* Moderator */
/* background: #E6E8FA !important; */
background: #f9e3f8 !important;
color: #CC00CC !important;
}
/** Staff Post BG Colors Foot **/
.staff_post_foot_bg3 {
/* Super Moderator */
/* background: #F9E5F9 !important; */
background: #ffd6fc !important;
}
.staff_post_foot_bg4 {
/* Administrator */
/* background: #DEEFB7 !important; */
background: #b1f279 !important;
}
.staff_post_foot_bg6 {
/* Moderator */
/* background-color: #DEEF75 !important; */
background: #ffd6fc !important;
}
Now, let us make some more changes since we do not need the old commented out styling and just to make it easier to know what is what let us add more description and then add some more improvements:
Replace css with:
/** Staff Post BG Colors by GID by: Vintagedaddyo **/
/** Staff Post BG Colors Head **/
.staff_post_head_bg3 {
/* Super Moderator */
/* Background Color */
background: #ffd6fc !important;
}
.staff_post_head_bg4 {
/* Administrator */
/* Background Color */
background: #b1f279 !important;
}
.staff_post_head_bg6 {
/* Moderator */
/* Background Color */
background: #ffd6fc !important;
}
/** Staff Post BG Colors Post **/
.staff_post_bg3 {
/* Super Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
/* Post Border */
margin-top: 6px;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 6px;
border: 1px solid #CC00CC;
-webkit-box-shadow: inset 0 1px 1px rgb(204,0,204), 0 0 8px rgba(204,0,204, 0.8);
box-shadow: inset 0 1px 1px rgba(204,0,204, 0.8), 0 0 8px rgba(204,0,204, 0.8);
}
.staff_post_bg4 {
/* Administrator */
/* Background Color */
background: #e5fcd1 !important;
/* Post Font */
color: #318000 !important;
/* Post Border */
margin-top: 6px;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 6px;
border: 1px solid #008000;
-webkit-box-shadow: inset 0 1px 1px rgb(0,128,0), 0 0 8px rgba(0,128,0, 0.8);
box-shadow: inset 0 1px 1px rgba(0,128,0, 0.8), 0 0 8px rgba(0,128,0, 0.8);
}
.staff_post_bg6 {
/* Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
/* Post Border */
margin-top: 6px;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 6px;
border: 1px solid #CC00CC;
-webkit-box-shadow: inset 0 1px 1px rgb(204,0,204), 0 0 8px rgba(204,0,204, 0.8);
box-shadow: inset 0 1px 1px rgba(204,0,204, 0.8), 0 0 8px rgba(204,0,204, 0.8);
}
/** Staff Post BG Colors Foot **/
.staff_post_foot_bg3 {
/* Super Moderator */
/* Background Color */
background: #ffd6fc !important;
}
.staff_post_foot_bg4 {
/* Administrator */
/* Background Color */
background: #b1f279 !important;
}
.staff_post_foot_bg6 {
/* Moderator */
/* Background Color */
background: #ffd6fc !important;
}
One final tweak since we added some nice styling but something needs to be changed in postbit_classic to compensate
in posbit_classic template find:
<div class="post_body staff_post_bg{$usergroup['gid']} scaleimages" id="pid_{$post['pid']}">
change to:
<div class="post_body staff_post_c2_bg{$usergroup['gid']} scaleimages" id="pid_{$post['pid']}">
And let us add this to css:
/** Staff Post BG Colors Post Classic 2 **/
.staff_post_c2_bg3 {
/* Super Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
}
.staff_post_c2_bg4 {
/* Administrator */
/* Background Color */
background: #e5fcd1 !important;
/* Post Font */
color: #318000 !important;
}
.staff_post_c2_bg6 {
/* Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
}
So now css looks like:
/** Staff Post BG Colors by GID by: Vintagedaddyo **/
/** Staff Post BG Colors Head **/
.staff_post_head_bg3 {
/* Super Moderator */
/* Background Color */
background: #ffd6fc !important;
}
.staff_post_head_bg4 {
/* Administrator */
/* Background Color */
background: #b1f279 !important;
}
.staff_post_head_bg6 {
/* Moderator */
/* Background Color */
background: #ffd6fc !important;
}
/** Staff Post BG Colors Post **/
.staff_post_bg3 {
/* Super Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
/* Post Border */
margin-top: 6px;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 6px;
border: 1px solid #CC00CC;
-webkit-box-shadow: inset 0 1px 1px rgb(204,0,204), 0 0 8px rgba(204,0,204, 0.8);
box-shadow: inset 0 1px 1px rgba(204,0,204, 0.8), 0 0 8px rgba(204,0,204, 0.8);
}
.staff_post_bg4 {
/* Administrator */
/* Background Color */
background: #e5fcd1 !important;
/* Post Font */
color: #318000 !important;
/* Post Border */
margin-top: 6px;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 6px;
border: 1px solid #008000;
-webkit-box-shadow: inset 0 1px 1px rgb(0,128,0), 0 0 8px rgba(0,128,0, 0.8);
box-shadow: inset 0 1px 1px rgba(0,128,0, 0.8), 0 0 8px rgba(0,128,0, 0.8);
}
.staff_post_bg6 {
/* Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
/* Post Border */
margin-top: 6px;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 6px;
border: 1px solid #CC00CC;
-webkit-box-shadow: inset 0 1px 1px rgb(204,0,204), 0 0 8px rgba(204,0,204, 0.8);
box-shadow: inset 0 1px 1px rgba(204,0,204, 0.8), 0 0 8px rgba(204,0,204, 0.8);
}
/** Staff Post BG Colors Post Classic 2 **/
.staff_post_c2_bg3 {
/* Super Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
}
.staff_post_c2_bg4 {
/* Administrator */
/* Background Color */
background: #e5fcd1 !important;
/* Post Font */
color: #318000 !important;
}
.staff_post_c2_bg6 {
/* Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
}
/** Staff Post BG Colors Foot **/
.staff_post_foot_bg3 {
/* Super Moderator */
/* Background Color */
background: #ffd6fc !important;
}
.staff_post_foot_bg4 {
/* Administrator */
/* Background Color */
background: #b1f279 !important;
}
.staff_post_foot_bg6 {
/* Moderator */
/* Background Color */
background: #ffd6fc !important;
}
Hopefully that makes it easier and is understandable
So the end result would be the tutorial is now like:
Staff Post Color By GID:
create a stylesheet for your theme called:
staff_post.css
* attach it globally
add to staff_post.css
/** Staff Post BG Colors by GID by: Vintagedaddyo **/
/** Staff Post BG Colors Head **/
.staff_post_head_bg3 {
/* Super Moderator */
/* Background Color */
background: #ffd6fc !important;
}
.staff_post_head_bg4 {
/* Administrator */
/* Background Color */
background: #b1f279 !important;
}
.staff_post_head_bg6 {
/* Moderator */
/* Background Color */
background: #ffd6fc !important;
}
/** Staff Post BG Colors Post **/
.staff_post_bg3 {
/* Super Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
/* Post Border */
margin-top: 6px;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 6px;
border: 1px solid #CC00CC;
-webkit-box-shadow: inset 0 1px 1px rgb(204,0,204), 0 0 8px rgba(204,0,204, 0.8);
box-shadow: inset 0 1px 1px rgba(204,0,204, 0.8), 0 0 8px rgba(204,0,204, 0.8);
}
.staff_post_bg4 {
/* Administrator */
/* Background Color */
background: #e5fcd1 !important;
/* Post Font */
color: #318000 !important;
/* Post Border */
margin-top: 6px;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 6px;
border: 1px solid #008000;
-webkit-box-shadow: inset 0 1px 1px rgb(0,128,0), 0 0 8px rgba(0,128,0, 0.8);
box-shadow: inset 0 1px 1px rgba(0,128,0, 0.8), 0 0 8px rgba(0,128,0, 0.8);
}
.staff_post_bg6 {
/* Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
/* Post Border */
margin-top: 6px;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 6px;
border: 1px solid #CC00CC;
-webkit-box-shadow: inset 0 1px 1px rgb(204,0,204), 0 0 8px rgba(204,0,204, 0.8);
box-shadow: inset 0 1px 1px rgba(204,0,204, 0.8), 0 0 8px rgba(204,0,204, 0.8);
}
/** Staff Post BG Colors Post Classic 2 **/
.staff_post_c2_bg3 {
/* Super Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
}
.staff_post_c2_bg4 {
/* Administrator */
/* Background Color */
background: #e5fcd1 !important;
/* Post Font */
color: #318000 !important;
}
.staff_post_c2_bg6 {
/* Moderator */
/* Background Color */
background: #f9e3f8 !important;
/* Post Font */
color: #CC00CC !important;
}
/** Staff Post BG Colors Foot **/
.staff_post_foot_bg3 {
/* Super Moderator */
/* Background Color */
background: #ffd6fc !important;
}
.staff_post_foot_bg4 {
/* Administrator */
/* Background Color */
background: #b1f279 !important;
}
.staff_post_foot_bg6 {
/* Moderator */
/* Background Color */
background: #ffd6fc !important;
}
Edit postbit template:
in postbit template find:
<div class="post {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
change to:
<div class="post staff_post_bg{$usergroup['gid']} {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
still in postbit template find:
<div class="post_author">
change to:
<div class="post_author staff_post_head_bg{$usergroup['gid']}">
still in posbit template find:
<div class="post_controls">
change to:
<div class="post_controls staff_post_foot_bg{$usergroup['gid']}">
Edit postbit_classic template:
in posbit_classic template find:
<div class="post classic {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
change to:
<div class="post classic staff_post_bg{$usergroup['gid']} {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
in posbit_classic template find:
<div class="post_author scaleimages">
change to:
<div class="post_author scaleimages staff_post_head_bg{$usergroup['gid']}">
in posbit_classic template find:
<div class="post_body scaleimages" id="pid_{$post['pid']}">
change to:
<div class="post_body staff_post_c2_bg{$usergroup['gid']} scaleimages" id="pid_{$post['pid']}">
in posbit_classic template find:
<div class="post_controls">
change to:
<div class="post_controls staff_post_foot_bg{$usergroup['gid']}">
MyBB default staff "gids" are:
Quote: [ 3 ] _ Super Moderators
[ 4 ] _ Administrators
[ 6 ] _ Moderators
Note: if you want user profile fieldset to have same styling then...
in member_profile template find:
<fieldset>
change to:
<fieldset class="staff_post_bg{$memprofile['usergroup']}">
Enjoy!
Happy Editing!