Jump to main content

Lists

These are commonplace on many websites. Lists come in two formats; ordered and unordered. Ordered lists are used when the items need to follow a sequential order and are often denoted with numerals. Unordered lists are for when the items don't need to be shown in any particular order and are normally denoted with dots or squares. Lists commonly get used as the underpinning for more complex components in websites; like navigation menus and thumbnail grids. The Loop element makes it easy for website authors to manage items within a list. List items within a Loop can be added, deleted or reordered, with ease. Unordered lists have 'ul' tags, and ordered lists have 'ol' tags. There are many examples published online, demonstrating various HTML and CSS that can be added to make lists of almost any design or style. I like to put some conditional 'hr' tags in, so when you're in edit mode, it becomes much clearer (with dividing lines) which buttons correspond to the individual list items.

Example

  1. Oak
  2. Juniper
  3. Ash
  4. Hazel
  5. Sycamore
  6. Larch
  7. Hawthorn
  • 1 lb bread flour
  • 1 tbsp yeast
  • 1 tbsp salt
  • 3 tbsp white sugar
  • 6 floz milk
  • 5 floz boiling water
  • 1 oz sunflower oil

HTML & PHP 

<!-- Ordered list -->
<ol class="decimal">
  <?php if(webyep_bIsEditMode() == true) : ?><hr><?php endif; ?>
  <?php foreach ((new WYLoopElement())->aLoopIDs("Ordered List") as $webyep_oCurrentLoop->iLoopID) { $loopid=$webyep_oCurrentLoop->iLoopID; $_SESSION["loopid"]=$loopid; $webyep_oCurrentLoop->loopStart(true,$webyep_oCurrentLoop->iLoopID); // WebYepV2 ?>

  <li>
  <?php webyep_longText("Ordered List Item", false, "", true, 600, 400); // WebYepV2 ?>
  </li>

  <?php if(webyep_bIsEditMode() == true) : ?><hr><?php endif; ?>
  <?php $webyep_oCurrentLoop->loopEnd(); } unset($_SESSION["loopid"]); // WebYepV2 ?>
</ol>

<!-- Unordered list -->
<ul class="disc">
  <?php if(webyep_bIsEditMode() == true) : ?><hr><?php endif; ?>
  <?php foreach ((new WYLoopElement())->aLoopIDs("Unordered List") as $webyep_oCurrentLoop->iLoopID) { $loopid=$webyep_oCurrentLoop->iLoopID; $_SESSION["loopid"]=$loopid; $webyep_oCurrentLoop->loopStart(true,$webyep_oCurrentLoop->iLoopID); // WebYepV2 ?>
  
  <li>
  <?php webyep_longText("Unordered List Item", false, "", true, 600, 400); // WebYepV2 ?>
  </li>

  <?php if(webyep_bIsEditMode() == true) : ?><hr><?php endif; ?>
  <?php $webyep_oCurrentLoop->loopEnd(); } unset($_SESSION["loopid"]); // WebYepV2 ?>
</ul>

CSS

ol.decimal {
    list-style: decimal inside;
    margin: 0 0 2rem;
    padding: 0;
}

ul.disc {
    list-style: disc inside;
    margin: 0 0 2rem;
    padding: 0;
}

Javascript