Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

Sidebar menu background & text color


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jul 2, 2010, 09:44 PM
billc108
 
22 posts · Jun 2009
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!
  #2  
Old Jul 3, 2010, 04:09 PM
juggledad's Avatar
juggledad
 
22,104 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
When you say a left menu, are you talking about a widget? If so what widget and what are you putting in it?
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Jul 3, 2010, 08:29 PM
billc108
 
22 posts · Jun 2009
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.
  #4  
Old Jul 4, 2010, 04:40 AM
juggledad's Avatar
juggledad
 
22,104 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
What version of atahualpa and wp?
What is the URL?
What is the CSS you used?
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #5  
Old Jul 4, 2010, 03:18 PM
billc108
 
22 posts · Jun 2009
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.
  #6  
Old Jul 7, 2010, 05:29 AM
billc108
 
22 posts · Jun 2009
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 */
  #7  
Old Jul 7, 2010, 05:49 AM
juggledad's Avatar
juggledad
 
22,104 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
take a look at the CSS Syntax for 'list-style-type'
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

Bookmarks

Tags
background, hover, menu, mouseover

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] body background - setting image &amp; color soni Atahualpa 3 Wordpress theme 11 Mar 16, 2010 02:55 PM
[SOLVED] Change color of title text in sidebar text widget Andante Sidebars & Widgets 3 Feb 1, 2010 06:12 PM
[SOLVED] Trouble changing background &amp; text colors in the Comment Form and Submit But summae Comments, trackbacks & pings 1 Nov 5, 2009 05:48 PM
[SOLVED] Change background-color in right inner sidebar horsemansarts Sidebars & Widgets 2 Oct 14, 2009 06:05 PM
background color in a sidebar? petevannuys Sidebars & Widgets 4 Jun 18, 2009 09:24 PM


All times are GMT -6. The time now is 08:12 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.