Ga naar de inhoud
Home » HTML lijst met eigen afbeelding in WordPress

HTML lijst met eigen afbeelding in WordPress

Normaal zullen zwarte rondjes gebruikt worden om een lijst item aan te geven. Je kunt echter ook de volgende gebruiken:

redchekmarksquare  redcheckmarkround greencheckmark  happysmiley  sadsmiley

Normaal gebruik

  • Maak een lijst op een pagina of bericht, voorbeeld:
    • Heeft jou kind autisme?
    • Voel jij je overweldigd?
  • Selecteer de text weergave en zoek de lijst op:
<ul>
  <li>Heeft jou kind autisme?</li>
  <li>Voel jij je overweldigd?</li>
</ul>
  • Verander deze in:
<ul>
  <li class="greencheckmark">Heeft jou kind autisme?</li>
  <li class="greencheckmark">Voel jij je overweldigd?</li>
</ul>
  • Je kunt in plaats van greencheckmark ook een van de andere gebruiken
  • Opslaan en je bent klaar!

Technisch (Arjan) voorwerk om dit aan de praat te krijgen

  • Voeg afbeeldingen toe (ongeveer 32 x 32 pixels)
  • Onthou het volledige pad naar deze afbeeldingen
  • Voeg extra CSS code toe in de Customizer van het template:
li.greencheckmark {  
  background: url('https://www.praktijk-dekorenbloem.nl/wp-content/uploads/2017/10/GreenCheckMark32x32.png') no-repeat left top;  
  padding: 3px 0px 3px 40px;  
  margin: 0; 
  list-style: none;
}
li.redcheckmarkround {  
  background: url('https://www.praktijk-dekorenbloem.nl/wp-content/uploads/2017/10/RedCheckmarkRound32x32.png') no-repeat left top;
  padding: 3px 0px 3px 40px;
  margin: 0;
 list-style: none;
}
li.happysmiley {
  background: url('https://www.praktijk-dekorenbloem.nl/wp-content/uploads/2017/10/HappySmiley32x32.png') no-repeat left top;
  padding: 3px 0px 3px 40px;
  margin: 0;
 list-style: none;
}
li.sadsmiley {
  background: url('https://www.praktijk-dekorenbloem.nl/wp-content/uploads/2017/10/SadSmeiley32x32.png') no-repeat left top;
  padding: 3px 0px 3px 40px;
  margin: 0;
 list-style: none;
}
  • Sla dit op