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 » Page & Category Menu Bars »

Image Buttons on Vertical Page menu


  #1  
Old Apr 27, 2013, 05:03 PM
nick51
 
54 posts · Oct 2009
Used to do this easily but I've been away from it for so long I've forgotten. can't find it in the forum but I know there is a way to replace the Gray/Black rectangle next to a page menu item and make it an image that alternates upon roll-over.

if someone could refresh my memory of what CSS I need to do that, I'd appreciate it!

Nick
  #2  
Old Apr 29, 2013, 06:50 PM
nick51
 
54 posts · Oct 2009
/no one knows the answer to this? Really need help on this.
  #3  
Old Apr 29, 2013, 07:49 PM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Are you talking about the sidebar?
  #4  
Old Apr 29, 2013, 09:43 PM
nick51
 
54 posts · Oct 2009
Yes, When I put a Page menu there the gray background bars (to the left of each menu item) that are there now, I'd like to replace with graphics with a simple roll-over. I'm embarrassed to say I at one time knew how to do this and remember it was relatively simple. But I've not built a site for over 18 months and don't have the CSS Insert sitting around any longer. Would greatly appreciate any assistance.
  #5  
Old Apr 30, 2013, 02:28 AM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I think you are looking for HOWTO: use CSS list style types (or widgets, bars, bullets and squares oh my)
  #6  
Old May 1, 2013, 09:58 PM
nick51
 
54 posts · Oct 2009
Thanks this helped get rid of the gray bars, but does not cover how to add an image in there place.
  #7  
Old May 2, 2013, 05:05 AM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
well you could add a background image to the menu li
  #8  
Old May 3, 2013, 09:29 PM
nick51
 
54 posts · Oct 2009
Yeah, like I said at the start, long time since I've done this and I'm clueless. I've searched through the forum for hours, I've tired dozens of things and nothing. Just trying to put an image to the left of a vertical nav menu.

Thanks for trying. I'll just have to hire someone to fix this for me.

Last edited by nick51; May 3, 2013 at 09:31 PM.
  #9  
Old May 4, 2013, 06:07 AM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
seriously? I just gave you the answer. add a 'background-image' to the CSS selector 'menu-item' like
HTML Code:
.menu-item {
background-image: url('http://yourdomain.com/wp-content/uploads/2012/06/yourimage.jpg');
}
you may have to position the <a> to the right a little
  #10  
Old May 4, 2013, 07:53 AM
nick51
 
54 posts · Oct 2009
Juggledad, Not trying to be snarky, I was just out of time to spent on this. your assistance in the past and now is greatly valued and appreciated! I am not a coder and have forgotten what little CSS I knew in the past. I did really look and try quite a few things including your nicely written guide I found <color coded...>. I'll try some additional things today but at some point I need to cut my time loss on this. I'm sure it's something little I'm doing wrong but again, thank you for your assistance.
  #11  
Old May 7, 2013, 08:52 PM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
where did you come up with '#menu'?

Last edited by juggledad; May 8, 2013 at 06:55 PM.
  #12  
Old May 8, 2013, 06:49 PM
nick51
 
54 posts · Oct 2009
I've just banging around other sites looking for clues on how to do this.
  #13  
Old May 8, 2013, 06:56 PM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you should use firebug and look at what is actually being used.
  #14  
Old May 8, 2013, 07:07 PM
nick51
 
54 posts · Oct 2009
If you could just confirm if this goes in the CSS Insert section that would at least send me in the right direction.
  #15  
Old May 8, 2013, 07:10 PM
nick51
 
54 posts · Oct 2009
i think I'm on the right track. thanks
  #16  
Old May 8, 2013, 09:27 PM
nick51
 
54 posts · Oct 2009
OK, Slowly but surely. Used what you gave me with some code found on other site to create a roll-over. Now need to figure out how to make the image/menu height taller to accommodate a taller image and more vertical spacing. thanks again

.menu a { color:#666; padding-top:0.9em; text-indent:2.4em; border:none; background: url('http://yourURL.com/wp-content/uploads/2013/05/Green-hand.jpg') 0 0 no-repeat !important; }

.menu a:hover, .menu .current a:hover { color:#666; background: url('http://yourURL.com/wp-content/uploads/2013/05/red-hand.png')0 0 no-repeat !important;}.menu-item {
padding:0 1.2125em 0 2.8em;
}

Last edited by nick51; May 9, 2013 at 07:58 PM.
  #17  
Old May 8, 2013, 09:29 PM
nick51
 
54 posts · Oct 2009
Got it!

.menu a { color:#666; padding-top:0.9em; text-indent:2.4em; border:none; line-height: 40px; background: url('http://yourURL.com/wp-content/uploads/2013/05/Green-hand.jpg') 0 0 no-repeat !important; }

.menu a:hover, .menu .current a:hover { color:#666; line-height: 40px; background: url('http://yourULR.com/wp-content/uploads/2013/05/red-hand.png')0 0 no-repeat !important;}.menu-item {
padding:0 1.2125em 0 2.8em;
}

Last edited by nick51; May 9, 2013 at 07:57 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Vertical dash | between page menu items marced Page & Category Menu Bars 8 Mar 20, 2013 05:01 AM
transparent menu bar color? Image behind buttons tim55057 Page & Category Menu Bars 1 Nov 5, 2011 09:15 PM
vertical menu next to image in header btwimages Header configuration & styling 1 Nov 5, 2010 10:24 PM
[SOLVED] Change sidebar widget menu buttons to another image? kippiper Sidebars & Widgets 0 Nov 11, 2009 09:26 AM


All times are GMT -6. The time now is 06:58 PM.


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