Remove default CSS in emails

Product Support
1

Your software
My Mautic version is: 5.0.3
My PHP version is: 8.1.27
My Database type and version is: 10.5.22-MariaDB-cll-lve

Your problem
My problem is:

I want to send an email that looks like a plain normal email that I sent from a typical email program. It seems like using the Truly Personal theme would be the way to go. However, when I send myself a test message using that theme, there is CSS in the design that sets body { padding: 0; }. This causes the message to look bad in Apple Mail, and the web-based Fastmail reader. The text is completely at the far left edge, which is unlike normal messages. It doesn’t have standard padding.

I want to remove this padding: 0; setting. I’ve tried switching to Blank theme, and also making a new theme based on Truly Personal. However, no matter what I do, Mautic always injects a segment a CSS at the end of the <head> section. This injected CSS looks like this:

<style type="text/css">
    #outlook a {
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }

    p {
      display: block;
      margin: 13px 0;
    }
  </style>

How can I prevent this from being injected into my custom theme? In my custom theme, I don’t have any code in the Twig template that would direct Mautic to add that. I also don’t see any in Blank template, but yet, it’s always there in the rendered email. How can edit this or get rid of it entirely?

Thank you for any help you can provide.

Wayne.

2

Hi, by custom theme you mean you uploaded a new theme to Mautic?
Did you check the other files in the package?

3

@joeyk, thanks for your response. Yes, I uploaded a new theme to Mautic based on the Truly Personal existing theme, and I did update the other metadata-type files, config.json and composer.json.

However, after some more debugging today, I think that’s all a red herring. The extra CSS appears to be injected by the Builder tool. Leave my custom theme aside, if I do the following:

  • Create a new email.
  • Choose the included Truly Personal theme for the email.
  • Click Builder and customize the text and Save.
  • Switch to the Code View.

At this point, in the code view, I can see the CSS that I posted originally. That CSS is not part of the Truly Personal email template. Searching the Mautic source code, I can see that CSS is in the builder javascript file, so I think the builder is adding it.

Fortunately, I can delete the extra CSS in Code View, and as long as I stay in Code View, it doesn’t come back. So, this is a workaround that I have now in order to send the emails with the formatting from the original template. But, it seems like it shouldn’t be happening.