custom toolbar button <em> background image doesn't show in safari about mercury

[jejacks0n]

Thanks Dennis.

I don't see anything wrong with your css -- but the background-position might not be fully proper (mixing percent and pixels has caused me trouble before -- but I haven't seen it in a while).. I'd check on that first. I'm guessing there's nothing wrong with the css that Mercury's using because it's being generated by Sass (so I doubt a missing semi-colon would matter).

Hopefully you've already resolved it, but maybe that'll help?

[jejacks0n]

Had to modify toolbar.css under mercury gem's vendor assets to be able to show the background image in safari.

I just noticed this.. what did you have to change? I'll try and make it more flexible if you have any suggestions.

[dennisharrison]

I added the same:

.mercury-primary-toolbar .mercury-close-button em, .mercury-expander-button[data-button="close"] em {
background-image:url('/assets/close_button.png');
background-position: 50% 2px !important;
}

to toolbar.css, right where the rest of them are.

For some reason, any styles applied on those elements (toolbar) at that level of specificity (even with important) in another file, don't show up (I've only tested with chrome and safari, and only safari behaves this way).

To work around this, we wound up removing mercury stylesheet from the assets, and replaced it with copy/paste of the contents of mercury.css from web inspector once the page was loaded. Now everything works as expected in both browsers.

I don't really have any suggestions, as this doesn't make sense to me. Why would chrome allow me to add the style, and safari would not (both would show the proper style being in a stylesheet loaded via asset pipeline)? But safari would not show the style (even as overridden) in the web inspector.

I don't feel I have enough knowledge to blame anything in particular :)

Also, have you tried using jquery-ui from the jquery-rails gem via asset pipeline in a project with mercury? I'm down to tossing jquery-ui in public and loading it in via a script tag where needed, and I don't know if it's a configuration issue on my side. Again, the browser's web inspector shows the jquery-ui file as being downloaded, and linked in the page as a script tag, after jquery... but, while I was able to use .dialog(), I could not use .slider().

Anyway, we're plugging away and have worked around any issues for now, just wanted to inform you. Again, I haven't spent the effort in actually tracking down 'the' issue, so it might have nothing to do with mercury.

Dennis

[jejacks0n]

Fair enough. I'll look into this further.

On Sep 26, 2011, at 9:11 AM, [email protected] wrote:

I added the same:

.mercury-primary-toolbar .mercury-close-button em, .mercury-expander-button[data-button="close"] em {
background-image:url('/assets/close_button.png');
background-position: 50% 2px !important;
}

to toolbar.css, right where the rest of them are.

For some reason, any styles applied on those elements (toolbar) at that level of specificity (even with important) in another file, don't show up (I've only tested with chrome and safari, and only safari behaves this way).

To work around this, we wound up removing mercury stylesheet from the assets, and replaced it with copy/paste of the contents of mercury.css from web inspector once the page was loaded. Now everything works as expected in both browsers.

I don't really have any suggestions, as this doesn't make sense to me. Why would chrome allow me to add the style, and safari would not (both would show the proper style being in a stylesheet loaded via asset pipeline)? But safari would not show the style (even as overridden) in the web inspector.

I don't feel I have enough knowledge to blame anything in particular :)

Also, have you tried using jquery-ui from the jquery-rails gem via asset pipeline in a project with mercury? I'm down to tossing jquery-ui in public and loading it in via a script tag where needed, and I don't know if it's a configuration issue on my side. Again, the browser's web inspector shows the jquery-ui file as being downloaded, and linked in the page as a script tag, after jquery... but, while I was able to use .dialog(), I could not use .slider().

Anyway, we're plugging away and have worked around any issues for now, just wanted to inform you. Again, I haven't spent the effort in actually tracking down 'the' issue, so it might have nothing to do with mercury.

Dennis

Reply to this email directly or view it on GitHub:
#20 (comment)

[gudleik]

A workaround for overriding/customizing the default mercury stylesheets (toolbar, etc):
Create app/assets/stylesheets/mercury.css with:
//= require mercury/mercury
//= require your_custom_mercury_files

I had to rm -rf tmp/sass-cache tmp/assets and restart the server.

[jejacks0n]

I added a commit tonight that should make this easier in the future.. If you're using the Rails engine, and run

rails g mercury:install

You will now have the option to install the layout and an overrides css file (you can do it without being prompted if you use the -f or --full option on the generator. You can make whatever changes you may need in these files.

It should be noted, that the overrides file is really only intended for the mercury layout, so if you're using 'require_tree .' in your application.css the styles will be included in your views, which may not be desirable.

[jejacks0n]

Hopefully that will give some clarification on how to approach it.