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 I found a small issue which collides with the Quick Messages plugin.
The following CSS comes targets the badge notification of the quick messages plugin as well:
.d-header-icons .unread-private-messages {
right: auto;
left: -10%; /* <--- this is the culprit*/
}
Thank you Daniela, I have one more suggestion. It would be great if there was an option to either leave the reply avatars on for large or extra_large so I can reduce the size via css. Or an option to reduce the size of the reply avatars in the plugin. I’m trying to achieve this, but of course the larger avatar is blurry from upsizing the medium size avatar.
@Dax Only problem I’m seeing right now is in the header which is a darker color. The hover is set to white which works fine on the search button and on the hamburger menu, but when the avatar is set to a slightly larger size, the size of the hover is smaller than the avatar. How would I go about fixing that?
Great component.
It makes it easy to control the size and aspecto of your avatar without changing CSS of you theme (that may give problems upgrading the theme).
@dax Maybe I did not explain myself very well. It’s not about the color, it’s about the size of the container. If you hover over your own avatar icon in the upper right corner of the page here on meta, you get a colored square with a :hover property, and the square is bigger than the avatar.
However, if I enlarge the avatar with this plugin, the size of the :hover square is now smaller than the avatar and looks a little wonky.
By changing the height of that div, the other two icons must also be repositioned. For this reason I had preferred not to. For now I only make the color of the div on hover transparent.
As a side note, I was able to get a pretty good looking effect in CSS in terms of having a :hover state on the avatar (white border). Now if I could just get the background of the li element to not highlight with the rest of it…
Ospitato da noi? I componenti del tema sono disponibili per l’uso sui nostri piani Standard, Business ed Enterprise.
