Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

Sidebar Widget ~ Bullets & Background Image?


  #1  
Old Feb 26, 2010, 09:23 PM
Velma
 
272 posts · Feb 2009
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
  #2  
Old Feb 26, 2010, 09:54 PM
Velma
 
272 posts · Feb 2009
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

Last edited by Velma; Feb 26, 2010 at 10:04 PM.
  #3  
Old Feb 26, 2010, 10:14 PM
Velma
 
272 posts · Feb 2009
I'm wondering if I need to do css for "widget_pages" instead of "widget"?

Bouncing my ideas here as I play.

Velma
  #4  
Old Feb 26, 2010, 10:17 PM
Velma
 
272 posts · Feb 2009
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.
  #5  
Old Feb 26, 2010, 10:20 PM
Velma
 
272 posts · Feb 2009
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.
  #6  
Old Feb 26, 2010, 10:22 PM
Velma
 
272 posts · Feb 2009
Ha again!

Added "margin-top: -3px;" and that closed the gap.
  #7  
Old Feb 26, 2010, 10:43 PM
Velma
 
272 posts · Feb 2009
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.
  #8  
Old Feb 27, 2010, 07:28 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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!!
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Feb 27, 2010, 08:56 AM
Velma
 
272 posts · Feb 2009
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.

Last edited by Velma; Feb 27, 2010 at 08:59 AM.
  #10  
Old Mar 1, 2010, 06:26 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
go read about pseudo-classes at http://www.w3schools.com/css/css_pseudo_classes.asp
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Mar 1, 2010, 08:29 AM
Velma
 
272 posts · Feb 2009
Okee dokee. Thx.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Page Menu Background & Hover Image how to do this... ssoszka Atahualpa 3 Wordpress theme 11 Feb 18, 2010 11:19 AM
Background image & form in only 1 cell of a header extra widget cell? kippiper Header configuration & styling 8 Nov 22, 2009 06:58 AM
Extra background image by the sidebar id2d Header configuration & styling 7 Nov 18, 2009 03:38 AM
[SOLVED] Background and bullets timdevogel Page & Category Menu Bars 1 May 26, 2009 08:27 PM
Sidebar repeating background image JCCrgb Sidebars & Widgets 4 May 17, 2009 08:31 PM


All times are GMT -6. The time now is 07:45 AM.


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