I wanted to change the primary menu drop down background images so I simply added this to local.css:

#primary-menu ul.menu li {
  background:transparent url(../images/newfile-tab-left.png) no-repeat scroll 0 0;
}

#primary-menu ul.menu li a:link, #primary-menu ul.menu li a:visited {
  background:transparent url(../images/newfile-tab-right.png) no-repeat scroll 100% 0;
}

#primary-menu ul.menu li .nolink {
  background: transparent url(../images/newfile-tab-right.png) no-repeat 100% 0;
}

But it only partially works. The static background image replaces fine, as well as the hover lef-tab image, but the right-tab hover image will not flip.
If I simply change the file names in fusion-acquia-marina-style.css it works ok. For some odd reason local.css won't override just for that image. Checked with several browsers.

Am I missing something?

Comments

jeremycaldwell’s picture

jeremycaldwell commented

Try removing the "scroll" from your CSS code and see if that helps. I tried locally with background colors rather than images and it worked correctly so that is my guess. That or your images doesn't exist for the "newfile-tab-right.png" file.

druplicate’s picture

druplicate commented

Removing scroll did nothing.

The image file exists because it is correctly called by the 2nd CSS entry I added to local.css, i.e. the "visited" class.

It's only when I hover over the menu item that that same image doesn't get used.

In the very same statement in fusion-acquia-marina-style.css, just changing the file name to newfile-tab-right.png makes it work ok, so clearly there's some weird issue with local.css overriding. The CSS for the left-tab image replaces fine on hover, so why not the right one too?

Very strange.

druplicate’s picture

druplicate commented

Just upgraded Acquia-Marina to Alpha-2 and this problem still exists.

roball’s picture

roball commented
Version: 6.x-3.0-alpha1 » 6.x-3.0-alpha2

Does it also still exist in beta1?

jeremycaldwell’s picture

jeremycaldwell commented

Perhaps you need to be more specific with your CSS overrides then? If your local.css file is loading correctly (last) then it does work but the CSS needs to be updated to work correctly. I can get things working locally so it should work for you if the overrides are correct. Can you provide us with a link to your site so we can take a look?

druplicate’s picture

druplicate commented
Version: 6.x-3.0-beta1 » 6.x-3.0-alpha2

Same problem in beta1.

I'm no CSS guru, but I thought that if I used the exact same set of elements and selectors, the local.css would supersede it.

Yes, please have a look: www.bangkokcondoandhouse.com

The site is locked down during development to keep out crawlers so login with "guest", "LoS31756#".

druplicate’s picture

druplicate commented
Version: 6.x-3.0-alpha2 » 6.x-3.0-beta1

bump version to beta1

jeremycaldwell’s picture

jeremycaldwell commented
Version: 6.x-3.0-alpha2 » 6.x-3.0-beta1

I took a look at your site and it is loading the local.css file correctly. With Firebug I was also able to change the background color of the menu items (tabs) so that works as well. My guess is that your path to the image isn't correct as I couldn't find it on your server.

This is essentially where you image should be loading from and it doesn't exist: http://www.bangkokcondoandhouse.com/en/sites/all/themes/acquia_marina/im...

Double check to make sure that image exists on your server in the proper location and then call it from the CSS with the correct path.

druplicate’s picture

druplicate commented
Status: Active » Fixed

Well, after much sleuthing I solved this tricky problem.

The image has always been there and it was replacing via local.css fine for background but not for hover.

Turns out you can't just replace any statements containing the image file name (tab-right.png) alone.

You have to include the hover statements too because of the order in which CSS is applied. So I just copied the following from the original CSS and put it in local.css and the problem went away.

#primary-menu ul.menu li a:hover,
#primary-menu ul.menu li:hover a,
#primary-menu ul.menu li.hover a,
#primary-menu ul.menu li.active-trail a:link,
#primary-menu ul.menu li.active-trail a:visited {
  background-position: right -46px;
  color: #fff;
}

#primary-menu ul.menu li:hover,
#primary-menu ul.menu li.hover,
#primary-menu ul.menu li.active-trail {
  background-position: left -41px;
}

Not sure why this applied to the right image but not the left, however.

Minus a few hairs later... it works.

vitis’s picture

vitis commented

sub

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.