Configure Drupal Mime Mail mail.css for the Webform Module

Friday, April 29th, 2011
Last Updated:
Friday, July 15th, 2011

Disclaimer: Accessing the information on this page means you agree to the Sites Terms of Service

When I first ran across the Mime Mail module for Drupal, I was ecstatic for the possibility of being able to configure the email output from my contact forms, provided by the Webform module. While it did do some pretty stuff, it didn't really do what I wanted. Knowing that the purpose of the mime mail module is to send a message as HTML, I couldn't seem to figure out how to get the stupid thing to actually accept any CSS in the e-mail.

Well crap... I don't have time to finish this right now...

The nitty gritty

1) Install Mime Mail
2) Install Webform
3) Create a file called mail.css in your primary theme directory
4) Configure the Webform Module (Sorry, gonna have to research this one if you don't already know how)
5) Edit the webforms "E-mails" tab and make sure "Send e-mail as HTML" is checked.
6) Send an email through the newly created webform
7) View the results page of the webform
8) View the source of the webform and figure out which CSS you want to modify
9) Make your edits for the CSS in the mail.css file you created in your primary theme folder. The CSS you really should edit is the ID of the fieldset. In the example below, I have two fieldsets, "Email Form" and a nested "Contact Information". I am editing the label's (Name, Phone Email etc.) within that nested fieldset. "webform-component" is just the beginning ID that the webform module gave to that particular webform. If I were to create another webform, it might be something like "webform-component-1-email-form" etc.

For Example:

#webform-component-email-form--contact-information label {
  float: left;
  margin-right: 1em;
  width: 110px;
  text-align: right;}

9) Test it!

I'll try to polish this off down the road if I get a chance...

Post Comment