{"id":38,"date":"2017-02-17T19:59:35","date_gmt":"2017-02-17T19:59:35","guid":{"rendered":"http:\/\/wordpress.library.illinois.edu\/wp-training\/?page_id=38"},"modified":"2021-10-22T19:47:48","modified_gmt":"2021-10-22T19:47:48","slug":"lists","status":"publish","type":"page","link":"https:\/\/wordpress.library.illinois.edu\/wp-training\/shortcodes\/lists\/","title":{"rendered":"Lists"},"content":{"rendered":"<h2>When to use<\/h2>\n<p>Our WordPress Visual editor lets us create both ordered and un-ordered lists. However, we have found that users frequently prefer to remove bullets from their lists. While it may be tempting to give up on lists and simply hit return in-between list items, this decreases the accessibility of your page. The Web Team Gurus have developed a list shortcode that allows you to manipulate <strong>unordered<\/strong> lists with ease. We do not support changes to ordered lists at this time. This shortcode requires at least one attribute. Note that the list style will not change in your editor. It will only change when you view the page.<\/p>\n<h2>Default list behavior (no shortcodes)<\/h2>\n<h3>Unordered list<\/h3>\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<h2>Usage:<\/h2>\n<p>[list anAttribute=\"anAttributeValue\"][endlist]<br \/>\n<small>Here we remove the bullets from a list<\/small><\/p>\n<ol>\n<li>Enter the list opening element and style attribute with the value no-bullets<br \/>\n[list style=\"no-bullets\"]<\/li>\n<li>Use the text editor to format your list.\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<\/li>\n<li>Close the list:<br \/>\n[endlist]<\/li>\n<\/ol>\n<h3>Results<\/h3>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-blue-100 !sh-text-black \"><div><div class=\"\"><div class=\"shortcode sh-grid sh-grid-cols-1 md:sh-grid-cols-12 sh-gap-3\"><div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h4>Code<\/h4>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\"><br \/>\n[list style=\"no-bullets\"]<\/p>\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<p>[endlist]<\/div><\/div><\/div><\/div><div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h4>Rendering<\/h4>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\"><br \/>\n<div class=\"ui-lib-list__no-bullets\" ><\/p>\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\n<h2>Attributes: <code>style, left-padding, vspace<\/code><\/h2>\n<h3><code>style<\/code><\/h3>\n<p><strong><code>style<\/code><\/strong> is the attribute used above to remove the bullets from a list. This attribute takes only one value: <code>no-bullets<\/code>. As you can see above, this code maintains the indention from the bullet list.<\/p>\n<h3><code>left-padding<\/code><\/h3>\n<p>Many users do not like the jagged look produced by the <strong><code>style=\"no-bullets\"<\/code><\/strong> attribute alone. <strong><code>left-padding<\/code><\/strong> is used to pull text even further left to the margin. <strong><code>left-padding<\/code><\/strong> can accept 3 values: <strong><code>min<\/code>,<\/strong>\u00a0<strong><code>zero<\/code>,\u00a0<\/strong>and <strong><code>custom value<\/code><\/strong><\/p>\n<h4>5 pixel indention: <code>left-padding=\"min\"<\/code><\/h4>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-blue-100 !sh-text-black \"><div><div class=\"\"><div class=\"shortcode sh-grid sh-grid-cols-1 md:sh-grid-cols-12 sh-gap-3\"><div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h5>Code<\/h5>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\"><br \/>\n[list style=\"no-bullets\" left-padding=\"min\"]<\/p>\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<p>[endlist]<\/div><\/div><\/div><\/div><div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h5>Rendering<\/h5>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\"><br \/>\n<div class=\"ui-lib-list__no-bullets ui-lib-list__min-left-pad\" ><\/p>\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\n<blockquote><p>Example in use: <a href=\"http:\/\/www.library.illinois.edu\/ias\/intlsafetysecurity\/\">IAS International Safety and Security<\/a><\/p><\/blockquote>\n<p><strong>Custom pixel indentation:<\/strong> Use numbers to increase the padding, like this <strong>left-padding=&#8221;50&#8243;<\/strong><\/p>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-blue-100 !sh-text-black \"><div><div class=\"\"><div class=\"shortcode sh-grid sh-grid-cols-1 md:sh-grid-cols-12 sh-gap-3\"><div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h5>Code<\/h5>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\"><br \/>\n[list style=\"no-bullets\" left-padding=\"50\"]<\/p>\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<p>[endlist]<\/div><\/div><\/div><\/div><div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h5>Rendering<\/h5>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\"><br \/>\n<div class=\"ui-lib-list__no-bullets\" style=\"padding-left: 50px !important;\"><\/p>\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\n<h4>Zero indention: <code>left-padding=\"zero\"<\/code><\/h4>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-blue-100 !sh-text-black \"><div><div class=\"\"><div class=\"shortcode sh-grid sh-grid-cols-1 md:sh-grid-cols-12 sh-gap-3\"><div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h5>Code<\/h5>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\"><br \/>\n[list style=\"no-bullets\" left-padding=\"zero\"]<\/p>\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<p>[endlist]<\/div><\/div><\/div><\/div><div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h5>Rendering<\/h5>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\"><br \/>\n<div class=\"ui-lib-list__no-bullets ui-lib-list__zero-left-pad\" ><\/p>\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\n<blockquote><p>Example in use: <a href=\"http:\/\/www.library.illinois.edu\/mtx\">Math Library<\/a><\/p><\/blockquote>\n<h3><code>vspace=\"compact\"<\/code><\/h3>\n<p><strong><code>vspace<\/code><\/strong> decreases the vertical spacing between list items, creating a more compact look. <strong><code>vspace<\/code><\/strong> takes only <strong><code>compact<\/code><\/strong> as a value.<\/p>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-blue-100 !sh-text-black \"><div><div class=\"\"><div class=\"shortcode sh-grid sh-grid-cols-1 md:sh-grid-cols-12 sh-gap-3\"><div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h4>Code<\/h4>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\"><br \/>\n[list vspace=\"compact\"]<\/p>\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<p>[endlist]<\/div><\/div><\/div><\/div><div class=\"shortcode sh-col-span-6 sh-pb-3\"><\/p>\n<h4>Rendering<\/h4>\n<p><div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-white !sh-text-black !sh-border  \"><div><div class=\"\"><div class=\"ui-lib-list__compact\" ><\/p>\n<ul>\n<li>Unordered list first item<\/li>\n<li>Unordered list second item<\/li>\n<li>Unordered list third item<\/li>\n<\/ul>\n<p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><br \/>\n<div class=\"shortcode sh-p-4 sh-rounded sh-drop-shadow-sm sh-bg-red-200 !sh-text-red-800 \"><div><div class=\"\">Further work: Inline lists? Font Awesome substitution lists?<\/div><\/div><\/div><\/p>\n<h2>Why this is important<\/h2>\n<p>Making sure that lists of things are marked-up as lists is important in increasing the accessibility and discoverability of our pages.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When to use Our WordPress Visual editor lets us create both ordered and un-ordered lists. However, we have found that users frequently prefer to remove bullets from their lists. While it may be tempting to give up on lists and simply hit return in-between list items, this decreases the accessibility of your page. The Web [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":0,"parent":24,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-38","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":17,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages\/38\/revisions"}],"predecessor-version":[{"id":3053,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages\/38\/revisions\/3053"}],"up":[{"embeddable":true,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages\/24"}],"wp:attachment":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/media?parent=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}