Wählen Sie die Avatar-Größe auf der Seite „Neueste“. Standardwert ist klein (25px). Um die Änderungen zu sehen, laden Sie die Seite mit Strg+F5 oder Cmd+Shift+R neu.
Avatar-Größe in Themen
Wählen Sie die Avatar-Größe in Themen. Standardwert ist 45px. Um die Änderungen zu sehen, laden Sie die Seite mit Strg+F5 oder Cmd+Shift+R neu.
Avatar-Größe im Header
Wählen Sie die Avatar-Größe im Header. Standardwert ist 32px. Um die Änderungen zu sehen, laden Sie die Seite mit Strg+F5 oder Cmd+Shift+R neu.
Header-Höhe
Wählen Sie die Höhe des Headers. Die Wahl sollte basierend auf der header_avatars_size + 10px getroffen werden. Wenn beispielsweise die header_avatars_size auf 90px gesetzt ist, sollte der Header 100px hoch sein. Standardwert ist 60px.
Abstand oben
Wählen Sie den Abstand in Pixeln vom Header. Standardwert ist 0px.
Avatar-Randradius
Wählen Sie den border-radius der Avatare auf der Website. Die Einstellung wird auf alle Avatare angewendet, einschließlich des Avatars im Header und des Avatars in der Benutzerkarte. 0 % entspricht einer quadratischen Form, 50 % einer abgerundeten Form. Standardwert ist 50 %.
Mobile Avatar-Größe
Wählen Sie die Avatar-Größe in Themen auf Mobilgeräten. Mindestwert ist 45px (Standard), Maximalwert ist 80px. Um die Änderungen zu sehen, laden Sie die Seite mit Strg+F5 oder Cmd+Shift+R neu.
Zusätzliche Details:
latest avatar size ändert die Avatar-Größe auf der /latest-Seite. Alle Avatare sind bis zur Größe medium sichtbar. Ab der Größe large wird nur der Avatar des letzten Benutzers angezeigt, der im Thema geschrieben hat.
header avatar size funktioniert gut bis zur Größe von 60px. Für Avatare einer größeren Größe muss die Höhe des Headers erhöht werden (header height) und folglich muss auch der margin-top, der den Header von den anderen Elementen der Seite entfernt, erhöht werden (margin top).
Die Position (in der Höhe) der Benachrichtigungsblase (Themen und PMs) ist unverändert geblieben. Diese Blasen werden sich nur horizontal in Abhängigkeit von der Avatar-Größe bewegen.
Entwicklungsgeschichte
Diese Theme-Component wurde unter Inspiration aus den folgenden Leitfäden geschrieben:
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.
Sehr cool! Schade, dass ich die Avatargröße für Themen auf 53 einstellen könnte
Gilt das auch für Avatare im topic-poster-Div, das bei einigen Anordnungen der Kategorien auf der Startseite vorkommt? Es scheint nicht so zu sein, aber es wäre cool, wenn es so wäre.
@dax Ich habe ein kleines Problem gefunden, das mit dem Quick Messages-Plugin kollidiert.
Der folgende CSS-Code zielt auch auf die Benachrichtigungsabzeichen des Quick Messages-Plugins ab:
.d-header-icons .unread-private-messages {
right: auto;
left: -10%; /* <--- das ist die Ursache */
}
Vielleicht könntest du ein #…-Element zum CSS-Selektor hinzufügen.
Danke, Daniela, ich habe noch einen weiteren Vorschlag. Es wäre toll, wenn es eine Option gäbe, die Antwort-Avatare für ‘large’ oder ‘extra_large’ beizubehalten, sodass ich die Größe per CSS anpassen kann. Oder eine Option, um die Größe der Antwort-Avatare im Plugin zu verringern. Ich versuche, dies zu erreichen, aber natürlich ist der größere Avatar unscharf, da das mittlere Avatar-Bild hochskaliert wurde.
@Dax Das einzige Problem, das ich gerade sehe, betrifft den Header, der eine dunklere Farbe hat. Der Hover-Effekt ist auf Weiß eingestellt, was beim Suchbutton und beim Hamburger-Menü gut funktioniert. Wenn das Avatar-Bild jedoch etwas größer eingestellt ist, ist die Größe des Hover-Effekts kleiner als das Avatar-Bild selbst. Wie könnte ich das beheben?
Diese Komponente ändert die Farben der Website in keiner Weise. Es muss ein anderes von Ihnen verwendetes Theme sein, das die Hintergrundfarben überschreibt.
Großartige Komponente.
Sie ermöglicht es, die Größe und das Seitenverhältnis Ihres Avatars einfach zu steuern, ohne das CSS Ihres Themes zu ändern (was beim Aktualisieren des Themes Probleme verursachen könnte).
@dax Vielleicht habe ich mich nicht sehr gut ausgedrückt. Es geht nicht um die Farbe, sondern um die Größe des Containers. Wenn du auf dein eigenes Avatar-Symbol in der oberen rechten Ecke der Seite hier auf Meta fährst, erscheint ein farbiges Quadrat mit einer :hover-Eigenschaft, und das Quadrat ist größer als der Avatar.
Wenn ich jedoch den Avatar mit diesem Plugin vergrößere, ist die Größe des :hover-Quadrats nun kleiner als der Avatar und sieht etwas seltsam aus.
Durch Ändern der Höhe dieses Divs müssen die beiden anderen Symbole ebenfalls neu positioniert werden. Aus diesem Grund hatte ich es vorgezogen, dies nicht zu tun. Vorläufig mache ich die Farbe des Divs beim Hovern transparent.
Als Randnotiz: Ich habe in CSS einen recht gut aussehenden Effekt erzielt, indem ich einen :hover-Zustand für den Avatar (weißer Rand) hinzugefügt habe. Wenn ich es nur noch schaffen könnte, dass der Hintergrund des li-Elements nicht mit dem Rest hervorgehoben wird…
Von uns gehostet? Theme-Components sind auf unseren Standard-, Business- und Enterprise-Plänen verfügbar.
