Da es schon ewig her ist, dass ich einen wertvollen Tipp geteilt habe, erkläre ich heute mal wieder zum Tipps-Freitag 🙂
Schon vor einiger Zeit hat sich das Layout meiner Kommentare etwas verändert. Es war zwar nicht so, als hätten mich die quadratischen Avatare in den Kommentaren gestört…aber irgendwie…da geht noch was!
Ihr wisst was ich meine.
Wieso einfach, wenn man sich auch selber Arbeit machen kann? xD
Die neuen, runden Avatare, umrandet mit “meiner” Blogfarbe finde ich persönlich einfach ein bisschen eleganter, ein bisschen hübscher.
Und natürlich kann jeder solche runden Kommentarbilder haben! Wie das geht? Ganz einfach:
Als ersten Schritt – wie immer – euer Template sichern. (Am besten unter einem prägnanten Namen speichern “Blog_August2013” oä.)
Als zweiten Schritt in das Template gehen:
Als dritten Schritt in das Template klicken und mit Strg+F
suchen und den folgenden Code direkt DARÜBER einfügen.
Code:
.avatar-image-container, .avatar-image-container img {
max-width: 45px !important;
width: 45px !important;
max-height: 45px !important;
height: 45px !important; padding: 0 !important; border: 0px; -webkit-border-radius: 999px; -moz-border-radius: 999px; border-radius: 999px; }
.avatar-image-container
{ border:2px solid #007D47 !important;-webkit-box-shadow: 0 1px 2px #BBB;-moz-box-shadow: 0 1px 2px #BBB;
box-shadow: 0 1px 2px #BBB; }
Anmerkungen:
- Lila markiert ist die Breite des Avas – wenn der Kreis beispielsweise zu weit in das Kommentarfeld steht oä, hier in 1px Schritten ändern (und zwar alle, Kreise sind rund, ne ;))
- Rot markiert ist die Dicke der Umrandung, solid heißt dabei bloß “durchgängig”.
Es gibt noch dotted, double und dashed. - Blau markiert ist dann noch die Farbe dieser Umrandung – ohne Umrandung (also 0px in der roten Markierung), braucht man logischerweise auch keine Farbe. Den Hex Code passend zum Blog Design findet man ganz leicht durch Suchmaschinen.
Als vierten Schritt das Template sichern und die runden Avas bestaunen 🙂
Sollte mit so ziemlich jedem Template funktionieren. Falls nicht: Probieren die Kreisgröße zu ändern. Sollte gar nichts gehen, kann man immer noch das davor gespeicherte Template wieder hochladen 🙂
Wer noch Fragen hat, kann sie gerne in den Kommentaren stellen!
Die bisher veröffentlichten Tipps zum Durchklicken (auch auf der Blog Tipps Menüseite):
 |  |  |
 |  |  |
 |  |  |
 |  |  |
 |
Eure HTML Tweaking Mutti,
