Mastering Drupal 7 Theming: Overriding CSS and JavaScript from Your Base Theme

name = My Custom Theme
description = A bespoke theme extending Bartik.
core = 7.x
base theme = bartik

Replace `your_subtheme` and customize the details. Choose your desired installed theme as the `base theme`.

Tailoring Styles: CSS Override Techniques

Several methods allow you to modify or replace base theme CSS:

1. Direct File Replacement

The simplest method: create a CSS file in your subtheme with the exact same name and relative path as the one in the base theme (e.g., `css/layout.css`). Drupal's hierarchy ensures your subtheme's version is loaded instead. This is ideal for a complete replacement but lacks granular control.

2. Surgical Control with `hook_css_alter()`

For fine-grained control, use the `hook_css_alter()` function in your subtheme's `template.php`. This PHP hook lets you manipulate the array of CSS files Drupal plans to load.

Example: Removing Base CSS and Adding Subtheme CSS

/**
 * Implements hook_css_alter().
 */
function my_custom_theme_css_alter(&$css) {
  // Path to the base theme's CSS file to remove.
  $base_css_path = drupal_get_path('theme', 'bartik') . '/css/style.css'; // Adjust 'bartik' if needed

  // Remove the base theme's style.css if it exists.
  if (isset($css[$base_css_path])) {
    unset($css[$base_css_path]);
  }

  // Define the path to your subtheme's CSS.
  $subtheme_css_path = drupal_get_path('theme', 'my_custom_theme') . '/css/custom-styles.css';

  // Add your subtheme's custom CSS file.
  $css[$subtheme_css_path] = array(
    'data' => $subtheme_css_path,
    'type' => 'file',
    'every_page' => TRUE,
    'media' => 'all',
    'weight' => 100, // High weight to load after others
  );
}

This approach allows you to remove specific base theme files (`unset()`) and add your own, controlling load order with `weight`.

3. Leveraging CSS Specificity

You can often override base theme styles purely within your subtheme's CSS files by writing more specific CSS selectors. Browsers prioritize rules with higher specificity.

• Targeted Selectors: Instead of `h1 { color: blue; }`, use `.page-title h1` or `#main-content h1` if applicable.
• `!important` (Use Sparingly): Add `!important` to a CSS rule (`color: red !important;`) to give it maximum priority. Overuse complicates debugging, so reserve it for situations where specificity alone isn't practical.

Enhancing Functionality: JavaScript Override Techniques

Similar strategies apply to customizing JavaScript:

1. Direct File Replacement

Like CSS, place a JavaScript file in your subtheme at the same relative path (e.g., `js/scripts.js`) as the base theme file you want to replace. Your subtheme's version takes precedence.

2. Precise Control with `hook_js_alter()`

Use the `hook_js_alter()` function in `template.php` to modify the array of JavaScript files before they are loaded. You can remove base theme scripts or add your own.

Example: Replacing a Base Script

/**
 * Implements hook_js_alter().
 */
function my_custom_theme_js_alter(&$javascript) {
  // Path to the base theme's script to remove.
  $base_js_path = drupal_get_path('theme', 'bartik') . '/js/base-script.js'; // Adjust if needed

  // Remove the base theme script.
  if (isset($javascript[$base_js_path])) {
    unset($javascript[$base_js_path]);
  }

  // Define the path to your subtheme's script.
  $subtheme_js_path = drupal_get_path('theme', 'my_custom_theme') . '/js/custom-script.js';

  // Add your subtheme's script.
  $javascript[$subtheme_js_path] = drupal_js_defaults(
    $subtheme_js_path
  );
  $javascript[$subtheme_js_path]['weight'] = 5; // Adjust weight as needed
  $javascript[$subtheme_js_path]['scope'] = 'footer'; // Load in footer for better performance
}

3. The Drupal 7 Way: `Drupal.behaviors`

For adding *new* JavaScript functionality or modifying behavior reliably, use `Drupal.behaviors`. This pattern ensures your code runs correctly on initial page load *and* after content is loaded dynamically via AJAX.

Example `custom-script.js` using Behaviors:

(function ($) {

  Drupal.behaviors.myCustomFeature = {
    attach: function (context, settings) {
      // Only act on elements within the current context (page load or AJAX update).
      $('.some-element', context).once('myCustomFeature', function () {
        // Your code here runs once per element.
        $(this).click(function() {
          alert('Element clicked!');
        });
      });
    }
  };

})(jQuery);

Add this `custom-script.js` file via your `.info` file or `hook_js_alter()`.

Blueprint for Success: Best Practices

• Favor Hooks: Use `hook_css_alter()` and `hook_js_alter()` for the most maintainable overrides.
• Specificity Over Importance: Write specific CSS selectors; use `!important` as a last resort.
• Embrace `Drupal.behaviors`:** Structure your custom JavaScript using this pattern for AJAX compatibility.
• Clear Caches Religiously: After any theme file change (CSS, JS, PHP, .info), clear Drupal's caches via `admin/config/development/performance`.
• Develop Locally: Always test theme changes in a safe development environment first.
• Document Your Code: Use comments in PHP, CSS, and JS to explain your customizations.
• Version Control is Your Friend: Use Git or another VCS to track changes and revert if needed.