Avisio: Nested List in Sidebar « Support Forum | Kriesi.at

Support Forum » Avisio

Avisio: Nested List in Sidebar

7 posts from 2 voices

Started 2 years ago by vlane
Latest reply from vlane
This topic is not resolved

Tags:

vlane
Member

Many thanks for the support you've provided me. Have another question: Is it possible to create a nested bullet list in the sidebar?

Posted 2 years ago #
James Morrison
Former Team Member
Hey,

You could use a Text Widget and add the appropriate HTML for your list here eg:
```
<ul>
<li><a href="#my-link">My Link Text</a></li>
<li><a href="#my-link">My Link Text</a></li>
<li><a href="#my-link">My Link Text</a></li>
</ul>
```
Can you elaborate on the content of this list (e.g. list of posts / list of blogroll links) so I can point you in the right direction if this can be achieved using WordPress rather than static content?

James

James
Posted 2 years ago #
vlane
Member
Thanks for your reply, James! I have no problem doing the above -- a list with each one at the same level. What I would like to do is have a nested list such as this:

Item 1
Item 2
Item 2a
Item 2b
Item 3
Item 3a
Item 3b
Item 3c
Item 4

I looked up the html code for doing this on Wordpress.org and found the following structure, which works for page text, but did not work in the text widget (everything remained aligned at the left margin):
- Category One
- Category Two <----Note: No Closing List Tag
  
  Sub-Category One
  
  Sub-Category Two <----Note: No Closing List Tag
  
  Sub-Sub-Category One
  
  Sub-Sub-Category Two
  <----Note: Closing List Tag
  
  <----Note: Nested List Closed
  
  Sub-Category Three
- Category Three
<----Note: End of entire list

Because this didn't work, I am wondering if I need to make a style sheet modification.
Posted 2 years ago #
vlane
Member
Oh boy, my last post did not come out the way I input it.

What I wanted to show with the list of items is that the sub-categories, Items 2a, 2b, 3a, 3b, 3c were all indented to the next level. Like in an outline format.

What I wanted to show with the html code is where all the
- were placed. Although I typed it in like that, the end product formatting is what showed.
  
  I am sure you can tell! Just want to let you know that I recognized it.
Posted 2 years ago #
vlane
Member

Did it again with the html code. Wanted to show where the ul and li were placed.

Also, the list of items are text descriptions of my coaching services. No blogroll or list of posts.

Thanks!

Posted 2 years ago #

James Morrison
Former Team Member

Hey,

You shouldn't need to modify the CSS to get the content to display correctly, although things may need adjusting for aesthetics.

Working from my first example:

<ul>
<li><a href="#my-link">My Link Text</a></li>
<li><a href="#my-link">My Link Text</a></li>
<li><a href="#my-link">My Link Text</a></li>
</ul>

this code includes nested list items:

<ul>
<li><a href="#my-link">My Link Text</a>
    <li><a href="#my-link">My Sub Link Text</a></li>
    <li><a href="#my-link">My Sub Link Text</a>
        <li><a href="#my-link">My Sub Sub Link Text</a></li>
    </li>
    <li><a href="#my-link">My Sub Link Text</a></li>
    <li><a href="#my-link">My Sub Link Text</a></li>
</li>
<li><a href="#my-link">My Link Text</a></li>
<li><a href="#my-link">My Link Text</a></li>
</ul>

The structure for sub items requires that the closing

</li>

on the parent (top level) list item is placed after the sub item code so it know where to be positioned.

A link to the page with the problem would be useful :)

James

Posted 2 years ago #

vlane
Member

James,

Here is a link to a page I made to test the code I copied and pasted from you and WP documentation:
http://coaching.valiantlane.com/?page_id=1050

You can see the differences in the main section of the page. Plus neither code works in the sidebar text box to create a nested list.

Thanks for taking a look at this!

Posted 2 years ago #