CSS file order

Posted by shushu on April 13, 2009 at 8:16pm

7 followers

Issue Summary

Currently it seems there is no way to override vertical_tabs css file, except for garland theme.
It is critical for me since I need both RTL and LTR functionality of the module (I put the tab titles in the right side...).
Even if I define css values inside my style.css, it is not working since the vertical_tabs css is loaded after it.

Thanks,
Shushu

Comments

#1

Posted by jwolf on April 19, 2009 at 7:09am

Version:

6.x-1.0-beta1

» 6.x-1.0-beta2

I can confirm this.
This module is calling its stylesheet after the theme stylesheets.
Module stylesheets should come before theme stylesheets.

Because the module's stylesheet is loaded last themes can not override the module's styles.

<link rel="shortcut icon" href="/sites/all/themes/acquia_slate/favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/book/book.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/poll/poll.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/roboconf/roboconf.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/teleport/teleport.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/forum/forum.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/acquia_slate/style.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/acquia_slate/dblog.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/vertical_tabs/vertical_tabs.css?o" />

#2

Posted by jwolf on April 19, 2009 at 7:16am

Status:

active

» needs review

Attached is a patch to fix this issue.

<link rel="shortcut icon" href="/sites/all/themes/acquia_slate/favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/book/book.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/poll/poll.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/roboconf/roboconf.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/teleport/teleport.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/forum/forum.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/vertical_tabs/vertical_tabs.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/acquia_slate/style.css?o" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/acquia_slate/dblog.css?o" />

Attachment	Size
stylesheet-order-fix.patch	925 bytes

#3

Posted by attheshow on April 19, 2009 at 4:03pm

Subscribing.

#4

Posted by lameei on April 21, 2009 at 10:20am

subscribing!!!!

#5

Posted by Rowanw on April 23, 2009 at 3:29am

Status:

needs review

» needs work

The last two parameters you added are superfluous 'all', TRUE (i.e. they aren't needed). I may test this patch soon.

#6

Posted by Rowanw on April 23, 2009 at 4:02am

There doesn't appear to be any reason for the JavaScript and CSS to be loaded via the 'theme' parameter. I've tested the code below with a custom theme as well as Garland. Viewing the CSS in Firebug shows that vertical_tabs has no trouble with CSS specificity, and there is no visual or functional difference as far as I can see.

This loads all the JS and CSS with default parameters:

/**
 * 
 */
function theme_vertical_tabs_js_css($js, $css, $settings, $form_id) {
  static $js_added = array();
  if (!isset($js_added[$form_id])) {
    drupal_add_js(array('verticalTabs' => $settings), 'setting');
    drupal_add_js(drupal_get_path('module', 'vertical_tabs') .'/vertical_tabs.js');
    drupal_add_css(drupal_get_path('module', 'vertical_tabs') .'/vertical_tabs.css');
    foreach ($js as $path) {
      drupal_add_js($path);
    }
    foreach ($css as $path) {
      drupal_add_css($path);
    }
    $js_added[$form_id] = TRUE;
  }
}

#7

Posted by quicksketch on May 18, 2009 at 10:48pm

Status:

needs work

» fixed

Thanks, fixed with attached patch. Vertical tabs sets a weight of 300 in the system table, so that should prevent other modules from loading JavaScript first. The important thing really is just that collapse.js runs before vertical_tabs.js. The use of "theme" was an early hack to prevent other JS from loading after vertical_tabs.js.