How to disable automatic loading of bootstrap CSS and JS in APIGEE responsive theme

Not applicable

Hi Team,

We need some help with drupal subtheming of developer portal.

We have our UI team who designed the Developer portal wireframes/screens, they have created CSS to make the site responsive. Since our css already has the capability to make the site responsive we don't want to load bootstrp.min.css and bootstrp.min.js which is getting loaded programmatically from template.php.

$cdn = theme_get_setting('bootstrap_cdn');
$my_path = drupal_get_path('theme', 'apigee_responsive');

  if (empty($cdn)) {
    drupal_add_css(drupal_get_path('theme', 'bootstrap') . '/css/overrides.css', array('group' => CSS_SYSTEM));
    drupal_add_css($my_path . '/css/bootstrap.min.css', array('group' => CSS_SYSTEM));
    drupal_add_js($my_path . '/js/bootstrap.min.js', array('group' => CSS_SYSTEM));
  }

Some classes from bootstrp.min.css are overriding our own custom CSS.

We are using apigee_responsive subtheme to customize the developer portal.

Let us know if you need further inputs.

Please guide us how we can implement it in a right way.

Thanks in advance!!

Solved Solved
0 2 1,277
1 ACCEPTED SOLUTION

I remember having the same issue and went looking through our code. Here's what we did for our Drupal 7 site:

In the theme's _template.php_, there is a function to hook into "js alter":

function my_theme_name_js_alter(&$js)

`$js` is (quote): An array of all JavaScript being presented on the page.

In the `_js_alter` function, we've got a hardcoded array of files we want to remove:

$remove = array(
  '/apigee_responsive/js/bootstrap.min.js',
  '/apigee/themes/bootstrap/js/bootstrap.js'
);

We remove from `$js` any entry that matches an item in the above array.

For each entry in `$js`, we check that's is a "file" type and that the file's path contains one of the entries in our `$remove` array.

$js[$i]['type'] == 'file'
$js[$i]['data'] is in $remove

(The "data" paths won't match exactly)

There also exists a css alter hook that can be used for stylesheets. Note that items in the array provided to that function have types "file" and "inline".

$css[$i]['type'] == ''inline'

View solution in original post

2 REPLIES 2

I remember having the same issue and went looking through our code. Here's what we did for our Drupal 7 site:

In the theme's _template.php_, there is a function to hook into "js alter":

function my_theme_name_js_alter(&$js)

`$js` is (quote): An array of all JavaScript being presented on the page.

In the `_js_alter` function, we've got a hardcoded array of files we want to remove:

$remove = array(
  '/apigee_responsive/js/bootstrap.min.js',
  '/apigee/themes/bootstrap/js/bootstrap.js'
);

We remove from `$js` any entry that matches an item in the above array.

For each entry in `$js`, we check that's is a "file" type and that the file's path contains one of the entries in our `$remove` array.

$js[$i]['type'] == 'file'
$js[$i]['data'] is in $remove

(The "data" paths won't match exactly)

There also exists a css alter hook that can be used for stylesheets. Note that items in the array provided to that function have types "file" and "inline".

$css[$i]['type'] == ''inline'

@williamking Thanks a lot !!