E-Mail Themes - CSS

Product Support
1

Hi all

I work on a mail theme, it kind of works. What I don’t get (and what doesn’t work) ist the css-file in the /css-Folder. How do the email.html know, where the css file is located? I tried to call it “style.css” or “themename.css”, no result.

Any ideas?

OLAF

2

Hi, thanks for coming back
I just want to use a css file for the formatting, e.g. font-size. For now I put it in the html-File itself (

). Whatever I put in the css-file, doesn’t work :frowning:
3

Olaf,
if you want to use css in e-mails, use inline styles like:

...

and do not refer to an external css file. You can copy your css content from the file into the style section and try. So if you open the email.html.php in the theme you’re working on, as in, themesmauvehtml folder. You can insert the styles you want to use there. This gives you more structure vs. having to define each element style. Test with different e-mail clients though.
Good luck.

4

Good morning!
Right, NOW got it :slight_smile: I thought, the CSS can be used for the mailtemplate, as well. Thanks for your assistance, guys!
Olaf :slight_smile:

5

Guys, maybe you missed my previous comment, but the CSS styles in the email templates must be inline.

6

Hi escopecz, thanks a lot!

7

I did see your comment… inline css with in the head works in both gmail and hotmail – I tested in hotmail, gmail, outlook, and yahoo, and they render as they should; as well as on the mobile side. To be sure, after you create your content test with multiple e-mail clients.

Taking a closer look at the article you posted, it’s dated Nov. 2007 ( https://css-tricks.com/using-css-in-html-emails-the-real-story/ ) possibly it does not apply anymore, so the no-no is a no-no no-more… Both the gmail and hotmail clients seem to be applying the inline css defined within the in the section in my tests.

Thanks,

8

Well, you never know in what email client the users will open your email. But thanks for your research. Use whatever works for you.

I found a CSS support table: https://www.campaignmonitor.com/css/

9

Good resource with xref table. Not sure why they mark gmail as not supporting styles in head, it works with all the tests I’ve run.
In any case, appreciate the follow up, you all are doing an excellent job supporting, and mautic is well built and works well.
Thanks,

10

Hi all
I work on a mail theme, it kind of works. What I don’t get (and what doesn’t work) ist the css-file in the /css-Folder. How do the email.html know, where the css file is located? I tried to call it “style.css” or “themename.css”, no result.
Any ideas?
OLAF

11

Not sure what you are trying to do, but:

[quote]What you CAN’T do:

Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it’s a no-no. Hotmail will support a style section in the body but Gmail still doesn’t.

Link to an external stylesheet. Not many email clients support this, best to just forget it.

Background-image / Background-position. Gmail is also the culprit on this one.

Clear your floats. Gmail again.

Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn’t work.

Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.[/quote]
Source: https://css-tricks.com/using-css-in-html-emails-the-real-story/

This is not Mautic related though. It’s the limitation of email clients.

1 Like