This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Changing menu mouseover image

  • Creator
    Topic
  • #3194

    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

Viewing 8 replies - 16 through 23 (of 23 total)
  • Author
    Replies
  • #3621
    Jason Bobich
    Keymaster

    I see where the issue is. Change your CSS to this:

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

    Since we originally spoke about that, had you changed the menu option, or was it always like that? Either way, that’s the issue.

    #3622
    Jason Bobich
    Keymaster

    So, on all of these color-style related changes, here’s what you can do to identify these things. Just open up /assets/css/colors.css of the theme, and search for that image you’d normally be editing. In this case, if you had opened up colors.css, and searched for “dark-purple/menu-bg-classic.png” (which is just the image you know you’re editing, right?), you’d come across this:

    Which is what you can copy to your custom.css to override.

    #3637

    Thanks very much for the pointers – really appreciated, especially as I can see that the pathname is also now working, which is definitely a step forward!!

    I’ve changed the code as you suggested, and bearing in mind the image I’m using is 144 pix high – with reference to your first reply in this thread about how it uses the top 72pix for the menu and the bottom 72pix for the mouseover state – I’m almost back where I started: the main menu itself hasn’t changed appearance, but the application of that particular CSS rule has changed the mouseover state in the same way that I was originally querying. I’m thinking there needs to be another rule to change, and to find it, it looks like I’ll be digging through some more of that colours.css file.

    Although I did go from Classic menu to Block menu and then back to Classic menu, I did ensure that the right menu items were corresponding to the right style, so as not to further get in the way of problem-solving.

    #3648

    OK, I’ve had another look at this, using different options.

    1) The menu-bg (“Block” type menu) is 108pix high by 56pix wide. I took that image, imported it into the design program I use (Adobe InDesign CS6), and didn’t do a single thing to it. I exported it using original filename and filetype, uploaded it to the Child theme images file, and altered the custom css file / theme options accordingly.

    http://presencedesign.co.uk/pbm/

    You’ll see that the menu itself is showing normally, but that on mouseover, it doesn’t show as it should – it’s the identical issue I reported in the original post in this thread. Even though I’ve not done a single thing to it – not changed height, or width, or anything from the original image. I thought it would be a useful test, to demonstrate as best I can the issue here.

    2) The Classic menu bg is 144 pix high, as per one of your early replies. When I do exactly the same thing as described above – import and re-export, using the exact same file dimensions etc and altering the CSS to call the Classic menu, I get the same effect as I wrote about in the very first post. The menu shows up as normal, except on mouseover.

    3) I don’t get why the Classic menu file would be 144 pix high, and the Block menu would be 108, bearing in mind they’re doing the same things, being called to behave in the same way.

    Can you see why this thing is giving me such a headache?!

    Look forward to your thoughts on this one, and thanks.

    David

    #3665
    Jason Bobich
    Keymaster

    I’m honestly not totally following most of what you’re trying to describe. I’m trying to follow, but for example, now it looks like you’ve made changes since posting this, which adds to my confusion in what you’re describing. — When I look at your site, I simply see that you’ve included an image for the menu but, again, it simply doesn’t exist on your server.

    Let’s simplify this. Pick one menu style, and stop changing it. Apply your custom background image the way you want it. Then, link me so I can see the issue, and wait for my response. I promise you that whatever your issue is, I can explain to you what you’re doing wrong. But right now, you’re sort of making all of this way more complicated than it should be.

    So just set it up, let me look, and I’ll help. Stop thinking so much. šŸ˜‰

    #3788

    Apologies for changing the set-up before you’d had proper chance to take a look.

    I’ve picked the Classic menu style and uploaded images to Child theme. I’m also seeing that the menu-divider is repeating itself all across the menu, even though all the images are created to match same dimensions as originals.

    http://presencedesign.co.uk/pbm/

    I was thinking (problem-solving!) so much my brain was apt to implode… šŸ˜‰

    Thanks,
    David

    #3800
    Jason Bobich
    Keymaster

    On your main menu, you have no image showing. I see this in your custom.css

    .style_dark_purple .menu_style_classic #access {
    	background-image: url(../images/style/dark-purple/menu-bg-classic.png);
    }

    But this isn’t where your image is located in your Child theme, right? It should be this:

    .style_dark_purple .menu_style_classic #access {
    	background-image: url(../images/menu-bg-classic.png);
    }

    And same thing with your hover. This:

    .style_dark_purple .menu_style_classic #access li a:hover {
    	background-image: url(../images/style/dark-purple/menu-bg-classic.png);
    }

    Should be this:

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

    And then you’re sort of back to the beginning as you were when you started this topic. Let’s look at one of the images from the demo that is used for the classic style menu:

    http://www.themeblvd.com/demo/akita/wp-content/themes/akita/assets/images/style/slate/menu-bg-classic.png

    The image is 108px in height with the half way point (where it moves to on hover) at 54px. And here’s your image:

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

    Your image is 144px in height with the half way point being at 72px.

    Iā€™m also seeing that the menu-divider is repeating itself all across the menu, even though all the images are created to match same dimensions as originals.

    In your custom.css, find this:

    .style_dark_purple #access li,
    .style_dark_purple #access .container {
    	background-image: url(../images/menu-divider.png);
    }

    And change it to this:

    .style_dark_purple #access li {
    	background-image: url(../images/menu-divider.png);
    }
    #3827

    Ah….. sorted.

    I hadn’t realized I’d omitted to change the pathnames for some of the images – and also now changed the lines for the menu-divider, so it’s no longer repeating itself.

    And, for all that I’d been constructing the images to match the dimensions of the originals, I discovered an error, which is kind of embarrassing (and funny!) to admit to after all these years working in design: I’d set the wrong export resolution on the image, so that it was showing up as bigger than when I’d made it.

    I shall humbly admit that this was probably the error that caused the confusion in the first place. So with all that, my big thanks for your patience and help – and oh boy, have I learnt plenty!

    David

Viewing 8 replies - 16 through 23 (of 23 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.