CODEWITHSUNDEEP
cssdrupaldrupal-7
Elaine Byene
Elaine Byene

Reputation: 4142

Remove default CSS imports and JS files in Drupal

I'm building my first Drupal theme and found out something rather shocking. Drupal 7 imports 10 CSS files by default.

<style type="text/css" media="all">
@import url("http://localhost/drupal/modules/system/system.base.css?oq6xx1");
@import url("http://localhost/drupal/modules/system/system.menus.css?oq6xx1");
@import url("http://localhost/drupal/modules/system/system.messages.css?oq6xx1");
@import url("http://localhost/drupal/modules/system/system.theme.css?oq6xx1");
</style>
<style type="text/css" media="all">
@import url("http://localhost/drupal/modules/comment/comment.css?oq6xx1");
@import url("http://localhost/drupal/modules/field/theme/field.css?oq6xx1");
@import url("http://localhost/drupal/modules/node/node.css?oq6xx1");
@import url("http://localhost/drupal/modules/search/search.css?oq6xx1");
@import url("http://localhost/drupal/modules/user/user.css?oq6xx1");
</style>
<style type="text/css" media="all">
@import url("http://localhost/drupal/themes/stark/layout.css?oq6xx1");
</style>

And then this included too (not sure why or what it does)

<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/drupal\/","pathPrefix":"","ajaxPageState":{"theme":"stark","theme_token":"3s2kHk4YAL5BDTRW1hanuB6zKdWug7cniWp_uAyRBKk","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"themes\/stark\/layout.css":1}},"urlIsAjaxTrusted":{"\/drupal\/node?destination=node":true}});
//--><!]]>
</script>

I'm building a simple Drupal website from scratch and don't need those 2000 lines of css codes in the frontend. How do I proceed and remove it all? I just need my custom-style.css file and that's it.

Upvotes: 0

Views: 1519

Answers (1)

Kruti Patel
Kruti Patel

Reputation: 76

You can use hook_css_alter api to remove core and crontributed module default css files. https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_css_alter/7.x

For Javascript check this hook_js_alter: https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_js_alter/7.x

for example: 

<?php
            function YOUR_THEME_css_alter(&$css) {

            // Remove Drupal core css

            $exclude = array(
            'modules/aggregator/aggregator.css' => FALSE,
            'modules/block/block.css' => FALSE,
            'modules/book/book.css' => FALSE,
            'modules/comment/comment.css' => FALSE,
            'modules/dblog/dblog.css' => FALSE,
            'modules/field/theme/field.css' => FALSE,
            'modules/file/file.css' => FALSE,
            'modules/filter/filter.css' => FALSE,
            'modules/forum/forum.css' => FALSE,
            'modules/help/help.css' => FALSE,
            'modules/menu/menu.css' => FALSE,
            'modules/node/node.css' => FALSE,
            'modules/openid/openid.css' => FALSE,
            'modules/poll/poll.css' => FALSE,
            'modules/profile/profile.css' => FALSE,
            'modules/search/search.css' => FALSE,
            'modules/statistics/statistics.css' => FALSE,
            'modules/syslog/syslog.css' => FALSE,
            'modules/system/admin.css' => FALSE,
            'modules/system/maintenance.css' => FALSE,
            'modules/system/system.css' => FALSE,
            'modules/system/system.admin.css' => FALSE,
            'modules/system/system.base.css' => FALSE,
            'modules/system/system.maintenance.css' => FALSE,
            'modules/system/system.messages.css' => FALSE,
            'modules/system/system.menus.css' => FALSE,
            'modules/system/system.theme.css' => FALSE,
            'modules/taxonomy/taxonomy.css' => FALSE,
            'modules/tracker/tracker.css' => FALSE,
            'modules/update/update.css' => FALSE,
            'modules/user/user.css' => FALSE,
            'misc/vertical-tabs.css' => FALSE,

            // Remove contrib module CSS
            drupal_get_path('module', 'views') . '/css/views.css' => FALSE, );
            $css = array_diff_key($css, $exclude);

            }
            ?>

Upvotes: 2

Related Questions