Linha sob o avatar?

Dev
1

Oi pessoal, eu estava pensando se alguém sabe como exibir uma linha sob o avatar. Eu vi isso no fórum do Figma e acho que ficou muito legal.

1 curtida
2

Bem-vindo, paranoya!

(um link de exemplo do Figma para referência: https://forum.figma.com/t/introduce-yourself/102/2)

É realmente uma boa personalização.

Você pode ver como eles fazem isso usando este guia:

Isso o ajudará a fazer muitas personalizações visuais em seu fórum.

No Figma, podemos direcionar o elemento de linha assim:

image
image2498×1440 288 KB

Eles adicionaram isso ao CSS do tema deles:

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

Mas alguns valores precisam ser ajustados para que fiquem melhores em seu próprio fórum.

A linha vertical deles fica ótima porque eles também removem a linha horizontal entre cada postagem.

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

Com um pequeno ajuste, você pode conseguir algo assim:

image
image825×1179 60.3 KB

1 curtida
3

Não esperava ter uma resposta tão rápida. Muito obrigado!

2 curtidas
4

De nada, estamos aqui para ajudar! :hugs:

2 curtidas
5

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