Help > Forum > Designs und Erscheinungsbild > Ändern der Hintergrundfarbe von Beiträgen für bestimmte Benutzergruppen

Ändern der Hintergrundfarbe von Beiträgen für bestimmte Benutzergruppen

Sie können eine andere Hintergrundfarbe für Beiträge aus bestimmten Benutzergruppen festlegen. Beispielsweise können Sie die Hintergrundfarbe für Beiträge von Benutzern in der Benutzergruppe Allgemein in Gold festlegen, während Beiträge von anderen weiterhin die Standardfarbe haben. Bitte folgen Sie den Anweisungen unten:

  1. Melden Sie sich bei Ihrem Website Toolbox-Konto an.
  2. Klicken Sie auf Integrieren Link.
  3. Klicken Sie auf HTML Link.
  4. Kopieren Sie den folgenden HTML-Code und fügen Sie ihn in das HTML-Code für den Kopf des Forums Textfeld:
  5. <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>
    
  6. Ändern Sie den Farbcode #f5efd7 im obigen Code mit dem, den Sie an allen drei Stellen benötigen. #f5efd7 repräsentiert die blaue Farbe. Klicken Sie Hex-Code um den Farbcode für eine andere Farbe zu erhalten.
  7. Rufen Sie das ID der Benutzergruppe.
  8. Ersetze den Text GENERAL-GROUP-ID im obigen Code mit der in Schritt 6 abgerufenen ID der Benutzergruppe.
  9. Speichern deine Änderungen.

Hier ist ein Beispiel für einen hervorgehobenen Beitrag:


If you still need help, please contact us.