Use unique filename for CSS files to allow overriding stylesheets from theme

Oh, and if it matters - this is not a subtheme and each successive retry on my part has included a clear of both the Drupal cache and the browser cache.

Thanks for the reply. I renamed as indicated, patched the module, cleared Drupal cache, and cleared the browser cache. I also then copied parent.css to modalframe.parent.css in my theme directory and called it via my .info file.

The new CSS files do come up via Firebug but unfortunately the module's theme file still 'wins' - see Firebug screenshot. This seems contrary to the handbook page explaining that when a .css file from a module is redefined in the main theme it wins and the local css file is loaded instead of the module's version.

The next thing I decided to do was to figure out if my theme is messing with the expected behavior somehow. I took the default Garland theme, edited garland.info to include a stylesheet with the same name (modalframe.parent.css), copied modalframe.parent.css into the Garland dir, cleared my theme cache, and switched to the Garland theme. The same thing happened - the modalframe module stylesheet still wins the battle over the theme's stylesheet with the same name.

Finally I wanted to see if the function would work at all, so I tried it with nodereference explorer's stylesheet. They include a sheet nodereference_explorer/css/explorer.tabs.css with their module. I copied explorer.tabs.css to the Garland directory, edited the .info file, cleared caches, reloaded the page, and now the theme version of explorer.tabs.css does win the battle and overrides the module's sheet.

Here's what they seem to be doing in that module:

nodereference_explorer_add_css('explorer.tabs');

and then...

/**
 * Add CSS style sheets
 * @param array $files
 */
function nodereference_explorer_add_css($files = array()) {
  // Convert file to an array if it's not one already, to compensate for
  // lazy developers. ;)
  if (!is_array($files))
    $files = array($files);

  $css_path = NODE_REFERENCE_EXPLORER_MODULE_PATH .'/css'; //from css subpath

  foreach ($files as $file)
    drupal_add_css($css_path . '/' . "$file.css");
}

Hopefully that is helpful. I may try to hack in a similar css loading function to modalframe and see what happens.

Ok, very strange, but I changed modalframe to look like this:

  $module_path = drupal_get_path('module', 'modalframe');
  $css_path = $modulepath .'/css';
  drupal_add_css($css_path . '/' . "modalframe.parent.css");

... and now it works. The theme version overrides the module version of the stylesheet if there is a sheet with the same name. If I change it back to your code from #2 above, the behavior reverts back to the module winning the stylesheet battle.

I haven't the foggiest why one works and the other doesn't - I just followed the way the Nodereference Explorer module was doing it and now it works.

Nope, it only 'works' because I screwed it up - forgot an underscore above. Removing modalframe.parent.css from my theme results in a window that has no css theming at all. Pfft. I fixed it up, but there is no change in behavior - module stylesheet still beats the theme stylesheet with the same name.

I tried it with the exact same code from Nodereference Explorer from #3 - change to modalframe_add_css('modalframe.parent'); with a call to this:

/**
* Add CSS style sheets
* @param array $files
*/
function modalframe_add_css($files = array()) {
  // Convert file to an array if it's not one already, to compensate for
  // lazy developers. ;)
  if (!is_array($files))
    $files = array($files);

  $module_path = drupal_get_path('module', 'modalframe');
  $css_path = $module_path .'/css'; //from css subpath

  foreach ($files as $file)
    drupal_add_css($css_path . '/' . "$file.css");
}

BZZZT, still no dice! The original stylesheet loads from the module and still overrides the theme's stylesheet. Firebug shows the same result as the above screenshot.

I'm starting to think I would have saved a lot of time had I just edited parent.css and child.css and been done with it :)

Thanks Markus. I'm still having the same problem whereby the module's css sheet overtakes the sheet provided by the theme, even though it is properly specified. Here's a bit more info.

When the page is first loaded, and prior to opening any modal windows, 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 from the theme is loaded. 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 window (which in my case is a nodereference explorer window), I can see that my page changes and now has
statements inserted in the of the page below the other

<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">

  //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 files

Thanks Markus - I think that just about does it then. I appreciate the help/commit and I'll move on over to the NRE queue to report that one.