not a support questionI have been trying to add an image to my Mega menu with the following code:
http://pizzazzgifts.com/temp/wp-content/uploads/2012/06/Home-Button.jpg
This has been entered in the Description field on the edit mega menu page for the menu item Home. I cannot get it to work. Please help!
One thought is that the jpg is wider than the space where "Home" sits right now, but I don't know how to widen it. Please explain very simply, I am new to Wordpress and have never felt dumber in my life.
Sandy
Hey!
As far as I know the main menu items do not support images. You can only add images to the dropdown (like you can see it here: http://www.kriesi.at/themes/abundance/ ).
Regards,
Peter
I'm sorry I wasn't clearer. I am trying to get an image of a button in place of just the plain words such as Home, Contact, etc. Just trying to bring some color to the main menu and make it more interesting.
On some other posts I thought I had read that you can achieve that by adding a link to a button image. I have the image in my media library and I am trying to have that image appear on my website page in the large menu bar. Just doing a practice one for now until I know I can make it work.
If there is some other way of achieving this, please point me in the right direction. Like I said, I am new to this and quite willing to learn. It is very frustrating to find my way through this, but have learned a lot reading everyone's posts on this forum. Thank you!
Devin
Moderator
Hi SandyMc,
Sorry for the delay, we are usually able to respond within 24 hours but it can often times be a bit longer depending on how busy the forums are (and they are very busy lately).
Using an image in place of a menu item won't really work with this kind of layout as its all css based. It would take quite of specific tweaks to get each item replaced by an image and it would need to be adjusted whenever you changed the menu even slightly.
Instead what you could do is use a single slice of that image and then repeat it across the whole background and then make the text links white so that they can be seen on top of the purple gradient.
So try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
#top .main_menu .avia_mega {
background: URL(http://pizzazzgifts.com/temp/wp-content/uploads/2012/06/Home-Button.jpg);
.main_menu .avia_mega > li:hover > a, #top .main_menu .avia_mega > .current-menu-item > a {
background: URL(http://pizzazzgifts.com/temp/wp-content/uploads/2012/06/Home-Button-hover.jpg);
}Just replace the URL to the new one that is just a 2-3 pixel slice of the purple gradient and the same for a hover image (maybe the same gradient in reverse). Then add the following for the link color:
.main_menu .avia_mega a {
color:#FFF;
}Regards,
Devin
Devin - Thank you so much! I am part of the way there. Thank you for your thorough explanation of what I was going to do. I understand it! I applied the code to to the Quick CSS and I accomplished getting the purple gradient to show. I came up with a Pink gradient for the hover, but it does not show up. I can also not get the text to show as white. It is the dark gray color as the rest of the page is.
I tried putting the code in the custom.css file through the cpanel of my host, but that did not work either. I am not sure where it goes in the file.
Sorry to bother you again with this. I really want to learn how this all works. Is there an ebook or documentation you recommend for people who are starting out that would at least give a clue of what to do?
Devin
Moderator
It looks like your custom.css doesn't have closing brackets on the background changes. It should be:
#top .main_menu .avia_mega {
background: URL(http://pizzazzgifts.com/temp/wp-content/uploads/2012/06/PurpleLtDkGradBar.jpg);
}
.main_menu .avia_mega > li:hover > a, #top .main_menu .avia_mega > .current-menu-item > a {
background: URL(http://pizzazzgifts.com/temp/wp-content/uploads/2012/06/PinkLtDkGradBar.jpg);
}
.main_menu .avia_mega a {
color:#ffffff;
}Just make sure that each one of your css changes has both the open brack { and a closing bracket } .
There are a TON of great resources out there ranging from absolute beginner to the newest stuff coming out every week. The basics for wordpress can be found in the wordpress codex here: http://codex.wordpress.org/
A good place I always reference for the basics for general web stuff is http://www.w3schools.com/default.asp
So for you, who is just working with backgrounds you might check out: http://www.w3schools.com/css/css_background.asp
The biggest hurdle I usually see with people customizing is in targeting the correct css to make the changes they want. Usually the fastest way is to just ask on here since we give those out so regularly or to search the forums and see if it has been asked before. Otherwise you can use something like Firebug for Firefox to target the css and inspect your sites css quickly and easily: http://www.kriesi.at/support/topic/fyi-firebug-tutorial-for-wordpress-users
Hope that helps!
Regards,
Devin
You must log in to post.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
