Xidipity

Knowledge Base

list pages
Template: List Pages Title Links
Xidipity WordPress Theme Knowledge Base Template Content Header Image

The purpose of this template is to display a filtered hierarchical list of page title links. The template is useful in creating a table of contents or quick links.

 

Appearance

Editor view
Page List
Guides

 

Web view
Page List
Guides

 

Template

<!--  wpX:PAGE/LIST -->
<div class="bdr:bas-2 bdr:lt-so-3x bkg:tint-bas-1 cnr:arch-sm fx:r fxa:1 fxc:3 web[dsp:none]">
  <div class="pad:hrz+0.5">
    <span class="fnt:siz-lg-5x sm)fnt:siz-lg-6x"><i class="icon:tb_lst_unordered"></i></span>
  </div>
  <div class="pad:hrz+0.5">
    <h5>Page List</h5>
    <div>
      <span class="pad:rt+0.125"><i class="icon:paperclip"></i></span>
      <span class="fnt:wgt-500">#title#</span>
    </div>
  </div>
</div>
<div class="pad:vrt+0.5 mce[dsp:none]">[plst css='#css#' bullet='#bullet#' depth=#depth#]#parent#[/plst]</div>
<!-- /wpX:PAGE/LIST -->
 

​Template may scroll horizontally in some circumstances.

Markers

#title#

The goal of the title marker is to provide a reference as to the purpose of the template and is displayed in the editor as a component of the annotation.

#css#

Optional class rule to apply to list.

#bullet#

Optional Font Awesome / Google / Xidipity icon tag

#depth#

How many levels of the hierarchy to display (0=all)

#parent#

Limit list items by identifying a hierarchical parent and displaying only the children.

 

Installation

Steps
  1. highlight & copy template to clipboard
  2. click the line in your content where the list will be placed
  3. open the Xidipity Template Editor in a separate tab
  4. paste clipboard into the editor
  5. update the #title# marker as desired
  6. update the #css# marker as desired
  7. update the #bullet# marker as desired
  8. update the #depth# marker as desired
  9. update the #parent# marker as desired
  10. highlight & copy updated template to clipboard
  11. go back to your content
  12. click the toolbar insert template (  ) icon
  13. paste clipboard into the tool
  14. click OK to insert
​Notes

A common class rule to apply is the list item vertical spacing adjustment. Choices include the following:

  • li:qtr-spaced (quarter spaced)
  • li:dbl-spaced (double spaced)
  • li:tpl-spaced (triple spaced)

 

The icon tag used in this demo is from Google.

<span class="material-icons-outlined">insert_drive_file</span>

  • Since: v1.0.0

 

May 20, 2022