Scegli la dimensione degli avatar nella pagina “Ultimi”. Il valore predefinito è piccolo (25px). Per vedere le modifiche applicate, aggiorna la pagina con ctrl+F5 o cmd+shift+R.
dimensione avatar argomenti
Scegli la dimensione degli avatar negli argomenti. Il valore predefinito è 45px. Per vedere le modifiche applicate, aggiorna la pagina con ctrl+F5 o cmd+shift+R.
dimensione avatar intestazione
Scegli la dimensione degli avatar nell’intestazione. Il valore predefinito è 32px. Per vedere le modifiche applicate, aggiorna la pagina con ctrl+F5 o cmd+shift+R.
altezza intestazione
Scegli l’altezza dell’intestazione. La scelta deve essere basata su header_avatars_size + 10px. Ad esempio, se header_avatars_size è impostato a 90px, l’intestazione dovrebbe essere 100px. Il valore predefinito è 60px.
margine superiore
Scegli la distanza in px dall’intestazione. Il valore predefinito è 0px.
raggio bordo avatar
Scegli il raggio del bordo degli avatar sul sito. L’impostazione verrà applicata a tutti gli avatar, incluso quello nell’intestazione e quello nella scheda utente. 0% corrisponde a una forma quadrata, 50% a una forma arrotondata. Il valore predefinito è 50%.
dimensione avatar mobile
Scegli la dimensione degli avatar negli argomenti su Mobile. Il valore minimo è 45px (predefinito), il massimo è 80px. Per vedere le modifiche applicate, aggiorna la pagina con ctrl+F5 o cmd+shift+R.
Dettagli aggiuntivi:
dimensione avatar ultimi modifica la dimensione degli avatar nella pagina /latest. Tutti gli avatar saranno visibili fino alla dimensione media. Da grande in poi, verrà visualizzato solo l’avatar dell’ultimo utente che ha scritto nell’argomento.
dimensione avatar intestazione funziona bene fino alla dimensione di 60px. Per avatar di dimensioni maggiori, l’altezza dell’intestazione deve essere aumentata (altezza intestazione) e, di conseguenza, anche il margine superiore che distanzia l’intestazione dagli altri elementi della pagina deve aumentare (margine superiore).
La posizione (in altezza) della bolla delle notifiche (argomenti e MP) è rimasta invariata. Queste bolle si sposteranno solo orizzontalmente seguendo la dimensione degli avatar.
Storia dello sviluppo
Questo componente del tema è stato scritto ispirandosi alle guide
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.
very cool
wish I could set the topic avatar size to 53 though
Also does this apply to avatars in the topic-poster div found on some front page category arrangments? It doesn’t seem to but it would be cool if it did.
@dax Ho trovato un piccolo problema che entra in conflitto con il plugin Quick Messages.
Il seguente CSS prende di mira anche il badge di notifica del plugin Quick Messages:
.d-header-icons .unread-private-messages {
right: auto;
left: -10%; /* <--- questo è il colpevole */
}
Grazie Daniela, ho un’altra suggerimento. Sarebbe ottimo se ci fosse un’opzione per mantenere gli avatar delle risposte attivi per le dimensioni large o extra_large, così da poter ridurne le dimensioni tramite CSS. Oppure un’opzione per ridurre direttamente le dimensioni degli avatar delle risposte nel plugin. Sto cercando di ottenere questo risultato, ma naturalmente l’avatar più grande risulta sfocato a causa dell’ingrandimento dell’avatar di dimensioni medie.
@Dax L’unico problema che vedo al momento è nell’intestazione, che ha un colore più scuro. L’effetto hover è impostato su bianco e funziona bene sul pulsante di ricerca e sul menu hamburger, ma quando l’avatar è impostato su una dimensione leggermente più grande, la dimensione dell’effetto hover è più piccola rispetto all’avatar. Come potrei risolvere questo problema?
Questo componente non modifica in alcun modo i colori del sito; deve trattarsi di un altro tema che stai utilizzando per sovrascrivere i colori di sfondo.
Ottimo componente.
Facilita il controllo delle dimensioni e dell’aspetto del tuo avatar senza modificare il CSS del tuo tema (cosa che potrebbe causare problemi durante gli aggiornamenti del tema).
@dax Forse non mi sono espresso molto bene. Non si tratta del colore, ma delle dimensioni del contenitore. Se passi il mouse sopra la tua icona dell’avatar in alto a destra nella pagina qui su meta, appare un quadrato colorato con una proprietà :hover, e il quadrato è più grande dell’avatar.
Tuttavia, se ingrandisco l’avatar con questo plugin, le dimensioni del quadrato :hover diventano ora più piccole dell’avatar e l’aspetto risulta un po’ strano.
Modificando l’altezza di quel div, anche le altre due icone devono essere riposizionate. Per questo motivo ho preferito non farlo. Per ora rendo solo il colore del div trasparente al passaggio del mouse.
A proposito, sono riuscito a ottenere un effetto abbastanza carino in CSS, aggiungendo uno stato :hover all’avatar (bordo bianco). Ora, se solo riuscissi a evitare che lo sfondo dell’elemento li si evidenzi insieme al resto…
Ospitato da noi? I componenti del tema sono disponibili per l’uso sui nostri piani Standard, Business ed Enterprise.
