Ein Mi­ni­a­tur­bild statt das Aufzählungszeichen;
so auch im Menü?

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Anstatt der Aufzählungszeichen ein Mi­ni­a­tur­bild. Der Erstellung von kleinem Bild in fixer Größe. So Bild PNG  oder SVG ab etwa 15px mal 15px. Dessen ist dann der Bearbeitung bspw. mit Boxy SVG in fixer Größe (also nicht Responsive) abzuspeichern. Denn im Nachhinein ist da die Bildgröße nicht anpassbar. So weiter ist die Definition einer Class und die HTML-Auszeichnung. Bspw geht das auch als Menüpunkt mit Image.

List-Style-Image

Als erstes ist für die Aufzählungszeichen im Customizer oder Childs Theme eine Class zu erstellen. Bspw. die Class listbild:

CSS

/* Class für List-Style-Image */
.listbild {list-style-image:url(https://..classicpress.svg)
}

Im Editor / Text ist das dann mit dem Attributname und dem Eigenschaftswert, also die Class mit class="listbild".

HTML

<ul class="listbild">
 	<li>Die Aufzählungszeichen erhalten somit das definierte Bild.</li>
 	<li>Das Bild erscheint aber nicht Editors Visuelle.</li>

</ul>

Menüpunkte mit Image

Für die Menüpunkte ist erst mal im Customizer oder Childs Theme eine Class von bspw. menuepunkt zu erstellen.

CSS

/* Menüpunkt, Class "menuepunkt" */
.menuepunkt {list-style-image:url( https://..OpenClipart-Vectors_baum2.svg
);
padding-right: 5px;}

Oder das Image so nach dem Text sein soll:

CSS

/* Menüpunkt, Class "menuepunkt" */
.menuepunkt:after { content:url(https://..classicpress.svg);
padding-right: 5px;
}

Mit :before ist das Bild vor dem Text  und mit :after  ist das Bild nach dem Text.

Im Menü dann …

Dashboard / Design / Menüs, evtl. erst mal oben Ansicht anpassen anklicken und ‘CSS-Klassen’ anhaken.

  • Je nach die Menüpunkte mit der CSS-Klasse.

Hier im bspw die “CSS-Klassen (optional)” funktionieren nicht mit Umlauten:

Also Beispiels richtig für CSS-Klassen ist so “menuepunkt”.

Nach dem Abspeichern des Menüs sind die Menüpunkte mit Image.

Bspw. ein Menü direkt im ‘Beitrag’

Das Menü ist hier direkt im Beitrag. So bedarf es eines PHP-Codes in der functions.php. S. im Titel Inhaltsverzeichnis direkt auf Seite/Beitrag. Bspw dann hier mit Shortcode und dem Namen des Menüs.

[menu name="Home Footer"] … so zeigt sich:

Hinweis

CSS list-style für ul und ol


Aktualisiert im Jahr 2021-Juni

… Und wie ist dein Erfolg des Beitrags?