Help

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 von bestimmten Benutzergruppen festlegen. Beispielsweise können Sie die Hintergrundfarbe für Beiträge von Benutzern der Benutzergruppe Allgemein in Gold festlegen, während Beiträge anderer Benutzer weiterhin in der Standardfarbe angezeigt werden. Bitte folge den nachstehenden Anweisungen:

  1. Loggen Sie sich in Ihr Website Toolbox-Konto ein.
  2. Klicken Sie auf Integrieren Link.
  3. Klicken Sie auf Benutzerdefinierter Code Link.
  4. Kopieren Sie den folgenden HTML-Code und fügen Sie ihn in das HTML-Code für Forenüberschrift Textfeld:
  5. <style>
    .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 steht für die blaue Farbe. Klicken Sie hexadezimaler Code um den Farbcode für eine andere Farbe zu erhalten.
  7. Rufen Sie die ID der Benutzergruppe.
  8. Ersetze den Text ALLGEMEINE GRUPPEN-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.