Wählen Sie die Avatar-Größe auf der Seite „Neueste". Der Standardwert ist „klein" (25px). Um die Änderungen zu sehen, aktualisieren Sie die Seite mit Strg+F5 oder Cmd+Shift+R.
topic avatars size
Wählen Sie die Avatar-Größe in Themen. Der Standardwert ist 45px. Um die Änderungen zu sehen, aktualisieren Sie die Seite mit Strg+F5 oder Cmd+Shift+R.
header avatars size
Wählen Sie die Avatar-Größe in der Kopfzeile. Der Standardwert ist 32px. Um die Änderungen zu sehen, aktualisieren Sie die Seite mit Strg+F5 oder Cmd+Shift+R.
header height
Wählen Sie die Höhe der Kopfzeile. Die Wahl muss auf Basis von header_avatars_size + 10px getroffen werden. Wenn beispielsweise header_avatars_size auf 90px eingestellt ist, sollte die Kopfzeile 100px hoch sein. Der Standardwert ist 60px.
margin top
Wählen Sie den Abstand in Pixeln von der Kopfzeile. Der Standardwert ist 0px.
avatars border radius
Wählen Sie den Border-Radius der Avatare auf der Website. Die Einstellung wird auf alle Avatare angewendet, einschließlich des Avatars in der Kopfzeile und des Avatars in der Benutzerkarte. 0% entspricht einer quadratischen Form, 50% einer abgerundeten Form. Der Standardwert beträgt 50%.
mobile avatars size
Wählen Sie die Avatar-Größe in Themen auf Mobilgeräten. Der Mindestwert ist 45px (Standard), der Höchstwert ist 80px. Um die Änderungen zu sehen, aktualisieren Sie die Seite mit Strg+F5 oder Cmd+Shift+R.
Zusätzliche Details:
latest avatar size ändert die Avatar-Größe auf der Seite /latest. Alle Avatare sind bis zur Größe „medium" sichtbar. Ab „large" wird nur der Avatar des letzten Benutzers angezeigt, der im Thema geschrieben hat.
header avatar size funktioniert gut bis zur Größe 60px. Für Avatare größerer Größe muss die Höhe der Kopfzeile erhöht werden (header height), und folglich muss auch der margin top erhöht werden, der die Kopfzeile von den anderen Elementen der Seite entfernt.
Die Position (in der Höhe) der Benachrichtigungsblase (Themen und PN) bleibt unverändert. Diese Blasen bewegen sich nur horizontal entsprechend der Avatar-Größe.
Entwicklungshistorie
Dieses Theme-Modul wurde inspiriert von den folgenden Leitfäden erstellt:
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…
Von uns gehostet? Theme-Module stehen in unseren Plänen Standard, Business und Enterprise zur Verfügung.
