Ligne sous l'avatar ?

Salut les gars, je me demandais si quelqu’un savait comment afficher une ligne sous l’avatar. J’ai vu ça sur le forum de Figma et je trouve que ça rend super bien.

1 « J'aime »

Bienvenue paranoya !

(un exemple de lien sigma pour référence : https://forum.figma.com/t/introduce-yourself/102/2)

C’est en effet une belle personnalisation.

Vous pouvez voir comment ils font cela en utilisant ce guide :

Il vous aidera à apporter de nombreuses personnalisations visuelles sur votre forum.

Sur Figma, nous pouvons cibler l’élément de ligne comme ceci :

Ils ont ajouté ceci à leur CSS de thème :

.topic-body:before {
    background-color: var(--surface-high-contrast);
    content: "";
    display: block;
    position: absolute;
    top: 64px;
    left: -26px;
    height: calc(100% - 72px);
    width: 2px;
}

Mais certaines valeurs doivent être ajustées pour qu’elles rendent le mieux sur votre propre forum.

Leur ligne verticale est superbe car ils suppriment également la ligne horizontale entre chaque publication.

.topic-body, .topic-avatar {
    border-top: 0;
    padding-top: 12px;
}

Avec quelques ajustements, vous pouvez obtenir quelque chose comme ça :

1 « J'aime »

Je ne m’attendais pas à avoir une réponse aussi rapidement. Merci beaucoup !

2 « J'aime »

De rien, nous sommes là pour vous aider ! :hugs:

2 « J'aime »

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