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.

1 Like
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.

1 Like
4

I am seeing a similar issue to you with the Builder adding unwanted padding going from template to builder. Using an mjml-based theme that displays exactly as I want it on mjml.io, with a mix of padding values I have set on some mj-sections and some without any padding set.

When imported into the Builder, they are being ignored and over-written with the builder defaults (10px 25px) which are then output to the Builder view, and the ensuing HTML if you switch it to code mode. Similar padding is added to child elements like mj-text and mj-image too. I’m trying to make a process more efficient by using the builder (we currently build code outside of Mautic) but currently the team would have to unpick all the unwanted added padding in Code Mode in order to get the visual results we want.

How can these default padding values be told to be ignored, is there a way to set this in Mautic or the builder setup?

5

Further to this I noticed that on the actual mail preview this extra style information is not present, so it adds it for builder view but then removes it provided you don’t alter in the “Dimensions” panel. Odd!