Superposer un avatar sur la couverture

Dev
1

Est-il possible de superposer un avatar sur une bannière de manière similaire ? Si oui, il faut en même temps désactiver la possibilité de masquer la bannière

image
image1097×655 60.4 KB

2

Pouvez-vous essayer ce CSS ? À insérer dans votre thème ou dans le CSS d’un nouveau composant.

.user-main:has(.has-background .user-profile-image) {
    $avatar_size: 144px;
    $avatar_margin: 20px;
    $avatar_border_size: medium;
    
    .user-profile-avatar {
        position: absolute;
        top: calc(-#{$avatar_size} / 2 - $avatar_margin);
        left: $avatar_margin; 
        
        img.avatar {
            background: var(--secondary);
            border-width: $avatar_border_size;
        }
    }
    
    .primary-textual {
        margin-left: calc($avatar_size + $avatar_margin * 2);
    }
}

Quel est votre thème ? Il pourrait nécessiter quelques ajustements.

3

Thème FKB Pro.
Comment puis-je ajouter ou modifier du CSS ici ?

image
image1449×833 54.1 KB

4

La méthode recommandée est de créer un nouveau composant, de le joindre à votre thème, puis vous pouvez Modifier CSS/HTML là-bas. :+1:

image

image
image598×301 4.25 KB

image
image629×466 14.4 KB

5

Merci ! Ça fonctionne

image
image1098×431 43.4 KB

Mais si la couverture est masquée, l’avatar ne s’affichera pas non plus. Comment puis-je désactiver la possibilité de masquer la couverture ?
image
image1082×194 9.32 KB

6

J’ai mis à jour le CSS ci-dessus, pouvez-vous réessayer ?

Ça a l’air bien de mon côté maintenant :

image
image463×217 31.7 KB

image
image259×105 6.36 KB

7

image
image1133×265 15.1 KB

:partying_face:

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.