Jump to:
| Project: | Nodereference Explorer |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
Hello. I believe I have found a problem/issue with the module and theming. I'm using NRE beta6 with Modalframe.
According to this handbook reference, you should be able to override module CSS files in your theme:
http://drupal.org/node/263967
http://api.drupal.org/api/function/drupal_get_css/6
My goal was to override the parent.css and child.css files from the Modalframe module so I could theme the look and feel of the window. See #576448: Use unique filename for CSS files to allow overriding stylesheets from theme for more about this where I thought the issue was with that module and the fact that they are now called modalframe.parent.css and modalframe.child.css, but I digress. To accomplish this, I copied modalframe.parent.css to my theme directory, edited my .info file, and added:
stylesheets[all][] = modalframe.parent.cssWhen the page is first loaded, and prior to opening any modal windows via NRE, my region has a few classes that look like this:
<style media="all" type="text/css">
@import "/modules/node/node.css";
@import "/modules/system/defaults.css";
@import "/modules/system/system.css";
@import "/modules/system/system-menus.css";
@import "/modules/user/user.css";
@import "/sites/all/modules/admin_menu/admin_menu.css";
(and so on - no modalframe.parent.css in here)
</style>
<style media="all" type="text/css">
@import "/sites/all/themes/mytheme/block-editing.css";
@import "/sites/all/themes/mytheme/wireframes.css";
@import "/sites/all/themes/mytheme/layout-fixed.css";
@import "/sites/all/themes/mytheme/mytheme.css";
@import "/sites/all/themes/mytheme/modalframe.parent.css";
</style>Looks good - only the modalframe CSS file from the theme is loaded and the one in the module directory is ignored. None of this happens via statements - it's all imported. I verified this in Firebug's CSS tab where the only file loaded and available to review is modalframe.parent.css from the theme. The other one from the module is not there at all.
Now the interesting part. When I click to engage the modalframe NRE window, I can see that my page changes and now has statements inserted in the head of the page below the other style and script declarations at the very bottom of the head section, like this:
<link href="/modules/node/node.css?O" media="all" rel="stylesheet" type="text/css"></link>
<link href="/modules/system/defaults.css?O" media="all" rel="stylesheet" type="text/css"></link>
<link href="/modules/system/system.css?O" media="all" rel="stylesheet" type="text/css"></link>
<link href="/modules/system/system-menus.css?O" media="all" rel="stylesheet" type="text/css"></link>
<link href="/modules/user/user.css?O" media="all" rel="stylesheet" type="text/css"></link>
<link href="/sites/all/modules/admin_menu/admin_menu.css?O" media="all" rel="stylesheet" type="text/css"></link>
(and so on)
<link href="/sites/all/modules/modalframe/css/modalframe.parent.css?O" media="all" rel="stylesheet" type="text/css">... where the modalframe module's modalframe.parent.css sheet is now loaded. Since it was loaded after the theme's stylesheet above (which was supposed to override the module's sheet), it wins the inheritance battle and its classes are the ones that are used to display the window. If I watch this behavior 'live' in Firebug, the link statements are colored in yellow while they are appearing, so this is Javascript somewhere performing an import of CSS classes when the window is opened.
The net result is that the module's CSS now wins over my theme's CSS which reverses the Drupal behavior of allowing a theme-based override. I basically can't modify the modalframe CSS now unless I hack the files directly in that module's CSS directory.
Here's an interesting thing in the nodereference explorer.actions.js, near the top, Action for opening the dialog:
http://cvs.drupal.org/viewvc.py/drupal/contributions/modules/nodereferen...
//set the options according to the dialog api, built-in has dialog buttons
if (settings['dialog_api'] == 'modalframe') {
//prepare modalfram by loading js and css
$.getJSON(settings['modalframe'], function(data, textStatus) {
Drupal.nodereference_explorer.addCSS(data.css); //add css filesPerhaps this is what's doing it? I'm not skilled enough with Javascript to know what is causing it specifically, but at this point I am comfortable stating that it is Javascript within NRE that is doing it. The fix would be to change whatever function is doing this to remove the CSS load, since those modalframe CSS files are automatically loaded anyway when the modalframe module is enabled.
Thanks - that took many hours to figure out!
Comments
#1
I can confirm that the problem is with line #142 of the file js/explorer.actions.js. That line is:
Drupal.nodereference_explorer.addCSS(data.css); //add css filesThis wipes out any custom CSS files that have been created in your theme to override the modalframework's internal CSS files. My solution was to comment out that line since the CSS is already loaded with the modalframe module and my theme.
A 'proper' fix to this might be to edit the javascript to check for the presence of the same CSS filename in your theme, and then load that one if found.
#2
@rjbrown99 Check my patch here: http://drupal.org/node/564882#comment-2240976
I solved this issue together with JS optimalization fix.
#3
Due to the latest patch in #564882, all js and css are cleanly loaded on demand.
#4
Automatically closed -- issue fixed for 2 weeks with no activity.