WordPress - Thema Styling

Lijsten Maken & Opmaken

Een erg veel gebruikt HTML-element zijn de lijsten. Er zijn twee types lijsten. In de “Classic Editor” (TinyMce) worden ze de opsommingslijst en de genummerde lijst genoemd. In de Gutenberg-editor, de ongeordende en geordende -lijst.

Gutenberg volgt hiermee de HTML-benaming, terwijl de Classic-editor de algemene tekstbewerker (bijv. MS Word) benaming gebruikt.

Hier zullen we verder de HTML-benaming hanteren.

De lijsten zien er zo uit:

HTML – Ongeordende lijst:
<ul>
<li>Lijst-regel 1</li>
<li>Lijst-regel 2</li>
<li>etc.</li>
</ul>
Ongeordende lijst in browser:
  • lijst-regel 1
  • lijst-regel 2
  • etc.
HTML – Geordende lijst:
<ol>
  <li>Lijst-regel 1</li>
  <li>Lijst-regel 2</li>
  <li>etc.</li>
</ol>
Geordende lijst in browser:
  1. lijst-regel 1
  2. lijst-regel 2
  3. etc.

(UL staat voor “Unordered List”, OL voor “Ordered List” en LI voor List Item) 

HTML – Lijsten

Een lijst begint altijd met de HTML-openingstag <ul> voor een ongeordende lijst en een <ol> voor een geordende lijst. Dan volgende de opsommingen, geopend met de openingstag <li> en gesloten met de sluittag </li>.

De lijsten dienen dan weer afgesloten te worden met de sluittag </ul>, voor de ongeordende lijst of de </ol>, voor de geordende lijst; zoals in het voorbeeld hiervoor.

Voor de <li> wordt een opsommingsteken getoond.

Lijst Styling met CSS

Om een lijst te stylen dienen we in de <ul> of <ol> html-tag een class op te nemen of de class aan te passen welke de lijst heeft in het style-bestand van het thema.

In CSS-taal wordt de styling van het opsommingsteken de “list-style” genoemd. De standaard waardes voor de list-style zijn:

< ul >< li >< ol >< li >

circle

1. 2. 3. ...

disc

A. B. C. ...

square

a. b. c. ...

 

Om bijvoorbeeld het standaard gebruikte list-style-type “circle” te vervangen door de “square” kunnen we dat in de class van de <ul> op te nemen. Zo ook, wanneer we in plaats van een genummerde-lijst een alfabetische-lijst willen zien:

HTML – Ongeordende lijst:
<ul style="list-style-type: square;">
<li>Lijst-regel 1</li>
<li>Lijst-regel 2</li>
<li>etc.</li>
</ul>
Ongeordende lijst in browser:
  • lijst-regel 1
  • lijst-regel 2
  • etc.
HTML – Geordende lijst:
<ol style="list-style-type: lower-alpha;">
  <li>Lijst-regel 1</li>
  <li>Lijst-regel 2</li>
  <li>etc.</li>
</ol>
Geordende lijst in browser:
  1. lijst-regel 1
  2. lijst-regel 2
  3. etc.

Aan diezelfde “style=” kunnen we ook kleurcodes, margin, padding en font-types opgeven om de lijst nog verder te stylen.

Thema-bouwers gaan vaak een stapje verder door een eigen of speciaal karakter te gebruiken in plaats van de standaard list-style-type’s.

Willen we bijvoorbeeld een “Check-mark” (✔) opnemen als opsommingsteken dan dienen we eerst de standaard gebruikte “circle” uit te schakelen en die dan te vervangen door een check-mark.

Dat dient dan te gebeuren met behulp van drie CSS-classes.

Voorbeeld “Check Mark”:

CSS Stap 1:
ul {
  padding: 0;
  margin: 0;
}
CSS Stap 2:
li {
 list-style: none;
 margin: 0 35px;
}  

li:before {
  content: "✓";
  color: red;
  font-weight: 700;
  font-size: 1.5em;
  padding: 0 15px;
}
Lijst in de browser:
  • lijst-regel 1
  • lijst-regel 2
  • etc.

In stap 1 worden de ingestelde <ul> marges uitgeschakeld (op nul terug gezet). In stap 2, geven we eerst op dat het opsommingsteken uitgeschakeld moet worden en dan wat de marges moeten worden voor de lijst-regels. In dit voorbeeld ingesteld op 35px zowel links als rechts (vanzelfsprekend naar eigen wens en inzicht in te stellen).

Daarna vertellen we welk opsommingsteken er gebruikt moet gaan worden door de regel “li:before” op te nemen. “li” definieert de opsommingsregel en :before” wat er voor de opsommingsregel (tekst) getoond dient te worden. De style-code ‘content: “✓”‘ definieert dan het opsommingsteken.

Via de overige styling codes geven we de check-mark een kleur en de te gebruiken grootte t.o.v. het ingestelde lettertype. Via de padding kunnen we de wit-ruimte instellen tussen de check-mark en de tekst.

Voorbeeld: Check-Mark 2

CSS Stap 1:
ul {
  padding: 0;
  margin: 0;
}
CSS Stap 2:
li {
  list-style: none;
  margin: 0 35px;
  font-size: 20px;
  color: blue;
  line-height: 2em;
}

li:before {
  content: "✓";
  color: red;
  font-weight: 700;
  margin: 0 10px;
  padding: 2px 5px;
  border: 1px solid red;
  border-radius: 50%;
  background: yellow;
}
Lijst in de browser:
  • lijst-regel 1
  • lijst-regel 2
  • etc.

In stap 2 hebben we als extra een rand gedefinieerd (border & border-radius), een achtergrond-kleur en de grootte en kleur van het lettertype aangepast. De regelafstand wordt automatisch 2x zo hoog als de ingestelde grootte van het lettertype door de regel “line-height: 2em;” te gebruiken.

Door de waardes in de class “li:before” bij padding en border-radius aan te passen is de vorm van de “rand” te beïnvloeden.

CSS – Content

De truuk bij de lijst-styling zit hem dus in de content: ‘…’; regel. In voorgaand voorbeeld is de “✓” opgenomen. Dat is een speciaal HTML-karakter en wordt door alle browsers ondersteund.

Om ervoor te zorgen dat het altijd goed gaat is het beter om de nummer-codes van die HTML-karakters te gebruiken. Voor de check-mark zou dat dan: content: ‘\2713’; zijn.

Een lijst van alle codes vindt je hier: HTML Karakters.

CSS – before / after

In de voorbeelden hiervoor hebben we gebruik gemaakt van de CSS-regel “:before” om het opsommingsteken te definiëren. Op eenzelfde manier kunnen we ook een tekst (of speciaal karakter) na de opsommingsregel plaatsen door gebruik te maken van de CSS-regel “:after”.

Het is zelfs mogelijk om bij de laatste opsommingsregel een ander karakter voor of na de regel te laten tonen door de CSS-regel “last-child:after” toe te voegen.

In het volgend voorbeeld hebben we achter (after) iedere regel een punt-komma (content: “;”) geplaatst en bij de laatste een punt (content: “.”). De CSS-class heeft hier de naam “mijn-stijl” meegekregen.

Probeer het zelf eens:

CSS – display: inline

Standaard worden de opsommingsregels van de lijsten opeenvolgend geplaatst; dus iedere opsomming op een volgende regel. De lijst wordt ook toegepast om een menu op te bouwen, met de opsommingregels in plaats van onder elkaar, naast elkaar op dezelfde regel.

Hiervoor wordt dan een extra CSS-regel “display: inline;” toegevoegd waarmee wordt aangegeven dat alle opsommingen (<li>) op één regel moeten blijven.

Voorbeeld:

CSS-Codes:
.mijn-menu ul {
  list-style-type: none;
  text-align:center;
}

.mijn-menu li {
  display: inline;
}

.mijn-menu li:not(:last-child):after {
  content: " | ";
}
HTML-Codes:
<ul class="mijn-menu">
  <li>Optie 1</li>
  <li>Optie 2</li>
  <li>Optie 3</li>
  <li>Optie 4</li>
</ul>
In de browser:
  • Optie 1
  • Optie 2
  • Optie 3
  • Optie 4

De CSS-class hebben we de naam “mijn-menu” gegeven en ook hier geven we eerst aan dat het standaard opsommingsteken uitgezet dient te worden (“list-style-type:none;”), dan geven we aan dat de volledige opsomming gecentreerd dient te worden (“text-align: center;”) en met “display: inline;” geven we aan dat alle opsommingen op één regel geplaatst dienen te worden.

Als laatste “li:not(:last-child):after” geven we aan dat na iedere <li> een ” | ” getoond dient te worden, behalve bij de laatste (not) opsomming.

Aanpassen in bestaand Thema

Stel we willen voorgaande check-mark toepassen op het thema wat we gebruiken. In de browser (wij gebruiken Chrome), kiezen we via rechter-muis-klik het element (de opsommingsregel) en dan voor inspecteren.

We krijgen dan de css-code te zien die bij de lijst hoort:

WordPress Lijsten CSS aanpassen

CSS Inspecteren (via Chrome)

Links zien we de regel welke we geselecteerd hebben en rechts de bijbehorende css-styling-codes.

We zien daar dat het lijst-element <li> op “disc” is ingesteld. Die schakelen we uit door op het vinkje te klikken voor de code. Dan zien we gelijk dat de “circle”, rechts in het scherm, verdwijnt.

Om nu de styling toe te voegen en te testen doen we het volgende:

WordPress Lijst CSS Toevoegen

CSS Styling Toevoegen & Testen

Bij:

  1. klikken we op de “+” om een class toe te voegen;
  2. hier typen we de class-naam welke het thema gebruikt om de <ul> <li> te stylen. Die zien we eronder (.wpb_content_element ul li). We voegen echter extra de “::before” toe om een eigen opsommings-teken te kunnen gaan definiëren. Dan typen we onder de class-naam de style-codes die we gaan gebruiken (zoals bij de check-mark-voorbeelden hiervoor);
  3. hier zien we gelijk het resultaat.

Als het resultaat naar onze zin is, kopiëren we die class naar de customizer (optie: extra css) of direct in het css-style-bestand van het Child-Theme.

 

(de genummerde lijst bij deze uitleg is tevens opgemaakt via CSS-styling)

List Style Codes

Code CSSCode HTMLWaardesWaar te gebruikenOmschrijving
list-style-typecircle
square
upper-roman
lower-alpha

none
<ul>
 
<ol>


<ul> en/of <ol>
Wijzigt het standaard opsommingsteken bij lijsten




Verwijderd het opsommingsteken
list-style-imageurl('afbeelding.jpg')<ul> en/of <ol>Om een afbeelding te gebruiken als opsommingsteken
list-style-positioninside
outside
<ul> en/of <ol>Bepaalt de position van het opsommingsteken. Inside = onderdeel van de opsommingsregel (tekst) en Outside = buiten (voor) de tekstregel.
type"1"
"A"
"a"
"I"
"i"
<ol>Bepaalt het type opsommingsteken voor een geordende lijst. In te stellen via HTML ipv. CSS.

Voorbeeld: <ol type="I">

Start een opsomming met Romeinse nummering in hoofdletters.
start- een getal<ol>Start een geordende lijst met een bepaalde waarde.

Voorbeeld: <ol start="10">

De genummerde lijst start nu te tellen vanaf 10.

Voorbeeld: <ol type="lower-alpha" start="5">

De alfabetische lijst zal nu starten vanaf "e".

Om de tekst (opsommingsregel) in een lijst op te maken, zijn de tekst en kleur -CSS codes te gebruiken.

Vragen & Info

Heb je vragen naar aanleiding van dit artikel, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

Overige Artikelen


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *