-67%
Le deal à ne pas rater :
Carte Fnac+ à 4,99€ au lieu de 14,99€ (nouveaux clients / ...
4.99 € 14.99 €
Voir le deal


Utiliser la couleur du groupe sur le profil

Kim

Kim

En ligne

Pronoun(s) : Elle/she
Messages : 170

   

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.




Kim

Intermédiaire

CSS/Javascript

Oui

 

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

Kim

En ligne

Pronoun(s) : Elle/she
Messages : 170

   

Installation  (message)



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('borderColor', groupColor) == border-color: groupColor


Pour d'autre propriété, vous pouvez changer borderColor par backgroundColor, 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 groupColor = $(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', groupColor);
    });
});
Kim

Kim

En ligne

Pronoun(s) : Elle/she
Messages : 170

   

Installation (profils)



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 groupColor = $('.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', groupColor);
});

(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 groupColor = $(aside).find('.container .page-title span').css('color');
                $(aside).find('.user_profile').css('borderColor', groupColor);
            }
        });
    })();
</script>
Contenu sponsorisé


En ligne