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.
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-Module stehen in unseren Plänen Standard, Business und Enterprise zur Verfügung.
