Escolha o tamanho do avatar na página “Mais Recente”. O valor padrão é pequeno (25px). Para ver as alterações aplicadas, atualize a página com Ctrl+F5 ou Cmd+Shift+R.
tamanho dos avatares nos tópicos
Escolha o tamanho do avatar 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.
tamanho dos avatares no cabeçalho
Escolha o tamanho do avatar 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.
altura do cabeçalho
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 for definido como 90px, o cabeçalho deve ter 100px. O valor padrão é 60px.
margem superior
Escolha a distância em px a partir do cabeçalho. O valor padrão é 0px.
raio da borda dos avatares
Escolha o raio da borda dos avatares no site. A configuração será aplicada a todos os avatares, incluindo o do cabeçalho e o do cartão do usuário. 0% corresponde a uma forma quadrada, 50% a uma forma arredondada. O valor padrão é 50%.
tamanho dos avatares no mobile
Escolha o tamanho do avatar nos tópicos no Mobile. O valor mínimo é 45px (padrão) e o máximo é 80px. Para ver as alterações aplicadas, atualize a página com Ctrl+F5 ou Cmd+Shift+R.
Detalhes adicionais:
tamanho do avatar mais recente altera o tamanho do avatar na página /latest. Todos os avatares serão visíveis até o tamanho médio. A partir de grande, apenas o avatar do último usuário que escreveu no tópico será exibido.
tamanho do avatar do cabeçalho funciona bem até o tamanho de 60px. Para avatares de tamanho maior, a altura do cabeçalho deve ser aumentada (altura do cabeçalho) e, consequentemente, a margem superior que distancia o cabeçalho dos outros elementos da página também deve aumentar (margem superior).
A posição (em altura) da bolha de notificação (tópicos e MP) permaneceu inalterada. Essas bolhas se moverão apenas horizontalmente, seguindo o tamanho do avatar.
Histórico de Desenvolvimento
Este componente de tema foi escrito inspirado 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.
