Runde oder Quadratische Avatar-Darstellung im Template V6?
Im Support-Forum ist bereits hierüber geschrieben worden! Im neuen Responsive-Template V6 werden ausschließlich runde Avatare-Darstellungen genutzt, wie sie in neuen Chat-Programmen, wie z.B. MS Teams genutzt werden! Sehr gute Idee! Auch hier werden die Avatar-Bilder mit den Anfangsbuchstaben in einem Kreis dargestellt. Wie man auch aus den Bilder sehen kann, eignen sich runde Avatar-Bilder gut für Portrait-Aufnahmen und Bild-Vorlagen im quadratischen Format (Bild 3) ! Hat man allerdings ein Forum in dem Bilder und Grafiken mit unterschiedlichen Breiten und Höhen zur Geltung kommen, können die Avatar-Bilder sehr unschön und verzerrt aussehen aus (Bild 1, auch Bild 2)!
Mit einigen CSS/SCSS Einträgen kann man die runden Avatar-Bilder etwas aufpolieren. Sie werden dann unverzerrt und nicht mehr oval dargestellt. Die Buchstaben des Gäste-Avatars werden vergrößert und in die Mitte gerückt! Wer möchte kann auch die Quadratische Form wählen. Hier werden die Ränder der Avatar-Bilder nicht mehr abgeschnitten und unverzerrt wiedergegeben. Die Avatar-Bilder bekommen einen Abstand zum Rand!
Im folgenden Beitrag wird gezeigt, wie man im Business-Template die runde Avatar-Darstellung einbaut! Auch ist es möglich die Nickname-Farben mit einzubauen! Die Darstellung funktioniert in den PN's und in den Beiträgen! Zu beachten ist, dass die runde Darstellung nur bei Portraits und zentrierten Bildern gut zur Geltung kommt! Neu! Es ist auch möglich den Avatar-Hintergrund auszublenden. Sieht hier und da optisch besser aus!
1. Runde Avatar-Darstellung mit fester Randfarbe (hier grau):
Da es hier keine Variablen gibt, kann alles in "Eigener CSS Code"!
Die Randfarbe kann in Zeile 2+4 mit "border: 2px solid #aaaaaa" dem Forum angepasst werden!
Die Höhe und Breite sollte quadratisch bleiben und wird über "height" + "width" in Zeile 2+4 bestimmt!
"object-fit: cover" sorgt dafür, dass ungleiche Bilder nicht verzerrt dargestellt werden!
2. Runde Avatar-Darstellung mit Nickname-Randfarbe:
Da hier Variablen benötigt werden, kommt alles als Plugin in den "bottom_header"! Soll die runde Avatar-Darstellung nur in den Beiträgen umgesetzt werden, muss das Skript in den "topic_footer" kopiert werden, Zeile 7+8 kann dann gelöscht werden! Im "topic_header" funktioniert das Skript nicht!
Die Randfarbe wird in Zeile 4+8 mit einer Variablen für die Nickname-Farbe in "border" bestimmt!
Die Höhe und Breite sollte quadratisch bleiben und wird über "height" + "width" in Zeile 4+8 bestimmt!
"object-fit: cover" sorgt dafür, dass Bilder nicht verzerrt dargestellt werden!
3. Runde Avatar-Darstellung mit Online- /Offline-Randfarbe, wie im Xobor (v6):
Da hier Variablen benötigt werden, wird auch hier alles als Plugin in den "bottom_header" kopiert! Soll die runde Avatar-Darstellung nur in den Beiträgen umgesetzt werden, muss das Skript in den "topic_footer" kopiert werden, Zeile 7+8 kann dann gelöscht werden! Im "topic_header" funktioniert das Skript nicht!
Die Randfarbe wird in Zeile 4+8 in "border" bestimmt (hier Grün und Grau)!
Die Höhe und Breite sollte quadratisch bleiben und wird über "height" + "width" in Zeile 4+8 bestimmt!
"object-fit: cover" sorgt dafür, dass Bilder nicht verzerrt dargestellt werden!
Hallo Haviforumstreffpunkt, die Screenshots sind wirklich super und sehr hilfreich! Da kann man gleich sehen, wie Du es gemacht hast! Was genau willst Du haben?
Skript 1: Der Eintrag, den Du gemacht hast, wird nicht als Plugin angelegt, sondern kommt nach "Admin > Layout > CSS > Eigener CSS Code" und bewirkt eine runde Avatardarstellung mit fester Randfarbe! Deswegen hat es auch nicht funktioniert!
Skript 2: Soll die Randfarbe der "Nicknamefarbe" entsprechen, also variabel sein, muss Du Skript 2 als Plugin anlegen, so wie Du es gemacht hast! Sollen die runden Avatare aber auch in den PN's dargestellt werden, muss Du das Plugin nicht im "topic_header", sonder im "bottom_header" anlegen!
PS:
Habe den Beitrag #2 zum besseren Verständnis nochmal überarbeitet!
Nachtrag:
Soll die runde Avatar-Darstellung nur in den Beiträgen installiert werden, muss Skript 2 in den "topic_footer" kopiert werden! Im "topic_header" funktioniert das Skript nicht!
Hallo Haviforumstreffpunkt, habe die Ursache gefunden (bereits per PN verständigt)!
Das Skript ist als Plugin im "topic_header" eingetragen! Da funktioniert das Skript nicht!
Soll die Avatare nur in den Beiträgen gerundet werden, muss das Skript 2 in den "topic_footer" kopieren werden, nicht in den "topic_header"!
Soll die Avatare auch in den PN's gerundet werden, muss das Skript in den "bottom_header"!
Habe alles nochmal ausführlicher in Beitrag #2 geschrieben!
Wenn der Avatar-Rand den Online- Offline-Status, wie im Xobor (v6) anzeigen soll:
Habe hierfür ein Skript 3 in Beitrag #2 eingetragen! Dann gibt es für den Rand nur 2 Farben, z.B. Grün und Grau (Nicht wie mit Skript 2 die unterschiedlichen Nicknamefarben!)
Grün = Online Grau = Offline
Die Einfärbung des Nickname selbst würde erhalten bleiben. Dann wird Online allerdings 2x angezeigt, einmal durch die grüne Grafik und den grünen Rand des Avatarbildes!