Help

Help > Forum > Thèmes et apparence > Modification de la couleur d'arrière-plan des publications pour des groupes d'utilisateurs spécifiqu

Modification de la couleur d'arrière-plan des publications pour des groupes d'utilisateurs spécifiqu

Vous pouvez définir une couleur d'arrière-plan différente pour les publications de groupes d'utilisateurs spécifiques. Par exemple, vous pouvez faire en sorte que la couleur d'arrière-plan soit dorée pour les publications des utilisateurs du groupe d'utilisateurs Général, tandis que les publications des autres utilisateurs conservent la couleur par défaut. Veuillez suivre les instructions ci-dessous :

  1. Connectez-vous à votre compte Website Toolbox.
  2. Cliquez sur Intégrer lien.
  3. Cliquez sur Code personnalisé lien.
  4. Copiez le code HTML ci-dessous et collez-le dans Code HTML de la balise d'en-tête du forum zone de texte :
  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. Modifier le code couleur #f5efd7 dans le code ci-dessus avec celui dont vous avez besoin aux trois endroits. #f5efd7 représente la couleur bleue. Cliquez code hexadécimal pour obtenir le code couleur d'une couleur différente.
  7. Récupérez le ID du groupe d'utilisateurs.
  8. Remplacer le texte IDENTIFIANT DE GROUPE GÉNÉRAL dans le code ci-dessus avec l'identifiant du groupe d'utilisateurs récupéré à l'étape 6.
  9. Enregistrer vos modifications.

Voici un exemple de billet surligné :


If you still need help, please contact us.