Help > Forum > Temas y Apariencia > Cambiar el color de fondo de las publicaciones para grupos de usuarios específicos

Cambiar el color de fondo de las publicaciones para grupos de usuarios específicos

Puedes establecer un color de fondo diferente para las publicaciones de grupos de usuarios específicos. Por ejemplo, puede hacer que el color de fondo sea dorado para las publicaciones de los usuarios del grupo de usuarios General, mientras que las publicaciones de otros usuarios sigan teniendo el color predeterminado. Siga las instrucciones que se indican a continuación:

  1. Inicie sesión en su cuenta de Website Toolbox.
  2. Haga clic en el Integrar enlace.
  3. Haga clic en el HTML enlace.
  4. Copia el código HTML que aparece a continuación y pégalo en el Código HTML de etiqueta de encabezado de foro cuadro de texto:
  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. Cambiar el código de color #f5efd7 en el código anterior con el que necesitas en los tres lugares. #f5efd7 representa el color azul. Clic código hexadecimal para obtener el código de color de un color diferente.
  7. Recupere el ID del grupo de usuarios.
  8. Reemplazar el texto GENERAL-GROUP-ID en el código anterior con el ID del grupo de usuarios recuperado en el paso 6.
  9. Guardar tus cambios.

Este es un ejemplo de una publicación destacada:


If you still need help, please contact us.