Wie du die Größe der Smilies und Emoji ändern kannst

Emoji und Smilies Größe ändern
Emoji und Smilies Größe ändern

Seit WordPress 4.2 haben die Smilies und Emojis ihre Größe per inline-CSS definiert. Dies mag für so manchen Browser wichtig sein, prinzipiell finde ich inline-CSS als schlechte Praxis.

Doch egal was ich davon halte, du magst vielleicht deren Größe ändern. Dafür biete ich dir hier eine Lösung mit Erklärung, damit du auch weißt wieso diese Lösung so und nicht anders ist.

Damit dies auch beim nächsten Theme Update nicht weg ist, empfehl ich dir diese Lösung in die style.css eines Child-Themes zu schreiben oder in die custom.css deines bevorzugten Plugins.

das CSS der Emojis und Smilies – die Ausgangslage

Damit man CSS Angaben überschreiben kann muss man wissen wie sie erstmals beschrieben wurden. Das CSS für Smilies und Emojis ist im Quelltext vor /head zu finden. Also im HTML-Header.

<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>

Außerdem haben die Smilies auch noch eine Style-Angabe direkt im Quelltext.

img .... style="height: 1em; max-height: 1em;"

Man kann eine CSS Deklaration nur dann überschreiben, wenn man sie genauso nutzt wie erstmals definiert oder eine übergeordnete CSS Klasse oder ID nutzt.

richtiges CSS macht deine Site schneller

Ganz kurz erklärt: für img.cssklasse braucht der Browser länger zum Rendern/Darstellen als für .cssklasse.

Dies nutzt dir aber nichts, wenn du die Größe der Emojis und Smilieys ändern magst, du musst dich an die erstmalige Definition halten und die ist img.emoji oder img.wp-smiley.

CSS im html header oder Inline-CSS im Quellcode überschreiben

CSS ist wie der Name Cascading Style Sheet ausgesprochen bedeutet eine „hierarchische“ Auszeichnungssprache. D.h. die zuletzt geschriebene Auszeichnung überschreibt die vorherige.

D.h.alles was in einer style.css ganz am Ende steht überschreibt die vorherige Auszeichnung, wenn dies die genau gleichen Selektoren verwendet. Und das was im Quelltext oder html Header steht ist sowieso immer „Sieger“.

Doch auch CSS „Sieger“ können vom Thron fallen, wenn du !important verwendest. :-)

Das ist keine gute Praxis, aber hie und da die wirklich letzte Chance.

die Größe der Emojis und Smilies ändern

In die style.css deines Themes oder ChildThemes oder in die custom.css des bevorzugten Plugins gehört also nun img.emoji und img.wp-smiley mit deinen Änderungen, die du mit !important absolut bekräftigst.

Wenn du die Höhe änderst musst du die Breite auch angegeben, sonst werden sie zwar höher aber nicht breiter!

img.wp-smiley,
img.emoji{
height: 3em!important; 
max-height: 3em!important;
width: 3em!important;
}

Und dieses Prinzip kannst du nun bei jedem Inline-CSS anwenden.

Viel Freud mit CSS!

8

8 Beiträge zu “Wie du die Größe der Smilies und Emoji ändern kannst

  1. Kommentar Autor
    Martin
    Kommentar

    Danke für deinen Beitrag, Monika.

    Jetzt sehen die Smilies fast wieder so aus, wie zuvor.

    Was die sich nur dabei wieder gedacht haben? :/

  2. Kommentar Autor
    Monika
    Kommentar

    gern geschehen Martin,
    nun die Emojis sind je Gerät verschieden, damit du zumindest eine einheitliche Darstellung hast wurde dies gemacht und damit so manch alter Browser irgendwie damit umgehen kann. Zumindest wäre dies eine technische Erklärung die ich akzeptieren kann,… doch ist es irritierend, weil ohne gute Erklärung oder Dokumentation.

  3. Kommentar Autor
    maxe
    Kommentar

    da kann man ja noch froh sein, dass sich das Inline CSS vor dem Aufruf der style.css des Themes befindet. Sonst wäre nix mit überschreiben.
    Evtl. wichtig für Leute, die die style.css vor wp_head() in die header.php eingebunden haben.

  4. Kommentar Autor
    Monika
    Kommentar

    stimmt maxe eine style.css vor wp_head bringt Probleme mit sich, das tut sie aber auch ohne dieses Inline-CSS :-) und selbst bei der Nutzung von wp_head kann es noch Probleme geben, wenn sich ein etwaiges Custom.css mittels Plugin in der Auslieferungshierachie nach oben schiebt.
    Doch all dieses Szenarien hätten meinen Beitrag “ a bisserl“ gesprengt, da warte ich auf „huch das geht nicht“ lieber …

  5. Kommentar Autor
    maxe
    Kommentar

    ja klar, wollt nur im Kommentar darauf hinweisen, dass die style.css des Themes am besten über die functions.php eingebunden wird, sodass sie erst nach dem Inline-CSS kommt.
    Super Artikel, danke!