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

CommentFileSizeAuthor
#7 vertical_tabs_add_js.patch959 bytesquicksketch
#2 stylesheet-order-fix.patch925 bytesjwolf

Comments

jwolf’s picture

jwolf commented
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" />
jwolf’s picture

jwolf commented
Status: Active » Needs review
StatusFileSize
new stylesheet-order-fix.patch925 bytes

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" />
attheshow’s picture

attheshow commented

Subscribing.

lameei’s picture

lameei commented

subscribing!!!!

Rowanw’s picture

Rowanw commented
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.

Rowanw’s picture

Rowanw commented

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;
  }
}
quicksketch’s picture

quicksketch
he/him
commented
Status: Needs work » Fixed
StatusFileSize
new vertical_tabs_add_js.patch959 bytes

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.

quicksketch’s picture

quicksketch
he/him
commented

Oops I missed two more calls that added things at the theme layer, now fixed as well.

http://cvs.drupal.org/viewvc.py/drupal/contributions/modules/vertical_ta...

Status: Fixed » Closed (fixed)

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