MyBB Community Forums › Resources › Tutorials v
Color All Post Backgrounds of a Usergroup

Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Thread Modes
Color All Post Backgrounds of a Usergroup
Corey H Offline
Senior Member
****
Posts: 467
Threads: 17
Joined: Oct 2013
Reputation: 36
#21
04-25-2016, 02:24 AM (This post was last modified: 04-25-2016, 02:25 AM by Corey H.)
Yes you can add it just like you would the background but with color, after following the tutorial of course.

Example using the code of the first post:

.post6 { color: #FDB5FF; }
Website Find
Reply
])RAG()N Offline
Member
***
Posts: 91
Threads: 12
Joined: Jan 2016
Reputation: 1
#22
04-25-2016, 09:00 AM
Mmm I can seam to get this to work Huh

does this look right

<div class="post classic post{$usergroup['gid']} {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
Find
Reply
JordanMussi Offline
Posting Freak
*****
Former Staff
Posts: 3,336
Threads: 94
Joined: Aug 2011
Reputation: 140
#23
04-26-2016, 05:12 PM
It may be another style overwriting it due to the order. Try moving your .post styles to the bottom of your stylesheet.
Extend MyBB • github.com/JordanMussi • 🔑 keybase.io/jordanmussi
Website Find
Reply
])RAG()N Offline
Member
***
Posts: 91
Threads: 12
Joined: Jan 2016
Reputation: 1
#24
04-27-2016, 02:56 AM
(04-26-2016, 05:12 PM)JordanMussi Wrote: It may be another style overwriting it due to the order. Try moving your .post styles to the bottom of your stylesheet.

hmm where can I find .post styles ?

oh I am using the Duende V2 Theme
Find
Reply
Zaqre Offline
Senior Member
****
Posts: 313
Threads: 57
Joined: Sep 2016
Reputation: 11
#25
11-14-2016, 09:35 PM
Can someone make this into a plugin
www.volvl.com | Get your first month of hosting for $0.01 USD with Promo Code: Hexeus
[Image: 12946833.gif]


Find
Reply
Zaqre Offline
Senior Member
****
Posts: 313
Threads: 57
Joined: Sep 2016
Reputation: 11
#26
11-29-2016, 05:15 PM
Does this not work for 1.8.8? I've looked at 3 different themes and they all are missing <td blablabla> they only have <div bla babla>
www.volvl.com | Get your first month of hosting for $0.01 USD with Promo Code: Hexeus
[Image: 12946833.gif]


Find
Reply
vintagedaddyo Away
Theme Designer
****
Posts: 726
Threads: 82
Joined: Nov 2006
Reputation: 83
#27
11-29-2016, 08:45 PM (This post was last modified: 11-29-2016, 09:13 PM by vintagedaddyo.)
(11-29-2016, 05:15 PM)Zaqre Wrote: Does this not work for 1.8.8? I've looked at 3 different themes and they all are missing <td blablabla> they only have <div bla babla>


Try this:

Add to your global.css
/** Staff Post Post BG Colors Post **/

.staff_post3 { 
  background: #E6E8FA !important; 
}
.staff_post4 { 
  background: #E6E8FA !important; 
}
.staff_post6 { 
  background: #E6E8FA !important; 
}

/** Staff Post BG Colors Head and Foot **/

.staff_post_bg3 { 
  background:  #F9E5F9 !important; 
}
.staff_post_bg4 { 
  background:  #DEEFB7 !important; 
}
.staff_post_bg6 { 
  background-color: #DEEF75 !important; 
}

Replace postbit with:

{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post staff_post{$usergroup['gid']} {$unapproved_shade}" style="{$post_visibility}" id="staff_post_{$post['pid']}">
 <div class="post_author staff_post_bg{$usergroup['gid']}">
    {$post['useravatar']}
    <div class="author_information">
            <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
            <span class="smalltext">
                {$post['usertitle']}<br />
                {$post['userstars']}
                {$post['groupimage']}
            </span>
    </div>
    <div class="author_statistics">
        {$post['user_details']}
    </div>
</div>
<div class="post_content">
    <div class="post_head">
        {$post['posturl']}
        {$post['icon']}
        <span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
        {$post['subject_extra']}
    </div>
    <div class="post_body scaleimages" id="pid_{$post['pid']}">
        {$post['message']}
    </div>
    {$post['attachments']}
    {$post['signature']}
    <div class="post_meta" id="post_meta_{$post['pid']}">
        {$post['quick_quote']}{$post['iplogged']}
    </div>
</div>
<div class="post_controls staff_post_bg{$usergroup['gid']}">
    <div class="postbit_buttons author_buttons float_left">
        {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
    </div>
    <div class="postbit_buttons post_management_buttons float_right">
        {$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
    </div>
</div>
</div>


Replace postbit_classic with:

{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic  staff_post{$usergroup['gid']} {$unapproved_shade}" style="{$post_visibility}" id="staff_post_{$post['pid']}">
 <div class="post_author scaleimages staff_post_bg{$usergroup['gid']}">
    {$post['useravatar']}
    <div class="author_information">
            <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
            <span class="smalltext">
                {$post['usertitle']}<br />
                {$post['userstars']}
                {$post['groupimage']}
            </span>
    </div>
    <div class="author_statistics">
        {$post['user_details']}{$post['usercountry']}<br />{$post['usermood']}
    </div>
</div>
<div class="post_content">
    <div class="post_head">
        {$post['posturl']}
        {$post['icon']}
        <span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
    {$post['subject_extra']}
    </div>
    <div class="post_body post{$usergroup['gid']} scaleimages" id="pid_{$post['pid']}">
        {$post['message']}
    </div>
{$post['simplelikes']}
    {$post['attachments']}
    {$post['signature']}
    <div class="post_meta" id="post_meta_{$post['pid']}">
        
    </div>
</div>
<div class="post_controls staff_post_bg{$usergroup['gid']}">
    <div class="postbit_buttons author_buttons float_left">
            {$post['quick_quote']}
        {$post['quick_quote']}
        {$post['quick_quote']}
    {$post['iplogged']}{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
    </div>
    <div class="postbit_buttons post_management_buttons float_right">
        {$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}{$post['button_like']}
    </div>
</div>
</div>
* This allows the option to color  2 different colors for 3 sections of the post by user group.


Classic Postbit example:

[Image: 35d6idc.png]


Postbit Example:

[Image: spuidt.jpg]


OR.........

If you want to control all three sections seperately..., we can change it up slightly to do so:

/** Staff Post BG Colors Head and Foot **/

.staff_post_head_bg3 { background:  #F9E5F9 !important; }
.staff_post_head_bg4 { background:  #DEEFB7 !important; }
.staff_post_head_bg6 { background-color: #DEEF75 !important; }

/** Staff Post 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 Head and Foot **/

.staff_post_foot_bg3 { background:  #F9E5F9 !important; }
.staff_post_foot_bg4 { background:  #DEEFB7 !important; }
.staff_post_foot_bg6 { background-color: #DEEF75 !important; }


Replace your postbit with:

{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post staff_post_bg{$usergroup['gid']} {$unapproved_shade}" style="{$post_visibility}" id="staff_post_bg{$post['pid']}">
 <div class="post_author staff_post_head_bg{$usergroup['gid']}">
    {$post['useravatar']}
    <div class="author_information">
            <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
            <span class="smalltext">
                {$post['usertitle']}<br />
                {$post['userstars']}
                {$post['groupimage']}
            </span>
    </div>
    <div class="author_statistics">
        {$post['user_details']}
    </div>
</div>
<div class="post_content">
    <div class="post_head">
        {$post['posturl']}
        {$post['icon']}
        <span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
        {$post['subject_extra']}
    </div>
    <div class="post_body scaleimages" id="pid_{$post['pid']}">
        {$post['message']}
    </div>
    {$post['attachments']}
    {$post['signature']}
    <div class="post_meta" id="post_meta_{$post['pid']}">
        {$post['quick_quote']}{$post['iplogged']}
    </div>
</div>
<div class="post_controls staff_post_foot_bg{$usergroup['gid']}">
    <div class="postbit_buttons author_buttons float_left">
        {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
    </div>
    <div class="postbit_buttons post_management_buttons float_right">
        {$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
    </div>
</div>
</div>

replace your postbit_classic with:

{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic  staff_post_bg{$usergroup['gid']} {$unapproved_shade}" style="{$post_visibility}" id="staff_post_bg{$post['pid']}">
 <div class="post_author scaleimages staff_post_head_bg{$usergroup['gid']}">
    {$post['useravatar']}
    <div class="author_information">
            <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
            <span class="smalltext">
                {$post['usertitle']}<br />
                {$post['userstars']}
                {$post['groupimage']}
            </span>
    </div>
    <div class="author_statistics">
        {$post['user_details']}{$post['usercountry']}<br />{$post['usermood']}
    </div>
</div>
<div class="post_content">
    <div class="post_head">
        {$post['posturl']}
        {$post['icon']}
        <span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
    {$post['subject_extra']}
    </div>
    <div class="post_body post{$usergroup['gid']} scaleimages" id="pid_{$post['pid']}">
        {$post['message']}
    </div>
{$post['simplelikes']}
    {$post['attachments']}
    {$post['signature']}
    <div class="post_meta" id="post_meta_{$post['pid']}">
        
    </div>
</div>
<div class="post_controls staff_post_foot_bg{$usergroup['gid']}">
    <div class="postbit_buttons author_buttons float_left">
            {$post['quick_quote']}
        {$post['quick_quote']}
        {$post['quick_quote']}
    {$post['iplogged']}{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
    </div>
    <div class="postbit_buttons post_management_buttons float_right">
        {$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}{$post['button_like']}
    </div>
</div>
</div>
* This allows the option to color 3 different colors for 3 sections of the post by user group.
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Find
Reply
timelord Offline
Junior Member
**
Posts: 25
Threads: 4
Joined: Feb 2017
Reputation: 0
#28
02-21-2017, 10:07 PM
Hi vintagedaddyo. The codes you have given works perfect. But I got a little question. Is there a specified code for .post_body? I want to costumize the .post_body for only staff. I'll add;

background: black;
opacity: 0.8;
border-radius: 15px;

and I want these to be applied only for admins, in .post_body. Thank you!
Find
Reply
vintagedaddyo Away
Theme Designer
****
Posts: 726
Threads: 82
Joined: Nov 2006
Reputation: 83
#29
03-07-2018, 09:59 PM
(02-21-2017, 10:07 PM)timelord Wrote: Hi vintagedaddyo. The codes you have given works perfect. But I got a little question. Is there a specified code for .post_body? I want to costumize the .post_body for only staff. I'll add;

background: black;
opacity: 0.8;
border-radius: 15px;

and  I want these to be applied only for admins, in .post_body. Thank you!

@timelord
Sorry for the delay in response but I have been away from computers and MyBb for some time.
Do you mean post_body or rather post_content? Either way the css styling could be continued further to suit your likings by following the same type of edits provided previously. You would simply need to expand upon the existing css styling and also further edit the desired areas via posbit and posbit_classic.

* For folks that want something similar to the effect of the working examples I provided previously but would prefer a plugin you could try this: https://community.mybb.com/thread-148832...pid1298691
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Find
Reply
mrdangem Offline
Just got Married
***
Posts: 66
Threads: 9
Joined: Mar 2016
Reputation: 3
#30
04-07-2018, 02:42 AM (This post was last modified: 04-07-2018, 02:42 AM by mrdangem.)
Is it possible to add an image-with-transparent-background like Logo with 50% opacity. to make it more cooler like garena forum.
[Image: generic-theme-user.png]
Website Find
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)