MyBB Community Forums

Full Version: Change admin post layout
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello,

a simple request (not sure if possible or not).
Is it possible to change post formatting (background color/font color) of posts made by admin?

In practice... everytime Admin create/reply a topic, his posts will appear different from other posts/reply... automatically.

Is there any trick/php-modification to make this?


I saw that in phpbb3 you can, I guess it can be done here but I don't know how.
you can try using this plugin --> Group Post CSS
Thank you very much
(2020-01-31, 09:15 AM)TheRazvy Wrote: [ -> ]Hello,

a simple request (not sure if possible or not).
Is it possible to change post formatting (background color/font color) of posts made by admin?

In practice... everytime Admin create/reply a topic, his posts will appear different from other posts/reply... automatically.

Is there any trick/php-modification to make this?


I saw that in phpbb3 you can, I guess it can be done here but I don't know how.


You could use my Group Post CSS plugin like .m. suggested or if you don't want a plugin and would like a manual way to do so, you can use one of my old instructions to do this also like so:



add to global.css

/** Staff Post BG Colors by GID by: Vintagedaddyo **/

/** Staff Post BG Colors Head **/

.staff_post_head_bg3 {
    background: #F9E5F9 !important;
}

.staff_post_head_bg4 {
    background: #DEEFB7 !important;
}

.staff_post_head_bg6 {
    background-color: #DEEF75 !important;
}

/** Staff Post BG Colors Post **/

.staff_post_bg3 {
    background: #E6E8FA !important;
}

.staff_post_bg4 {
    background: #E6E8FA !important;
}

.staff_post_bg6 {
    background: #E6E8FA !important;
}

/** Staff Post BG Colors Foot **/

.staff_post_foot_bg3 {
    background: #F9E5F9 !important;
}

.staff_post_foot_bg4 {
    background: #DEEFB7 !important;
}

.staff_post_foot_bg6 {
    background-color: #DEEF75 !important;
}

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']}">

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_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:

 
 [ 3 ] _ Super Moderators
 [ 4 ] _ Administrators
 [ 6 ] _ Moderators
Thanks vintagedaddyo for the answer, it is a very good version without the plugin.
(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 Smile



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!  Smile Happy Editing!  Cool