Styling Mews Mailings 👨‍🎨


Userlevel 4
Badge

First things first: This post dives into some technical details about the Mews mailing templates and therefore is probably not suitable for everyone 🤖.

Lets be honest: The customization options for the mews mailings and the entire mailing handling is a bit lacking 🫠.

Especially frustrating is that mews adds content around the actual mailing so even if you edit these templates there is still a logo on top you probably don’t want in this form and some text at the bottom 😩.

I know that Mews is probably aiming for a very stress free system that mostly just works out of the box but i don’t think they should hinder “power users” unnecessarily that need to adjust these (fully) 😉.

–––

Right now i am exploring ways to tackle this problem and to bring our Mews mailings to a visual level that is appropriate and matching our other communication 🙌.

The first step was looking into the mailings code and search for ways to handle that unwanted content. Because Mews is adding this around the template you can edit afterwards, there is no way to actually remove that 😌.

But it would be possible to hide the unwanted content by adding a style into the template that does exactly that. Below is my try which works actually not that bad:

<style>

body {
background: #e6e4e0 !important;
margin: 0px !important;
}

body > div:first-child {
background: #FFF !important;
max-width: auto !important;
}

body > div:first-child > div:first-child,
body > div:first-child > div:last-child > table:last-child,
.flexibleLogo {
display: none !important;
}

</style>

Important to mention here is that i’ve used some CSS selectors which are problematic in the realm of e-mailings. To be exact first-child and child-combinator doesn’t work in all clients, so this reset is not consistent and may fail to hide the contents in some cases/clients 🙈.

I’ve already created an feedback idea for adjusting mailing templates but i have is a very straightforward suggestion for the mews dev team that doesn’t change the current system, is not hard to implement and still gives us the opportunity to fully customize these templates (maybe you can help with that @tom.horner or @MarketaOupi):

Consider adding some classes/ids to your mailings elements, especially the logo and the “don’t share this information” part so we can target that 😘.

With that we would be able to add an (robust) style to our templates to hide these elements which would look something like that:

<style>

#mews_mailing_body {
background: #e6e4e0;
margin: 0px;
}

#mews_mailing_content {
background: #FFF !important;
max-width: auto !important;
}

#mews_auto_logo,
#mews_info_disclaimer {
display: none !important;
}

</style>

 


3 replies

Userlevel 4
Badge

@MarketaOupi just wanted to ask if adding useful ids/classes to the mews mailings is a possibility?

Userlevel 6
Badge +1

Hello @jones.eth,

thank you for this topic, checking it with the team, we had a company wide conference this week, so we are a bit slower with responding :) 

Userlevel 4
Badge

@MarketaOupi thanks for responding 💪. Awesome that you looking into that 😊!

For us this a very big thing because it seems pretty straightforward to do for you guys and allows us to customize the mews mailings on a level that really would be huge! Changes like below and way beyond would become tangible just by you adding some of these classes to hide unwanted elements and target others:

 

Reply