Wordpress Themes - WP Forum at BFA - Sidebar Widget ~ Bullets & Background Image?

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)

- - Sidebar Widget ~ Bullets & Background Image? (http://forum.bytesforall.com/showthread.php?t=6063)

Sidebar Widget ~ Bullets & Background Image?

I've been looking through http://forum.bytesforall.com/showthread.php?t=1149 for a clue, but haven't figured it out yet.

I want the sidebar navigation to look like this:

http://nhvirtualassistant.com

When I did some inspection there, I found an image for the bullet, an image for the background, hover of #ffffff, and a border of #333333.

I'm clear that this will need to be inserted in the css/html inserts.

Thanks in advance for any support you can share.

Velma

Here's where I'm working on this:

http://intheleadseat.com/nhvirtualassistant/

As you can see, I've got the background and hover, but they are "floating" (for lack of a better description) rather than all together and the full width of the sidebar.

Don't have the bullets in there yet either.

This is my css so far:

Code:

div.widget ul li {

border: solid 1px #333333 !important;

padding-left: 15px !important;

background: url(http://intheleadseat.com/nhvirtualassistant/wp-content/themes/atahualpa/images/navbg.jpg) right repeat-y; 

}



div.widget ul li:hover,

div.widget ul li.sfhover {

border: solid 1px #333333 !important;

padding-left: 15px !important;

background: #ffffff; 

}

Velma

I'm wondering if I need to do css for "widget_pages" instead of "widget"?

Bouncing my ideas here as I play. :)

Velma

OK...changed it from widget to widget_pages in the css insert I already did, and it stayed the same. Think I may do that rather than modifying all widgets.

Just got to figure out how to widen it now.

Ha! Got it widened!

Code:

div.widget_pages ul li {

margin-left: -10px;

margin-right: -10px;

border: solid 1px #333333 !important;

padding: 10px 10px 10px 10px !important;

background: url(http://intheleadseat.com/nhvirtualassistant/wp-content/themes/atahualpa/images/navbg.jpg) right repeat-y; 

}



div.widget_pages ul li:hover,

div.widget_pages ul li.sfhover {

margin-left: -10px;

margin-right: -10px;

border: solid 1px #333333 !important;

padding: 10px 10px 10px 10px !important;

background: #ffffff; 

}

Now I just have to figure out the bullets, and narrow the gap between them.

Ha again!

Added "margin-top: -3px;" and that closed the gap.

I decided to forego the image background and replace it with #eae4cc so I could have the bullet. I'm closer now.

Code:

div.widget_pages ul li {

margin-left: -10px;

margin-right: -10px;

margin-top: -3px;

border: solid 1px #333333 !important;

padding: 10px 10px 10px 40px !important;

background: #eae4cc url(http://intheleadseat.com/nhvirtualassistant/wp-content/themes/atahualpa/images/icons/bullet.jpg) no-repeat 20px 10px; 

}



div.widget_pages ul li:active,

div.widget_pages ul li:hover,

div.widget_pages ul li.sfhover {

margin-left: -10px;

margin-right: -10px;

margin-top: -3px;

border: solid 1px #333333 !important;

padding: 10px 10px 10px 40px !important;

background: #ffffff url(http://intheleadseat.com/nhvirtualassistant/wp-content/themes/atahualpa/images/icons/bullet.jpg) no-repeat 20px 10px; 

}

The only thing is the "active" isn't showing the white background, and I'm not sure why.

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Thx, JD. :) I'm still not quite sure how to do that.

I tried this:

Code:

/* ================================================== */

/* CSS for Page Widget */

/* ================================================== */

div.widget_pages ul li {

margin-left: -10px;

margin-right: -10px;

margin-top: -3px;

border: solid 1px #333333 !important;

padding: 10px 10px 10px 40px !important;

background: #eae4cc url(http://intheleadseat.com/nhvirtualassistant/wp-content/themes/atahualpa/images/icons/bullet.jpg) no-repeat 20px 10px; 

}



div.widget_pages ul li:hover,

div.widget_pages ul li.sfhover,

div.widget_pages ul li:active {

margin-left: -10px;

margin-right: -10px;

margin-top: -3px;

border: solid 1px #333333 !important;

padding: 10px 10px 10px 40px !important;

background: #ffffff url(http://intheleadseat.com/nhvirtualassistant/wp-content/themes/atahualpa/images/icons/bullet.jpg) no-repeat 20px 10px; 

}

i.e. reordering :hover .sfhover and :active

What I'm not clear on is why some are li:active and some are li a:active.

I'm going to guess that I have to stick a:link and a:visited in with the first bunch as I don't want them all to be highlighted.