Changing background color of posts for specific user groups

You can set a different background color for posts from specific user groups. For example, you can make the background color gold for posts from users in the General user group while posts from others are still in the default color. Please follow the directions below:

1. Log in to your Website Toolbox account.
2. Click the Integrate link.
3. Click the HTML link.
4. Copy the HTML code below and paste it into the Forum Head Tag HTML Code text box:

<style>e
.post-body.wt-general-post {
    background-color: #f5efd7;
}
.post-author.wt-general-post .post-arrow {
    border-right-color: #f5efd7;
}
@media (max-width: 720px) {
    .post-author.wt-general-post {
        background-color: #f5efd7;
    }
}
</style>
<script>
var groupCustomClass = {
        'GENERAL-GROUP-ID' : 'wt-general-post'
    };
    function changePostBackgroundColor() {
        if(jQ('.post-body-wrapper').length) {
            jQ('.post-body-wrapper .post-body-author .display_name a').each(function( index ) {
                var postAutherDivId;
                var postDivId = jQ(this).closest('.post-body').attr('id');
                if(typeof postDivId != "undefined" && postDivId != "" && postDivId.indexOf('post_list_') > -1) {
                    postAutherDivId = postDivId.replace(/post_list_/g,"post_row_");
                }
                if(typeof postAutherDivId != "undefined" && postAutherDivId != "") {
                    var className = jQ(this).attr('class');
                    var classArray = className.split(' ');
                    jQ.each(classArray, function(index, value) {
                      if(typeof value != "undefined" && value != "" && value.indexOf('usergroup') > -1) {
                        var groupid = value.replace(/usergroup/g,"");
                        console.log("=groupid="+groupid+"=postAutherDivId="+postAutherDivId+"=class="+groupCustomClass[groupid]+"=end=");
                        if(typeof groupid != "undefined" && groupid != "" && groupid) {
                            jQ('#'+postDivId+'').addClass(groupCustomClass[groupid]);
                            jQ('#'+postAutherDivId+' .post-author').addClass(groupCustomClass[groupid]);
                            return false;
                        }
                      }
                    });
                }
            });
        }
    }
    // Change post back ground color when DOM loaded.
    window.addEventListener("DOMContentLoaded", function(){
        changePostBackgroundColor();
    });
    // Change post back ground color when create a post.
    document.addEventListener('replyPosted', function(event) {
        changePostBackgroundColor();
    });
    // Change post back ground color when edit a post.
    document.addEventListener('postEdited', function(event) {
        changePostBackgroundColor();
    });
</script>

5. Change the color code #f5efd7 in the code above with the one you need at all three places. #f5efd7 represents the blue color. Click hex code to get the color code for a different color.
6. Retrieve the user group's ID.
7. Replace the text GENERAL-GROUP-ID in the code above with the user group's ID retrieved in step 6.
8. Save your changes.

Here's an example of a highlighted post:

If you still need help, please contact us.