Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   Custom buttons to replace the main menu bar (http://forum.bytesforall.com/showthread.php?t=18967)

irina2 Nov 25, 2012 11:37 AM

Custom buttons to replace the main menu bar
 
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!

lmilesw Nov 25, 2012 12:24 PM

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.

irina2 Nov 29, 2012 08:32 PM

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!

lmilesw Nov 29, 2012 09:56 PM

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


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

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