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

[SOLVED] Use images in Menu bar for Pages


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

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
 
Prev Previous Post   Next Post Next
  #1  
Old Jul 18, 2011, 02:29 PM
ChaseMann's Avatar
ChaseMann
 
71 posts · Dec 2009
San Diego, CA, USA
Photo [SOLVED] Use images in Menu bar for Pages

Hi guys, I found a few threads in the forum that sort of answered my question on how to use images in the menu bar for the page names, but not quite a full and succinct tutorial.

I'm trying to duplicate the menu bar that the client already has on this website:
http://thewellingtonsd.com

Here's what I have so far:
http://thewellingtonsd.com/blog/

I gave my pages classes in the menu admin area (can't seem to find the thread that suggested I do this though). Then I used CSS to style the classes with the images.

Here is the CSS I put into ATO-Add HTML/CSS inserts
HTML Code:
/*Page Menu Images*/
div#menu1 ul.rMenu li a:active, div#menu2 ul.rMenu li a:active {
padding: 6px 5px 0 5px; text-decoration:underline !important;
}

div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:hover, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
    background-color: transparent;
    border-bottom: 1px solid;
    color: #000000;
    padding-bottom: 0;
}

div#menu2 ul.rMenu li.current-menu-item a:link, div#menu2 ul.rMenu li.current-menu-item a:active, div#menu2 ul.rMenu li.current-menu-item a:hover, div#menu2 ul.rMenu li.current-menu-item a:visited, div#menu2 ul.rMenu li.current_page_item a:link, div#menu2 ul.rMenu li.current_page_item a:active, div#menu2 ul.rMenu li.current_page_item a:hover, div#menu2 ul.rMenu li.current_page_item a:visited, div#menu2 ul.rMenu li a:hover {
    background-color: transparent;
    border-bottom: 1px solid;
    color: #000000;
    padding-bottom: 0;
}

.menu-home {background:url("http://thewellingtonsd.com/images/home-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-home a:hover, .menu-home a:active {background:url("http://thewellingtonsd.com/images/home-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-about {background:url("http://thewellingtonsd.com/images/about-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-about a:hover, a:active {background:url("http://thewellingtonsd.com/images/about-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-contact {background:url("http://thewellingtonsd.com/images/contact-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-contact a:hover, a:active {background:url("http://thewellingtonsd.com/images/contact-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-reviews {background:url("http://thewellingtonsd.com/images/reviews-n2.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-reviews a:hover, a:active {background:url("http://thewellingtonsd.com/images/reviews-n2-o.gif") no-repeat left top !important;
background-color: none; width: 60px !important;
}

.menu-parties {background:url("http://thewellingtonsd.com/images/parties-n2.gif") no-repeat left top !important;
background-color: none; width: 104px !important;
}

.menu-parties a:hover, a:active {background:url("http://thewellingtonsd.com/images/parties-n2-o.gif") no-repeat left top !important;
background-color: none; width: 104px !important;
}

.menu-wellhome {background:url("http://thewellingtonsd.com/images/well-home-n2.gif") no-repeat left top !important;
background-color: none; width: 130px !important;
}

.menu-wellhome a:hover, a:active {background:url("http://thewellingtonsd.com/images/well-home-n2-o.gif") no-repeat left top !important;
background-color: none; width: 124px !important;
}

So how do I get rid of the ATO default "active" page over-lay and the text from covering my images?
__________________
Aim It Media is Affordable Intelligent Marketing.

Last edited by ChaseMann; Jul 20, 2011 at 07:53 PM.
 

Bookmarks

Tags
images, menu, pages menu bar

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Can see pages on menu bar but Unable to see categories menu on all pages ajinkya Page & Category Menu Bars 7 Oct 14, 2010 06:35 AM
[SOLVED] Static Pages on the Category Menu Bar instead of Page Bar jkfly4 Page & Category Menu Bars 4 Mar 27, 2010 03:06 AM
custom images for menu bar Richie Page & Category Menu Bars 2 Jan 4, 2010 11:25 AM
How do I hide Horizontal Decoration Bar, Pages Menu, Categories Menu on certain pages sixfirs Atahualpa 3 Wordpress theme 0 Nov 19, 2009 05:13 AM


All times are GMT -6. The time now is 08:04 AM.


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