Fold Page List to collapse subpages?

PLugins that require editing the sidebar.php will NOT work if you are using widgets. Widgets overwrite everything.

Ahhh–so to make my subpages collapsable, do I need to pull the pages widget out of my sidebar area in my admin, and then code in the pages somehow? Maybe in a text widget (I’m wanting to make sure I keep the same graphical look as the other widgets.)

Let’s say I give up on the folding. How can I get the vertical spacing between the page and it’s subpage to be the same as the rest of the list? I don’t like how it looks with there being so much space between them. I’m using widgets, and can’t find the code for the pages widget in my theme. My sidebar starts with the code for the categories widget–I don’t understand. Do I modify the widgets.php file in my main directory instead?

If your theme is readu for widgets (aka “widgetized”) there are a few default widgets that are available for any theme: they are “shipped” with your WP installation.
You should NEVER EVER modify any WP core file – especially if you have no idea what you are doing.

All the rest you are complaining about – should be resolved by editing the stylesheet: Finding_Your_CSS_Styles

I didn’t touch the WP core file–I didn’t know what to do with it so left it alone. I’ve looked forever in my stylesheet and cannot find anything for this spacing. I found a class for the line-height for ul and li, but when I change that, it changed the line-height for the whole list. The rest of the pages list is fine–just the space between that Desi page it’s subpage is so big. Am I missing something really obvious? Thanks for your patience. ??

Learn to read your source code – the answer is there: nested lists not styled in your stylesheet.

I am not as experienced as some others here–I’m just asking for a little guidance, and have received wonderful help so far. Please forgive me for not catching on as fast as you would apparently like–but I feel that if I could find the source code for this, I’d be able to figure it out. That’s the problem, which I may not have been very good at articulating clearly. Where is the code for this particular widget? How can I learn it if I can’t even find it?

You should NOT worry about the code.
You should look at the “output” – which is the source code. On your blog rightclick and select Show Source. You will see what I was referring to.
E.g. most sidebars (including the Pages widget) uses something like this:
wp_list_pages as code.
However, the output in your case, for example is something like this:

<div class="block" id="pages">
<div class="cen">
<div class="bot">
<div class="widget"><h2>Pages</h2>
<ul>
<li><a href="https://www.ikenouye.com">Home</a></li>
<li class="page_item page-item-7"><a href="https://ikenouye.com/about/" title="About Us">About Us</a></li>
<li class="page_item page-item-34"><a href="https://ikenouye.com/contact/" title="Contact">Contact</a></li>
<li class="page_item page-item-36"><a href="https://ikenouye.com/desi/" title="Desi">Desi</a>
    <ul>
	<li class="page_item page-item-37"><a href="https://ikenouye.com/desi/desis-photo-gallery/" title="Desi’s Photo Gallery">Desi’s Photo Gallery</a></li>
    </ul>
</li>
</ul>
</div>

OK, it’s freaking over-complicated by your designer but the main idea is obvious” you have a list inside of a list (aka nested lists) – and there are rules how to style them. Google for ‘styling nested lists’.

Hello ladytike

Ok. Maybe a little tutorial about what is a list and a nested list will be helpful for you.

As you can see, in your site, on the left column you have a list of page.

Basically, in html, to display such a list, you need this kind of code :

<ul> (means start the list)
<li>item 1</li> (li = list item)
<li>item 2</li>
<li>item 3</li>
</ul> (means close the list)

The way this list is displayed is configured in your stylesheet, the .css file. In yours, as you already edited it define houw “ul” and “li” will look like :

ul {margin:0px; padding:8px 0px 0px 1px; list-style:none; line-height:14px;}
li {padding-left:11px; background:url(images/arrow_2.gif) top left no-repeat;}
li a {color:#3E3E3E; text-decoration:none;}
li a:hover {text-decoration:underline;}

The two last one is for list elements when they are a link…

BUT… Some time, like in your case for the sub page, you can have a list in a list, what we call a nested list :

<ul> (means start the list)
<li>item 1</li> (li = list item)
<li>item 2</li>
   <ul> (we open a nested list, a list in a list)
   <li>item 2.1</li>
   </ul> (we close the nested list)
<li>item 3</li>
</ul> (means close the list)

What happens here, is that your li and ul configured in your css stylesheet WILL NOT be used for the nested list… the “ul” of the nested list is not only a “ul”… but a “ul ul”… ?? Also, the “li” of the nested list is not only an “li”… It’s a “ul ul li” :-))

Funny no ?

So, in your stylesheet, just under the ul and the li already configured, just add this :

ul ul {margin:0px; padding:8px 0px 0px 1px; list-style:none; line-height:14px;}
ul ul li {padding-left:11px; background:url(images/arrow_2.gif) top left no-repeat;}
ul ul li a {color:#3E3E3E; text-decoration:none;}
ul ul li a:hover {text-decoration:underline;}

Except for the “ul ul” and “ul ul li” It is identical to the ul and li you aleready had… So the “nested list” will appears the same than the other list elements… You can now adjust them, with the padding, margin, etc…

Hope this can help you.

S.

Thank you both, but for some reason, Simon, that didn’t work. Being the widget and WP idiot I am, I forgot the basics–how to find my source code! DUH! I’m so sorry I was being stupid, Moshu.

I found the class for that whole section being widget, so in my stylesheet, I added this:

.widget ul ul {padding:0px 0px 0px 1px; line-height:14px; list-style:none;}

It seems to be working fine, but just because I got the desired result, does that mean I’m doing it right?

Thank you both for your help! ??

-Taryn