Hi, I have just started exploring Mautic. I have built my own template for an email shot using Code Mode. I have custom CSS however it doesn’t load with the code, is there a way of doing this? Otherwise I’ve just wasted a few hours. I’ve tried googling this but cannot find the question or answer.
Many thanks in advance.
Hi, I have just started exploring Mautic. I have built my own template for an email shot using Code Mode. I have custom CSS however it doesn’t load with the code, is there a way of doing this? Otherwise I’ve just wasted a few hours. I’ve tried googling this but cannot find the question or answer.
Many thanks in advance.
Hi @Geomians - what is your experience with email development? The reason I ask is because using CSS in email is much more limited than using it in regular web projects that display in a browser, for example. But it’s also possible you’re running into a Mautic issue. If you want to share a bit of your email code I can try to provide some help.
Hi @chris0928 , thanks for the reply. I’ve built emails in the past using email vision for a large corporate, although it was a while ago and I’ve all but forgotten. I know there is a restriction when using CSS in emails, however Mautic do use their own generic CSS in these emails, hence I’m a little puzzled as to why I can’t add my own. It took me quite a while to make it responsive too. I actually stole someone’s template (being a lazy sod) and ended up nearly completely re-inventing it. Anyway this is the stuff below.
Cheers.
I tried to post the code but it doesn’t seem to want to let me, is there another way I can do it?
Hmm, if you’re modifying a template then I’d think that would work! If you want to share the Mautic public preview URL to the email, I can just view source. Probably cleaner than pasting a bunch of code here anyway 
Hey @Geomians, I’ve had good luck with the code emails, since version 2.4.x. Below is sample code I use (and I just call in my own CSS file and Google webfonts. Ditched the tables and crap. So far works great.
<!DOCTYPE html>
<html>
<head>
<title>{subject}</title>
<link rel="stylesheet" href="https://yoursite.com/emails.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet" />
</head>
<body style="margin:0;padding:0;">
<div class="email-body"><br/><br/>
<!----------------------->
<!-- Email Starts Here -->
<!----------------------->
<!----------------------->
<!-- Email Ends Here -->
<!----------------------->
</div>
<p><div class="unsubscribe">{unsubscribe_text} | {webview_text}</div></p>
</div>
</body>
</html>