Trick # 511 | Dieser Beitrag beinhaltet 389 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.
Auf Ihrer Website können Sie ganz einfach Checklisten darstellen. Bloss ein wenig HTML- und CSS-Code ist nötig.
Zunächst der CSS-Code. Fügen Sie diesen dem CSS-Stylesheet (unter WordPress via Design/Customizer/Zusätzliches CSS) hinzu:
li.complete, li.incomplete {
list-style: none;
}
li.complete::before {
content: '🗹 ';
}
li.incomplete::before {
content: '☐ ';
}Nun können Sie die gewünschte Checklist erstellen. Den erledigten Listenpunkten weisen sie die Klasse complete hinzu – den unerledigten die Klasse incomplete.
Etwa wie im folgenden Beispiel. Den Code fügen Sie in der HTML- oder Text-Ansicht Ihres WYSIWYG-Editors hinzu:
<ul>
<li class="complete">Lorem ipsum dolor</li>
<li class="complete">Sit amet, consetetur</li>
<li class="complete">Sadipscing elitr, sed</li>
<li class="incomplete">Diam nonumy eirmod</li>
<li class="incomplete">Tempor invidunt ut</li>
<li class="incomplete">Labore et dolore magna </li>
</ul>Das ganze sieht dann am Ende so aus:
- Lorem ipsum dolor
- Sit amet, consetetur
- Sadipscing elitr, sed
- Diam nonumy eirmod
- Tempor invidunt ut
- Labore et dolore magna
Wenn Sie diese einfache Online-Checklist aktualisieren wollen, ersetzen Sie jeweils die Klasse incomplete mit complete.
So simpel.
Werbung
Werbung
