Escolha o tamanho do avatar na página “latest”. O valor padrão é pequeno (25px). Para ver as alterações aplicadas, atualize a página com ctrl+F5 ou cmd+shift+R.
topic avatars size
Escolha o tamanho dos avatares nos tópicos. O valor padrão é 45px. Para ver as alterações aplicadas, atualize a página com ctrl+F5 ou cmd+shift+R.
header avatars size
Escolha o tamanho dos avatares no cabeçalho. O valor padrão é 32px. Para ver as alterações aplicadas, atualize a página com ctrl+F5 ou cmd+shift+R.
header height
Escolha a altura do cabeçalho. A escolha deve ser feita com base no header_avatars_size + 10px. Por exemplo, se o header_avatars_size estiver definido como 90px, o cabeçalho deve ter 100px. O valor padrão é 60px.
margin top
Escolha a distância em px a partir do cabeçalho. O valor padrão é 0px.
avatars border radius
Escolha o border-radius dos avatares no site. A configuração será aplicada a todos os avatares, incluindo o do cabeçalho e o do user-card. 0% corresponde a uma forma quadrada, 50% a uma forma arredondada. Valor padrão de 50%
mobile avatars size
Escolha o tamanho dos avatares nos tópicos no celular. O valor mínimo é 45px (padrão), o valor máximo é 80px. Para ver as alterações aplicadas, atualize a página com ctrl+F5 ou cmd+shift+R.
Detalhes adicionais:
latest avatar size altera o tamanho do avatar na página /latest. Todos os avatares serão visíveis até o tamanho medium. A partir do tamanho large, apenas o avatar do último usuário que escreveu no tópico será exibido.
header avatar size funciona bem até o tamanho de 60px. Para avatares de tamanho maior, a altura do cabeçalho deve ser aumentada (header height) e, consequentemente, o margin-top que distancia o cabeçalho dos outros elementos da página também deve aumentar (margin top).
A posição (em altura) da bolha de notificação (tópicos e MP) permaneceu inalterada. Essas bolhas só se moverão horizontalmente conforme o tamanho do avatar.
Histórico de Desenvolvimento
Este componente de tema foi escrito inspirando-se nos guias
How would I go about changing the size of the topic avatar on mobile with this? 80px looks pretty good on desktop, but obnoxious on mobile. I tried changing .topic-avatar width but it just shifts the text and the avatar stays the same.
Muito legal
queria poder definir o tamanho do avatar do tópico para 53, mas
Além disso, isso se aplica aos avatares no div topic-poster encontrado em algumas disposições de categoria na página inicial? Não parece, mas seria legal se fosse.
@dax Encontrei um pequeno problema que entra em conflito com o plugin Quick Messages.
O seguinte CSS também afeta a notificação de badge do plugin Quick Messages:
.d-header-icons .unread-private-messages {
right: auto;
left: -10%; /* <--- este é o culpado */
}
Talvez seja necessário adicionar algum elemento #… ao seletor CSS.
Obrigado, Daniela, tenho mais uma sugestão. Seria ótimo se houvesse uma opção para manter os avatares de resposta ativados para os tamanhos large ou extra_large, permitindo que eu reduza o tamanho via CSS. Ou então uma opção para reduzir o tamanho dos avatares de resposta diretamente no plugin. Estou tentando conseguir isso, mas, claro, o avatar maior fica borrado por causa do redimensionamento do avatar de tamanho médio.
@Dax O único problema que estou vendo agora é no cabeçalho, que tem uma cor mais escura. O hover está definido como branco, o que funciona bem no botão de pesquisa e no menu hambúrguer, mas quando o avatar é definido para um tamanho ligeiramente maior, o tamanho do hover fica menor que o avatar. Como eu faria para corrigir isso?
Ótimo componente.
Facilita o controle do tamanho e da proporção do seu avatar sem alterar o CSS do seu tema (o que pode causar problemas na atualização do tema).
@dax Talvez eu não me tenha explicado muito bem. Não se trata da cor, mas sim do tamanho do contêiner. Se você passar o mouse sobre o ícone do seu próprio avatar no canto superior direito da página aqui no meta, aparecerá um quadrado colorido com a propriedade :hover, e o quadrado é maior que o avatar.
No entanto, se eu aumentar o avatar com este plugin, o tamanho do quadrado :hover agora fica menor que o avatar e parece um pouco estranho.
Ao alterar a altura daquele div, os outros dois ícones também precisam ser reposicionados. Por esse motivo, eu preferi não fazer isso. Por enquanto, eu apenas tornei a cor do div transparente ao passar o mouse.
Como observação adicional, consegui um efeito bastante atraente em CSS ao adicionar um estado :hover ao avatar (borda branca). Agora, se eu pudesse apenas fazer com que o fundo do elemento li não ficasse destacado junto com o restante…
Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.
