Info echo

Ist der Classic-Editor schon zu kennen? –

“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

Anklickt Classic-Editor mit TinyMCE Advanced

“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

Klassischen Editor anwenden! – und …

“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

… 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

TinyMCE aktive Installationen: 2+ Millionen

“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

Ansprechend! – so gehts hier zur Lancierung

“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

… und NEU! – Classic Widgets

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

---

Info echo

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

---

Der Aufzählungszeichen ist hier der Listenpunkte, die Farbe und mehr Abstand vom Rand, der Zeilenabstand usw. Hier in Beschreibung für hin und wieder in HTML (Texteditor) oder über Customizer bzw. Child Theme eine Class erstellen und hiermit im Editor auszeichnen. Weiter noch so von Unterbrechung die Nummerierung weiterlaufen lassen und wie das mit Schriftgröße von Listing font-size. – Vom Seiten stöbern im Netz ist zu loggen:

Aufzählungszeichen der Auszeichnungen

Elementname ul, ol oder li und Attribut-/Eigenschaftswerte.

Aufzählungszeichen und Text farbig

• <ul style="color: "royalblue;">

Aufzählungszeichen mit Abstand vom Rand

• <ul style="list-style-position: inside;">
• <li style="list-style-position: outside;">
• <ul style="padding-left: 30px;">

Extra Einrückung des Textes zum Aufzählungszeichen

• <li style="padding-left: 20px;">

Aufzählungszeichen mehr Zeilenabstand

• <li style="margin-bottom: 12px;> und/oder
• <li style="margin: 12px 0;">

In Kombination

• Normaler Listenpunkt

Da wegerl.at Systemfonts verwendete und diese mit CSS individuellen color definiert waren, müssten die Beispiele zur “farbigen Visualisierung” jeweils im li Tag ausgezeichnet sein: li style=”color: royalblue;” s. hier im Quelltext.

Normale Textauszeichnung

• Mit Start-Tag <ul style="color: royalblue;"> sind gesamte Liste die Listenpunkte und Schrift mit Farbe.
• Der Start-Tag <li style="padding-left: 20px;"> ist für extra Einrückung des Textes zum Listenpunkt.

• Mit Start-Tag <ul style="list-style-position: inside;"> kann man gesamter Liste den Aufzählungszeichen mehr Abstand zum Rand geben. Der Text folgender Zeile ist unter dem Aufzählungszeichen.
• (Standard) Abstands normal, gesamter Liste die Listenpunkte mit Start-Tag <ul style="list-style-position: outside;"> oder mit Elementname li das entsprechende Element.

• Mit Start-Tag <ul style="padding-left: 30px;"> kann man gesamter Liste mehr oder weniger Abstand zum Rand geben. Der Text folgender Zeile gleich normalen Aufzählungszeichen.
• Ist den Aufzählungszeichens nächsten Listenpunkt mehr Zeilenabstand erwünscht: Mit Start-Tag <li style="margin-bottom: 12px;">
• … somit ist der Zeilenabstand zum nächsten Listenpunkt erweitert.
• Mit dem Start-Tag <li style="margin: 12px 0;"> ist der vorhergehende und des nächsten Listenpunkts der Zeilenabstand erweitert.
• Also im Start-Tag <ul> und <ol> kann man mit Attributen, der gesamter Liste von Aufzählungszeichen und Schrift eine gemeinsam Farbe zuweisen. Ebenso sind der gesamten Liste mehr Abstand zum Rand zu geben. Im Start-Tag <li> ist die Einrückung der Schrift vom Punkt mehr Abstand einzuräumen und die Zeilenabstände sind definierbar.
  • Die Unterpunkte (Einrückung) sind wieder mit Elementname ul oder ol ausgezeichnet und dem Start-Tag <li> folgt normalen Abstand. Dies ist hir eine gefällige Darstellung, wie es auch andre Gefälligkeit gereichen kann:
  • Den Unterpunkte den Zeilenabstand variieren, wiederum im Start-Tag <li> für erweiterten Abstand mit Attribut style="margin: 12px 0;".
  • Für hin und wieder per HTML,
  • ansonsten CSS ebd. class, s. u.

<hr />

<ul>
 <li>Normaler Listenpunkt.</li>
</ul>

<hr />

<ul style="color: royalblue;">
 <li>Text Text Text.</li>
 <li style="list-style-position: outside;">Text Text Text.</li>
 <li style="padding-left: 20px;">Text Text Text.</li>
</ul>

<hr />

<ul style="list-style-position: inside; color: mediumblue;">
 <li>Text Text Text.</li>
</ul>

<hr />

<ul style="padding-left: 30px; color: navy;">
 <li>Text Text Text.</li>
 <li style="margin-bottom: 12px;">Text Text Text.</li>
 <li style="margin: 12px 0;">Text Text Text.</li>
 <li style="margin: 12px 0;">Text Text Text.</li>
 <li>Text Text Text.
<ul style="list-style-type: circle;">
 <li>Unterpunkt.</li>
 <li style="margin: 12px 0;">Unterpunkte den Zeilenabstand variieren.</li>
 <li style="margin: 12px 0;"><i>Text Text Text.</li>
 <li><i>ansonsten in CSS (ebd. auch class).</i></li>
</ul>
</li>
</ul>

Bemerkungen:

Ungeeignet ist im Start-Tag <li> Attributname line-height (desselben Punkts Abstand oben und unten), weil sich dessen Auszeichnungen überschneiden. Aber größeren Zeilenabstand im Gesamten, also für Start-Tag <ul style="line-height: 150%;"> oder mit Elementname ol wiederum geeignet ist. Dieses kann folgend mit Start-Tag <li style="margin-bottom 12px;"> und/oder <li style="margin: 12px 0;"> die Listenpunkte ebenso erweitert darstellen.

Betreff line-height: Unterpunkte allein der Elementnamen ul, ol als Start-Tag z. B. <ul style="line-height: 150%;"> auszuzeichnen geht nicht, weil so die Abstände im Gesamten, also auch darüberliegende Listenpunkte mit erweitertem Zeilenabstand angesprochen sind.

CSS für ständigen Gebrauch

CSS:

li {
 margin: 10px 0;
}

… und teils Gebrauch

Dasselbe, Attributname class, z. B. die Class Definition im CSS:

.extra-li {
 margin: 10px 0;
}

… und der Class-Selektor, das Attribut (Attributname und Attributwert) im Start-Tag <li> – also Auszeichnung im HTML-Text-Editor:

<li class="extra-li">

Der Vorteil von der Auszeichnung über den Attributname einer class ist, dass man die Unterpunkte normalen Abstands belassen kann. Da jeder <li>-Start-Tag eigens ausgezeichnet sein muss. Aber eigentlich des Aufwands von Klassen-Selector über class="" gegenüber desselben, direkter Auszeichnung mit Start-Tag gleich ist.

Bspw

Hier noch ein Beispiel das mit dem class-Selektor und Stylesheet-Angabe im CSS:

.big {
 color: royalblue;
 font-size: 150%;
 list-style-position: inside;
}

… dann im HTML-Texteditor über Attributname class:

<ul>
<li class="big">Listenpunkt mit Class big</li>
<li class="big">Listenpunkt mit Class big</li>
<li>Listenpunkt ohne Class big</li>
</ul>

Darstellung:

• Listenpunkt mit Class big
• Listenpunkt mit Class big
• Listenpunkt ohne Class big

Merke: Die Darstellung mit Class ist nur im Frontend.

Hingegen

Hingegen selbe Auszeichnung ohne Class, da genügt im HTML-Text-Editor die Auszeichnung im ul

<ul style="color: royalblue; font-size: 150%; list-style-position: inside;">
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ul>

Dastellung:

• Listenpunkt ohne Class
• Listenpunkt ohne Class

Weiteres zu Listenpunkten im Titel: Bild anstatt Aufzählungszeichen, auch im Menü.

Weiter von Variation

… bitte ich dich zum Titel CSS – Listenelemente einfärben.

Anhang

Die Nummerierung unterbrechen
und geht doch weiter

1. Im Ersten
2. Im Zweiten

Die Nummerierung weiter! –  das ist im Titel HTML/Tutorials/Listen/Aufzählungslisten ff.  s. Gestaltung mit CSS → usw.

3. … und so gehts mit Nr. 3 weiter! – <ol start="3">

Die Schriftgröße von Listing font-size

So im Motto schnell ist geholfen!

Der Website normalen Schriftgröße von 100%, das sind ist in der Regel 1em oder 16px. Und die Schriftgröße für #content wurde auf 1.1em bzw. 110% editiert. So ist es konform das font-size auch von Listen zu ändern.

#content ol, #content ul {
font-size:110%;
font-weight: 300;
}

#content li > ul,
#content li > ol { 
font-size:100%;
}

Das so unterschiedlich der % das geht aus der Vererbungssache von Schriftgröße.

• Kurz zum Verständnis siehe hier: books.google

Aktualisiert im Jahr 2022-Februar