Runde Avatare

11.07.2020 14:56
#1 Runde Avatare
avatar
User

Hallo @Ingmar,

ich adde Dich hier mal, da ich in PN keine Dateien anhängen kann. Ich habe jetzt in meinem Forum: http://www.garten-der-poesie.de/

nach Deiner Anleitung die runden Avatare eingebaut:

1
2
3
4
5
6
 
/*Runde Avatare*/
.messageAvatar img {
border-radius: 50%;
height: 120px;
width: 120px;
}
 



Das hat auch wunderbar geklappt, habe aber jetzt 2 Schönheitsprobleme, dazu die Screens:



Links ein selbstgezeichnetes Ava und rechts eines höher ist als breit, alle anderen sind eigentlich passend, diese beiden werden leider sehr unschön und haben mit rund nicht viel zu tun

Frage: Kann ich dagegen etwas tun, respektive ändern und wenn ja, wie. Oder muss ich denen, wo die Avas nicht passen, sagen dass sie ein anderes Einstellen sollen? Wie gross müssen denn die überhaupt sein, damit alle gleichmässig passen?

Ist das normal, dass die Avas nur in Beiträgen rund angezeigt werden, in PN's nicht, jedenfalls bei mir? Also nur in Ansicht und Beiträgen? Oder lässt sich das irgendwie noch ändern?

Würde mich freuen, wenn Du mal Zeit findest, mir zu antworten, mit lieben Grüssen

Gabi


 Antworten

 Beitrag melden
11.07.2020 16:44
avatar  Ingmar
#2 RE: Runde Avatare
avatar
Technik

Eine schöne Lösung gibt es da eigentlich nicht.

Du könntest theoretisch dafür sorgen, dass die Bilder breiter angezeigt werden - dann werden sie aber entweder verzerrt oder in der Höhe beschnitten, was auch nicht gerade hübsch ist.

Wirklich hilft es da nur die Avatare im Format zu ändern - also am besten direkt quadratische Avatare hochzuladen.


 Antworten

 Beitrag melden
11.07.2020 20:55
#3 RE: Runde Avatare
avatar
User

Alles klar Ingmar,

was ist mit dem Rest meiner Frage, so gewollt, dass die nur in Beiträgen rund angezeigt werden?

Dankeschön


 Antworten

 Beitrag melden
11.07.2020 21:37
#4 RE: Runde Avatare
avatar
User

Gabriella ich habe das so gelöst bei mir, da sind die dann auch rund bei PN
im Bussines Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
.umavatar img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100px;
margin: auto;
position: relative;
width: 100px;
background: transparent no-repeat scroll center center / cover;
border-radius: 50%;
box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4);
border: 3px solid #f8f9fa;
vertical-align: middle;
}
 


 Antworten

 Beitrag melden
12.07.2020 08:41
#5 RE: Runde Avatare
avatar
User

Guten Morgen Edeltraud,

vielen Dank für das Script wo genau hast Du denn dieses lange Script eingesetzt? Was wird denn da noch alles angesprochen, ausser den runden Avataren? Wenn man den Code von Ingmar betrachtet, spricht der nur die Avatare an, Deiner aber auch Hintergrund, Rand, usw.

Das ist mir zu heikel, wenn ich nicht genau weiss, was der Code macht. Nicht, dass ich danach mein ganzes Forum zerschiesse. Weil ich will da vorläufig nur die runden Avatare haben. Templatewechsel mache ich dann erst, wenn man das V6 auch kopieren kann, was man zurzeit noch nicht kann. Erst dann will ich vom Business auf V6, 1:1 wechseln.


 Antworten

 Beitrag melden
12.07.2020 16:23
#6 RE: Runde Avatare
avatar
User

Hallo @Ingmar,

ich habe das Problem jetzt gelöst, indem ich die beiden Werte so erhöht habe, wie ich Sie auch in den Einstellungen erlaubt habe, nämlich 200x200.
Die nicht passenden Avatare, habe ich kleiner gemacht, es sind nur 5 und jetzt sind sie auch passend.

Jetzt hast Du ja hier im Support Forum noch einen Kreis darum, grün, oder weiss, ich nehme mal an on, oder off? Kann ich das bei mir auch machen und verrätst Du mir vielleicht wie?

Muss ich da noch etwas Bestimmtes ansprechen, wenn ich die runden Avas auch in den PN sehen will, denn dort werden Sie eckig angezeigt, wie vorher auch. Hier im Support werden gar keine Avas angezeigt, nur wer der Absender ist. Das würde ich auch nicht schlecht finden ;)

@ Liebe Edeltraud, Dein Script habe ich ausprobiert, das bewirkt bei mir leider gar nichts. Vielen Dank trotzdem


 Antworten

 Beitrag melden
13.07.2020 06:24
#7 RE: Runde Avatare
avatar
User

Bei mir funktioniert das und rein kommt das klar in CSS.

Ich habe echt schon so viel gemacht und noch nie mein Forum
zerschossen, egal ob in CSS Kopf oder Fußzeile.

Ich sorge da immer vor und kopiere mir vorab den alten Zustand,
den ich nachher dann wieder herstellen kann.

LG Edeltraud


 Antworten

 Beitrag melden
13.07.2020 07:56
avatar  844er
#8 RE: Runde Avatare
avatar
User

Moin

Habt ihr diesen Beitrag schon mal gelesen ? Etwas Makeup für die Avatare
Vielleicht hilft das weiter...

Gruß 844er


 Antworten

 Beitrag melden
13.07.2020 08:47
#9 RE: Runde Avatare
avatar
User

Danke 844,

eben gesehen, das war gestern noch nicht da.

Edeltraud, da kann ich nix für, wenn das bei mir nichts bewirkt. Ich hatte es sehr wohl in der CSS. Ich gehe jetzt schauen, was Wolfgang da wieder schönes gezaubert hat. Und wie gesagt, ich beziehe mich hier auf das, was Ingmar mir gegeben hat. Darum habe ich auch Ihn angesprochen, auch wenn es in Fragen und Antworten steht. Normalerweise schreibe ich Ihm sonst eine PN, aber da er sehr beschäftigt ist, hat er gesagt, ich soll solches ins Support Forum stellen. Es geht ansonsten als PN meist verloren/vergessen.


 Antworten

 Beitrag melden
14.07.2020 16:53
#10 RE: Runde Avatare
avatar
User

Der CSS-Code von @Edeltraud ist fürs Business und nur für die PN's bestimmt (.umavatar img).
Die Beiträge benötigen eine andere "Class" (.messageAvatar img)...

Habe noch einiges ausprobiert für Bilder mit unterschiedlicher Breite und Höhe!
Für die runde Darstellung sind quadratische und Portraits-Bilder besonders geeignet!
Mit einem zusätzlichen Eintrag "object-fit: cover" können selbst Bilder mit unterschiedlicher Höhe und Breite verzerrungsfrei wiedergegeben werden!
Habe sogar eine Lösung gefunden, die Nickname-Farben für den Rand einzusetzen!
Allerdings muss hier ein kleines Plugin angelegt werden!

Eintrag in Eigener CSS Code mit fester Randfarbe:

1
2
3
4
5
 
/* Business Template - Runde Avatare in Thread - Flat */
.messageAvatar img {border: 2px solid #aaaaaa; height: 130px; width: 130px; object-fit: cover; padding:3px; border-radius: 50%; box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4);}

/* Business Template - Runde Avatare in PN */
.umavatar img {border: 2px solid #aaaaaa; height: 130px; width: 130px; object-fit: cover; padding:3px; border-radius: 50%; box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4);}
 



Mehr hier:
Runde Avatar-Darstellung fürs Business-Template V4


Bis dann
Wolfgang



Forum für Hilfe, Tricks & Tipps / Foren-Nr.: 104774 / Template: Business (V4) / Browser: Edge


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!