Changing menu mouseover image

[bohemiandavid]

Hi,

I’m customising the menu images, and having spent hours poking around firebug and trying different solutions, I still haven’t discovered how to change one specific image.

When I hover the mouse over the menu, the background image changes (it currently goes part purple / part black, which makes me pretty sure I’ve missed out creating and uploading one image. Which image is this, please?

http://presencedesign.co.uk/pbm/our-clients/

Thanks,
David

Topic

[Jason Bobich]

Hello David,

Remember that you shouldn’t be making any edits inside of the theme, or you’re going to lose them next time you update the theme. Also, in this case you can’t easily reference by to the original image you changed to see where you went wrong because it no longer exists. In your custom.css you should be calling your new images there with your overriding CSS and the new images placed in your child theme.

You may want to consider using Google Chrome’s inspector, opposed to Firebug. It has a feature that makes sorting out the hover of an item a lot easier. — See screenshot: http://www.uploadblvd.com/uploads/image_5102df248ce37.png

The theme uses a single image for the background of the menu, which comes out to be 54px in height. This image is 108px in height (double the height of the menu). Then, when an item is hovered over, it applies that same image to the anchor tag, but then re-positions it -54px (half way) down the y-axis. — People often refer to this method of applying a CSS background as a “sprite” if you want to do more research.

So, when you edited the image, you may not have taken this into account. In a nutshell, the top 54px of the image is the menu’s appearance, while the bottom 54px is the hover state.

How to target the hovered anchor directly:

.style_dark_purple .menu_style_classic #access li a:hover { ... }

Your modified image is 144px in height with the hover state happening 72px down.

.style_dark_purple .menu_style_classic #access li a:hover { background-position: 0 -72px; }

[bohemiandavid]

Hi Jason,

Thanks so much for this – I’ll be experimenting some more after the weekend, and come back if I have any further queries.

I appreciate I’ll probably end up reinstalling because of having messed up a few things in the process, even as I was aware I was supposed to be using the Child theme for all edits. It’s partly because of being relatively new to CSS that I didn’t do that in the first place.

Thanks,
David

[bohemiandavid]

Hi Jason

I’ve started using the Child theme and editing custom.css instead of altering the main theme files, and I’ve had some success with making a couple of alterations, having also watched the video about using Firebug in Firefox / equivalent in Chrome.

However, I’m still having trouble with altering the images themselves. I suspect this is connected with specifying the exact path – bearing in mind the original CSS specifies (“../images/filename.png”) but I’m now using the Child theme and I don’t know if the path would remain the same.

This is my custom.css file – it’s at the bottom of the file, in the commented-out section, /* Changes to Images for Menu Bar */
http://presencedesign.co.uk/pbm/wp-content/themes/akita-child/assets/css/custom.css

The elements I want to be able to change are:
featured-bg.png
menu-bg-classic.png
menu-bg.png
menu-divider.png
slider-nav-bg.png
main-bottom-bg.png

and I’ve also been trying to change the size of the text in the header – it currently carries the email address. I’ve already used Firebug / Chrome inspector with this but every time I make a change, it alters *all* the text on the page. How do I target this specifically, please?

I’m pretty sure these are the last customizations I need to make. Many thanks for your help,

David

[Jason Bobich]

With all of these elements:

1) You’d find how the theme calls them within its stylesheets (just open up theme’s CSS files and search for the background images), or hunt around with Firebug.
2) Copy that corresponding CSS to your Child theme’s custom.css
3) Copy the images to your Child theme’s images directory (or modified versions of those images).
4) Make sure you’ve setup the paths to your images correctly remembering that image paths are relative to the CSS file. —

So, if your stylesheets is at /assets/css/custom.css, and you call an image like url('../images/whatever.png'), it would need to be located in your Child theme at /assets/images/.

Note: The ../ means you’re moving back a directory.

and I’ve also been trying to change the size of the text in the header

Just pick any HTML element around the area you want to change, find a class or an ID on it, and use that as a selector in writing your own CSS rule.

.whatever { font-size: ...; }

[bohemiandavid]

Thanks, but I’ve already spent hours doing this – looking through using Firebug etc, finding the code that references them, putting the code in custom.css, and not a thing changes. As you say, my stylesheet is indeed at /assets/css/custom.css, and the images are in the Child theme at /assets/images/

I put the time in doing the research and trying different things, so as to enhance my learning, and only come here as a last resort, when I’ve tried everything I know how to do. So, essentially I’m asking for the specific code to make these changes, partly to enable me to make them and partly so I can learn and thereby not have to keep asking. Same goes for changing the font size in the header – I’d appreciate just having the code, so I can make the change and learn from it.

Thanks
David

[Jason Bobich]

I apologize, but I’m just not going to do your listed customizations for you. Please keep in mind that theme support does not include customizations: http://support.themeblvd.com/help/#terms

Now, let’s look at one of your CSS changes where you’re trying to include an image in /assets/css/custom.css and see why it doesn’t work.

.style_dark_purple #access li a:hover {
    background-image: url("../images/menu-bg.png");
}

Now, this is correct, but as I explained previously, this means that you must have an image called “menu-bg.png” located here within your Child theme here:

/assets/images/menu-bg.png

By looking at your site, we can can clearly see that this does not work because there is no image there:

http://presencedesign.co.uk/pbm/wp-content/themes/akita-child/assets/images/menu-bg.png

This seems unlikely, but if you know you have the image in the right place and it’s not able to be accessed in the web browser it means for some reason you’ve accidentally given the file un-readable file permissions on your server.

[bohemiandavid]

It would have been helpful if I’d been clearer – in saying “I would appreciate just having the code”, I should have said “I would appreciate knowing if I’ve got the right piece of code” or something along those lines. I already understand and accept the terms regarding customizations, and that you set out what you will and won’t do; there’s a significant difference between asking you to actually do the customizations, and showing me where they are so that I can do them myself. My apologies for lack of clarity, and I do appreciate your time and help.

I also see that in the example code in my file and in your post, there wasn’t a corresponding file there at the time of my earlier post – oops!

Given what you’ve said here, I don’t actually have to change the file path – (“../images/filename.png”) works fine, *if* I’m putting the file in /assets/images/menu-bg.png, for example, which is what I’m doing.

I’ve made some changes and they’re still not showing up. Hey ho, I’m already aware of needing to learn some CSS. But in the meantime, until I’ve learnt how to do the CSS changes, I’m going to have to go the circuitous route of avoiding updating the theme for now, and changing the images in the parent Akita theme – because I know that actually works, even if it’s not how I’m supposed to do it (to avoid losing the changes). I know I’ll get there – I just have to set certain priorities at the moment.

In the meantime, again, my appreciation for your time and help, and for building a theme I want to continue working with.

Best wishes
David

[Jason Bobich]

Yes you are correct. Assuming you’re putting the image in /assets/images/ then yes, the image paths are correct. However…

Follow the link => http://presencedesign.co.uk/pbm/wp-content/themes/akita-child/assets/images/menu-bg.png — No image is there, and that’s where your CSS points.

[edit] And now I see the image! You got it! Do you now understand whatever wasn’t making sense before?

[bohemiandavid]

You’re quite right that the image wasn’t there at the time when you wrote the reply starting with not doing customisations. I realized my mistake, as I wrote about in my reply, and subsequently uploaded that image, but it still didn’t have any effect. It would be kind of nice if I was making it more complicated than it needs to be, because I like the idea of all this being simple. The point is that I’m finding code that seems to reference the images in question, but even notwithstanding my earlier error of the referenced image not actually being in the folder, the code doesn’t do anything.

In the light of my decision to forget about using the child theme for this at the moment, bearing in mind my insufficient knowledge of CSS, I then deleted all the images from that folder. I’ve also deleted the relevant code from the custom.css file now.

I’ve just uploaded an image to the folder, and now that link does work.

Anyway, it’s five to one in the morning here in the UK, so I’m off to bed. Again, thanks for your help.

David

[Jason Bobich]

I apologize if I came off as crass before. I just hate it when people list off customizations and ask me to do them for them. So, I’m totally paranoid of it because it happens so often.

[bohemiandavid]

Heard and understood about listing off customizations … I just wanted to know where the code was, and I was unclear in my own post.

and apology accepted, no worries 🙂

[Jason Bobich]

Truthfully, I’m still a little confused at where the confusion is or what the problem is. You had the correct CSS before, but you were missing the image, which was the issue. Then, you uploaded the image to your Child theme which would fix that issue, but then removed the CSS? If you were to put your CSS back, it still doesn’t work?

[bohemiandavid]

I removed the CSS *because* I decided to forget about trying to do stuff in the Child theme, because of not knowing enough about CSS to do all the changes I wanted to do.

I’m about to try putting the code back in the CSS file. If it works this time, I’ll just have to laugh!

The confusion is that the code I’m using doesn’t seem to be having any effect, and because, again, my knowledge of CSS is insufficient, hence asking for help to know which bits to target (truly, I’m not asking you to do them for me).

[Jason Bobich]

In my console, I could see that the code you had before was correct, but just that the image path was broken. And in Firebug, when you click the image path, it will actually generate the URL for you which was this:

http://presencedesign.co.uk/pbm/wp-content/themes/akita-child/assets/images/menu-bg.png

So I could actually easily see you had it setup right, just no image where it was supposed to be.

[bohemiandavid]

OK, I’ve copied and pasted the CSS from your post above back into my custom.css file, and it correctly references the image that’s been put into the folder. And I go to the site, and the reason I know the code isn’t affecting it is because the shade of purple is distinctly different – I’ve tried using an image with bright green on it, just to help my own learning – and that didn’t show up on mouseover either. So, I dunno … but I’m definitely going to have to go to bed now!

David

[Author]

Replies