how to use CSS to change styling of elements in org-mime emails?

Question

The org-mime page describes how to use org-mime-html-hook to style HTML email by inserting inline CSS. I used this method to successfully change the styling of my body paragraphs by targeting <p> tags:

(add-hook 'org-mime-html-hook
      (lambda ()
        (org-mime-change-element-style
         "p" "font-family: Georgia,serif;")))

But when I tried the same method to target ordered lists, unordered lists, and DONE headings, it had no effect:

(add-hook 'org-mime-html-hook
      (lambda ()
        (org-mime-change-element-style
         "ul.org-ul li"
         "font-family: Georgia,serif;"))) 

(add-hook 'org-mime-html-hook
      (lambda ()
        (org-mime-change-element-style
         "ol.org-ol li"
         "font-family: Georgia,serif;"))) 

(add-hook 'org-mime-html-hook
      (lambda ()
        (org-mime-change-element-style
         ".done"
         "color:#00bb00")))

The CSS styles were not reflected in the org-mime HTMLized buffer at all.

Eventually I was able to address the ordered and unordered lists by targeting the <li> tag directly...

(add-hook 'org-mime-html-hook
      (lambda ()
        (org-mime-change-element-style
         "li"
         "font-family: Georgia,serif;")))

...but doing so also stripped the formatting from my <p> tags!

What's going on here! And how can I style these other elements using org-mime?

The function `org-mime-change-element-style` appears to be just a search and replace -- i.e., `(while (re-search-forward (format "<%s\\>" element) nil t) (replace-match (format "<%s style=\"%s\"" element style))))`. I would recommend setting up a test buffer and evaluating that code snippet with different combinations of the *element* and *style*. If the search and replace fails, then the regexp is probably incorrect. This is where `M-x re-builder` comes in handy to test out regexp to see if it matches the text in the buffer above. You may want to build your own function to search/replace. — lawlist, Jul 09 '15 at 04:58

score 2 · Answer 1 · answered Jul 09 '15 at 13:24

2

It's probably easier to insert your own stylesheet in the head of your HTML mail instead of replacing the default settings:

(add-hook
 'org-mime-html-hook
 (lambda () (insert (concat "<head>\n<style>\n"
                       (with-temp-buffer
                         (insert-file-contents
                          (expand-file-name "~/orgmode/org-mime.css"))
                         (buffer-string)) "</style>\n</head>\n"))))

answered Jul 09 '15 at 13:24

mutbuerger

3,434
14
22

Good thought. Unfortunately many webmail clients, including Gmail, strip out CSS style blocks. They only support inline CSS, e.g. `
– incandescentman Jul 09 '15 at 13:55
Thanks! Works in my Gmail. – Gaurav Jun 19 '19 at 03:00

score 2 · Accepted Answer · answered Nov 23 '15 at 11:02

In the end the solution that worked for me was to put the entire email in a DIV tag.

(add-hook 'org-mime-html-hook
      (lambda ()
        (goto-char (point-min))
        (insert "<div style=\"font-family:Georgia,serif\">")
        (goto-char (point-max))
        (insert "</div>")))

score 1 · Answer 3 · answered Jan 30 '18 at 11:30

Actually the comment of @lawlist helped me to figure out that you just need to "rewind" your point, once you changed the style of an element like so:

(add-hook 'org-mime-html-hook
      (lambda ()
        (org-mime-change-element-style "ul.org-ul li" "font-family: Georgia,serif;")
        (goto-char (point-min))
        (org-mime-change-element-style "ol.org-ol li" "font-family: Georgia,serif;")
        (goto-char (point-min))
        (org-mime-change-element-style ".done" "color:#00bb00")))

this worked for me

how to use CSS to change styling of elements in org-mime emails?

3 Answers3