Remove default CSS files.

Public

Rating:
+167
up
Submitted by malcolm on Tue, 02/26/2013 - 02:11

When you create a theme from scratch, all the standard classess in css files from the core are overwritten by your files. So why not throw them all?
In template.php:

Get raw version
php
  1. /**
  2.  * Implements hook_css_alter();
  3.  */
  4. function MY_THEME_css_alter(&$css) {
  5.  
  6.   $remove = array(
  7.     'misc/vertical-tabs.css',
  8.     'misc/vertical-tabs-rtl.css',
  9.     'misc/ui/jquery.ui.core.css',
  10.     'misc/ui/jquery.ui.theme.css',
  11.     'modules/comment/comment.css',
  12.     'modules/comment/comment-rtl.css',
  13.     'modules/field/theme/field.css',
  14.     'modules/field/theme/field-rtl.css',
  15.     'modules/file/file.css',
  16.     'modules/filter/filter.css',
  17.     'modules/node/node.css',
  18.     'modules/search/search.css',
  19.     'modules/search/search-rtl.css',
  20.     'modules/system/system.admin.css',
  21.     'modules/system/system.admin-rtl.css',
  22.     'modules/system/system.base.css',
  23.     'modules/system/system.base-rtl.css',
  24.     'modules/system/system.maintenance.css',
  25.     'modules/system/system.menus.css',
  26.     'modules/system/system.menus-rtl.css',
  27.     'modules/system/system.messages.css',
  28.     'modules/system/system.messages-rtl.css',
  29.     'modules/system/system.theme.css',
  30.     'modules/system/system.theme-rtl.css',
  31.     'modules/user/user.css',
  32.     'modules/user/user-rtl.css',
  33.     'sites/all/modules/ctools/css/ctools.css',
  34.   );
  35.   foreach ($remove as $value) {
  36.     unset($css[$value]);
  37.   }
  38. }

Note that as you will need to use additional modules, like the toolbar or admin menu, you have to include a few additional classes from the core to your css file:

Get raw version
css
  1. .element-invisible {
  2.   clip: rect(1px, 1px, 1px, 1px);
  3.   position: absolute !important;
  4. }
  5. .element-invisible.element-focusable:active,
  6. .element-invisible.element-focusable:focus {
  7.   clip: auto;
  8.   position: static !important;
  9. }
  10.  
  11. .clearfix:after {
  12.   content: ".";
  13.   display: block;
  14.   height: 0;
  15.   clear: both;
  16.   visibility: hidden;
  17. }

Comments

malcolm's picture

malcolm commented 4 years 6 months ago

Thanks, I hope will be useful:). This is the first step in all my custom themes ;)

michaelmol's picture

michaelmol commented 4 years 5 months ago

Removing core css files can also achieved by the CSS FOAD method (source: http://drupal.org/node/1536790)

In your themename.info:

  1. ;-------------- CSS FOAD -------------
  2. stylesheets[all][] = system.messages.css
  3. stylesheets[all][] = comment.css
  4. stylesheets[all][] = node.css

The files doesn't have to exsist in your theme.

Anthon's picture

Anthon (not verified) commented 3 years 3 weeks ago

@michaelmol Thanks!