Utiliser la couleur du groupe sur le profil

Présentation

On va voir comment personnaliser des éléments du profil d'un membre avec sa couleur de groupe dans les messages et sur sa page de profil.



C'est une astuce que j'avais trouvé dans une discussion sur le FdF donné par Milouze14 !

Installation  

Personnalisation des profils dans les messages

CSS
Pour suivre l'exemple donné, on va placer une bordure autour de l'avatar du membre en CSS. Ca sera l'apparence par défaut pour les profils d'invité ou de membre non validé.

Code:

.post_avatar {
  border: 2px solid transparent;
}

Javascript
Puis on utilise du Javascript pour récupérer la couleur et l'appliquer où on veut. Il n'y a pas besoin de toucher à la première partie du code. Ce qui va vous intéresser c'est la dernière ligne :
- on cible l'élément de notre modification : .post_avatar
- on déclare le CSS : .css('borderClr', groupClr) == border-color: groupClr

Pour d'autre propriété, vous pouvez changer borderClr par backgroundClr, color, ...

Code:

// Placement : sur les sujets

$(function(){
    $('.post').each(function(){
        // Récupère la couleur du groupe dans le pseudo
        // Stock dans la variable groupClr
     var groupClr = $(this).find('.post_pseudo span').css('color');
      
        // Sélectionne le container de l'avatar
        // Défini la couleur de la bordure avec la variable (couleur du groupe)
        $(this).find('.post_avatar').css('borderColor', groupClr);
    });
});

Installation  

Personnalisation des profils seuls

CSS
Même chose que précédemment, on configure l'apparence par défaut qu'on veut.

Javascript
Le script est presque similaire mais il est à activer sur toutes les pages.
Note : j'ai pas été la plus maline dans les templates du Blank Theme donc il n'y a pas de container bien défini du pseudo. Dans le code ci-dessous, j'utilise une chaîne de sélecteur pour atteindre le pseudo.

Code:

// Placement : sur toutes les pages

$(function(){
        // Réccupère la couleur du groupe dans le pseudo
        // Stock dans la variable groupClr
        var groupClr = $('.container .page-title span').css('color');
      
        // Sélectionne le container du profil
        // Défini la couleur de la bordure avec la variable (couleur du groupe)
        $('.user_profile').css('borderColor', groupClr);
});

(bonus) Plugin Wombat
Si vous utilisez le Blank Theme et le plugin Wombat vous allez vous rendre compte que le script ne semble pas fonctionner dans votre pop-up. Normal, comme prévu dans la documentation, les scripts qui s'appliquent à la page de profil doivent être réexécutés (voir afterLoad dans les options de la documentation).

Pour cela, rendez vous dans le template overall_footer_end où le script de Wombat est installé puis modifiez le deuxième bloc d'initialisation par le code suivant :

Code:

<!-- Script qui permet d'initialiser le plugin -->
<script>
    (function() {
        new Wombat({
            afterLoad: function(aside, overlay) {
                var groupClr = $(aside).find('.container .page-title span').css('color');
   $(aside).find('.user_profile').css('borderColor', groupClr);
            }
        });
    })();
</script>