Remove default CSS files.

Public

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:

</> CopyGet 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:

</> CopyGet 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

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

michaelmol's picture

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.

malcolm's picture

Thanks for nice addition :)

Anthon's picture

@michaelmol Thanks!