Hi folks,

I'm having trouble getting a left menu to do what the designer created and the client signed off.

It should be fairly straightforward and I had it working fine on a test page - then when I dropped it into the theme (Atahualpa 3.5.1) the xhtml 1.0 snuffed it.

Here's the spec:


top level menu items
plain text, color 001a49, background C3C9D4. On hover/mouseover, text color is white with background 001a49. No bullets.

sub menu items
plain text, color 001a49, background e6e6e6, with disc bullet matching text color. On hover/mouseover, text color is white with background 001a49, again with disc bullet.

I don't mind doing a brute force hack if I need to. Of course it would be nice if it played well with the theme. But I'm probably going to have to do some php if/then statements on it anyway, as they only want to show the sub menus once you're on the pages that have them.

Anyone have brilliant ideas or suggestions on this? Or direct me to a tutorial that'll allow me to do this for xhtml 1.0 transitional? (I've looked at a lot of tutorials this week, but they steered me wrong!)

Thanks in advance!

When you say a left menu, are you talking about a widget? If so what widget and what are you putting in it?

Yes, I've tried both the standard Pages widget and Heirarchical Pages plugin widget <http://wordpress.org/extend/plugins/hierarchical-pages/>. (couldn't figure out how to style that one, since I've also got a separate top menu with different pages shown)

And I've tried building something up as a text widget insert with accompanying CSS insert. That's the one that worked fine until I inserted it and it was nuked by doctype = xhtml 1.0 transitional, which doesn't seem to like my rollover background color changes.

And I've tried hard coding directly in header.php.

I'll do whichever gets this thing to work properly.

What version of atahualpa and wp?
What is the URL?
What is the CSS you used?

I'm on WP3.0 and Atahualpa 3.5.1

Here's the CSS that I inserted in ATO CSS Inserts:

/*left nav */

.BCwidget_hier_page{
width: 170px; /*width of menu*/
}

.BCwidget_hier_page ul{
list-style: none inside none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
border-bottom:1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

.BCchildren {
width: 170px; /*width of menu*/
}

.BCchildren ul{
list-style: disc inside none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

.BCwidget_hier_page ul li{
/* padding-bottom: 2px; bottom spacing between menu items*/
border-top: 1px solid #000000;
}

.BCchildren ul li{
/* padding-bottom: 2px; bottom spacing between menu items*/
border-top: 1px solid #000000;
}

.BCwidget_hier_page ul li a{
color: 001a49;
background: #C3C9D4;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}


.BCchildren ul li a{
color: 001a49;
background: #e6e6e6;
display: block;
padding: 5px 0;
line-height: 17px;
list-style: disc inside none ;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.BCwidget_hier_page ul li a:hover{ /*hover state CSS*/
color: white;
background: 001a49;
}

.BCchildren ul li a:hover{ /*hover state CSS*/
color: white;
background: 001a49;
list-style: disc inside none ;
}

/* end left nav */




And here's the code I inserted in header.php, just above "//Widgetize the Left Sidebar". As I said, this works in some early HTML doctypes but not in xhtml 1.0 transitional :


<div class=" BCwidget_hier_page" style="margin-top:0px;"><ul style="border-bottom:0px; margin-top:0px;">

</style>
<li class="page_item page-item-109" ><a href="http://205.238.182.98/century/" title="Home" >Home</a></li>
<li class="page_item page-item-3" ><a href="http://205.238.182.98/century/?page_id=3" title="Mutual Funds">Mutual Funds</a></li>
<li class="page_item page-item-5 current_page_item" ><a href="http://205.238.182.98/century/?page_id=5" title="Education &amp; Planning">Education & Planning</a>
</li>
</ul >
</div>
<div class="BCchildren">
<ul>
<li class=" page_item page-item-15" ><a href="http://205.238.182.98/century/?page_id=15" title="Retirement" >Retirement</a></li>
<li class=" page_item page-item-17" ><a href="http://205.238.182.98/century/?page_id=17" title="College" >College</a></li>
<li class=" page_item page-item-19" ><a href="http://205.238.182.98/century/?page_id=19" title="Calculators" >Calculators</a></li>
</ul>
</div>
<div class="BCwidget_hier_page">
<ul >
<li class="page_item page-item-6" ><a href="http://205.238.182.98/century/?page_id=6" title="Adviser">Adviser</a></li>
<li class="page_item page-item-8" ><a href="http://205.238.182.98/century/?page_id=8" title="News">News</a></li>
<li class="page_item page-item-9" ><a href="http://205.238.182.98/century/?page_id=9" title="Private Accounts">Private Accounts</a></li>
<li class="page_item page-item-10" ><a href="http://205.238.182.98/century/?page_id=10" title="Customer Service">Customer Service</a></li>
</ul>
</div>

On the other hand, I'd just as soon figure out how to properly style hierarchical pages plugin to do this and spare me a bunch of php if/thens. I've also asked the plugin author for assistance, but haven't heard back yet.

I'm happy to report that I have this problem almost completely licked. (I also have a better understanding of how nested classes work.)

The last remaining details to work out are getting bullets to display - preferably in the correct color - and getting rid of a few extra bottom borders which pile up here and there.

For the benefit of anyone else who might want to style the Hierarchical Pages plugin, here's what I put in the CSS Inserts:

/*left nav */

div#hierpage-3{
width:170px;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
line-height: 24px;
}


div#hierpage-3 ul{
list-style:none;
margin:0 0 0 0;
padding-left: 0px;
}

div#hierpage-3 ul li{
display:block;
background-color: #C3C9D4;
padding-left: 0px;
border-bottom:1px solid #000;
}


div#hierpage-3 ul li a:hover{
color:#fff;
display:block;
background:#001a49;
text-decoration:none
}

div#hierpage-3 .children .current_page_parent a{
color:#fff;
display:block;
background:#001a49;
text-decoration:none
border-bottom:1px solid #000;
padding-left: 5px;
}

div#hierpage-3 .children .current_page_ancestor a{
color:#fff;
display:block;
background:#001a49;
text-decoration:none
border-bottom:1px solid #000;
padding-left: 5px;
}

div#hierpage-3 .children .children .current_page_parent a{
color:#fff;
display:block;
background:#001a49;
text-decoration:none
border-bottom:1px solid #000;
padding-left: 5px;
}

div#hierpage-3 .current_page_ancestor a{
color:#fff;
display:block;
background:#001a49;
text-decoration:none
border-bottom:1px solid #000;
padding-left: 5px;
}


div#hierpage-3 .children .current_page_item a{
color:#fff;
display:block;
background: #001a49;
padding-left: 5px;
}


div#hierpage-3 .current_page_item a{
color:#fff;
display:block;
background: #001a49;
padding-left: 5px;
border-bottom:1px solid #000;
}

div#hierpage-3 ul li a{
color:#001a49;
text-decoration:none;
display:block;
background:C3C9D4;
padding-left: 5px;
}

div#hierpage-3 .children a{
color:#001a49;
display:block;
background: #e6e6e6;
list-style:square inside #f00;
padding-left: 5px;
border-bottom:1px solid #000;
}

div#hierpage-3 .children a:hover{
color:#fff;
display:block;
background: #001a49;
list-style:square inside #f00;
padding-left: 5px;
border-bottom:1px solid #000;
}

div#hierpage-3 .children .children a{
color:#001a49;
display:block;
background: #e6e6e6;
list-style:square inside #f00;
padding-left: 5px;

}


div#hierpage-3 .children .children a:hover{
color:#fff;
display:block;
background: #001a49;
list-style:square inside #f00;
padding-left: 5px;
border-bottom:1px solid #000;
}

div#hierpage-3 .children .children .current_page_item a{
color:#fff;
display:block;
background: #001a49;
padding-left: 5px;
border-bottom:1px solid #000;
}

div#hierpage-3 .children .children .children a{
color:#001a49;
display:block;
background: #e6e6e6;
list-style:square inside #f00;
padding-left: 5px;

}

div#hierpage-3 .children .children .children a:hover{
color:#fff;
display:block;
background: #001a49;
list-style:square inside #f00;
padding-left: 5px;
border-bottom:1px solid #000;
}

div#hierpage-3 .children .children .children .current_page_item a{
color:#fff;
display:block;
background: #001a49;
padding-left: 5px;
border-bottom:1px solid #000;
}



/* end left nav */

take a look at the CSS Syntax for 'list-style-type'