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 »

Custom buttons to replace the main menu bar


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 Nov 25, 2012, 11:37 AM
irina2
 
7 posts · Nov 2012
Hello, I'm looking to replace the entire menu bar (www.chocolateatime.com - the menu bar right below the header image) with my own buttons that I created in Photoshop. For example, I created a 'Running' button in Photoshop (saved as a JPEG) and I would like to place it right below the header image (along with other buttons). The user can then click on the button image and will be taken to the 'Running' page. I'm not good with CSS or HTML code so detailed help would be much appreciated!
  #2  
Old Nov 25, 2012, 12:24 PM
lmilesw's Avatar
lmilesw
 
10,047 posts · Jul 2009
Central New York State USA
I would use the WordPress menu builder and give each button a class. If you don't see the class box on the menu items click on Screen Options and check the appropriate box.

Then use CSS to give each button a background image and size them accordingly.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Nov 29, 2012, 08:32 PM
irina2
 
7 posts · Nov 2012
Thanks for getting back to me! So I followed your instructions but am not sure how I should get the button images to appear on the screen. I need to remove the pink menu bar below the header image and replace all those menus with five images that link out to the menus. I think I created the CSS Classes but am now lost. I apologize in advance - I'm a newbie!
  #4  
Old Nov 29, 2012, 09:56 PM
lmilesw's Avatar
lmilesw
 
10,047 posts · Jul 2009
Central New York State USA
Since you now have the classes assigned you need to put the proper CSS in the CSS Inserts section of the theme options. For your Who am I? menu it would be something like the following.
HTML Code:
.AboutMe {
    background: url(path to image) no-repeat !important;
}
Since your classes have upper and lower case letters you need to make sure to have those correct. Also you may need to add !important as I did in the example.

For more info on sizing and positioning background images check out w3schools.com
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to replace whole category loop for custom content? AlbertS. Center area post/pages 0 May 11, 2011 06:14 PM
Replace Menu & Make Custom Home Page jnucreative Page & Category Menu Bars 5 Jun 29, 2010 04:46 PM
[SOLVED] How to replace newer RSS & Comments buttons with colored version buttons? ireneeng RSS, Feeds & Subscribing 5 Nov 12, 2009 07:56 PM
How to replace newer RSS & Comments buttons with colored version buttons? jenb RSS, Feeds & Subscribing 3 Oct 25, 2009 05:14 AM
Custom page menu bar buttons Wimbledon Page & Category Menu Bars 2 Oct 7, 2009 12:45 PM


All times are GMT -6. The time now is 11:06 AM.


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