Prevent CSS style collision

Last updated on

10 October 2018

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

The template preprocess function attempts to suck in all of the default theme's style-sheets. This "usually" looks fine, but often needs work.

The main issue is usually the fact that your theme's CSS files are designed to render the entire page. So your boiled-down HTML might look like:

<body>
  <div id="content">
    <?php print $content ?>
  </div>
</body>

And your CSS might look like this:

body {
  background-color: black;
}

#content {
  background-color: white;
}

However, mimemail-message.tpl.php(), though it uses the same CSS, results in the following HTML:

<body id="mimemail-body">
  <?php print $content ?>
</body>

Thus, your background color is black (per the body element) but your message content is never rendered as white, because the message layout doesn't include your #content id.

You have 3 options:

Add #mimemail-body to your CSS with appropriate defaults such as:

      #content, #mimemail-body {
        background-color: white;
      }

Create a mail.css file. Usually, you can copy your theme's style.css and begin making appropriate changes. In addition to changing the "offensive" declarations, you can also remove a lot of unused styles (such as sidebars) so that the overall message weight is much lower.
Customize mimemail-message.tpl.php and do whatever you want.