We are selfhosting Zammad. Connected with MS Graph shared mailbox.
Our signature added by Exclaimer in daily mail traffic looks like this:
If we send an email from Zammad, the result is this:
It appears Zammad’s stylesheets are conflicting with Exclaimer stylesheets. Is this a known issue? Can it be solved, or does a workaround exist? Note Exclaimer adds the signature after Zammad sent it via Exchange mail rule.
Think i found it.
Comment out all the styles in here:
zammad-zammad-scheduler-1:/opt/zammad/app/views/mailer/application_wrapper.html.erb
Example:
<!DOCTYPE html>
<html dir="auto">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<style type="text/css">
body {
###html_email_css_font###
}
/* img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
} */
wow thank you for that ! I should have searched first - was chasing this up with Exclaimer, and have the same issue, formatting is all messed up.
What they have narrowed it down is the table part as it includes its own styling instructions inside every email it sends. One of those instructions tells every table in the email to display as 100% width blocks with spacing between them:
css
table {
display: block;
width: 100%;
margin: 0 0 16px;
}
This rule doesn’t just apply to Zammad’s own content, it applies to any table anywhere in that email, including the signature table Exclaimer adds afterwards.
Note for others - after modifying this file as per below, there is NO need to restart anything, as it is picked up on every email send (wow I would have assumed this is cached until service restart)
<!DOCTYPE html>
<html dir="auto">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<style type="text/css">
body {
###html_email_css_font###
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
h1,
h2,
h3 {
margin-top: 8px;
margin-bottom: 4px;
}
p {
margin: 8px 0;
min-height: 1.25rem;
}
blockquote {
padding: 1px 12px;
border-left: 5px solid #eee;
}
code {
padding: 1px 3px;
border-radius: 6px;
background-color: hsla(0, 0%, 0%, 0.1);
white-space: pre-wrap;
overflow-wrap: break-word;
}
pre {
margin: 8px 0;
padding: 10px;
border-radius: 6px;
border: 0;
background-color: hsla(0, 0%, 0%, 0.1);
white-space: pre-wrap;
word-break: break-all;
}
pre code {
padding: 0;
background: transparent;
}
/* exclaimer-patch: generic table/td/th/col rules removed and scoped to
.zammad-table so they don't break Exclaimer signature tables. */
table.zammad-table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table.zammad-table col {
width: auto;
}
table.zammad-table {
max-width: 100%;
border: 2px solid hsl(0, 0%, 69%);
table-layout: fixed;
display: table;
margin: 8px 0;
overflow: hidden;
}
table.zammad-table td,
table.zammad-table th {
min-width: 1em;
border: 1px solid hsl(0, 0%, 69%);
vertical-align: top;
position: relative;
padding: 3px 5px;
box-sizing: border-box;
}
table.zammad-table td > *,
table.zammad-table th > * {
margin: 0;
}
table.zammad-table th {
text-align: unset;
background-color: hsla(0, 0%, 0%, 0.1);
}
hr {
margin: 8px 0;
height: 1px;
background-color: hsla(0, 0%, 0%, 0.1);
font-size: 0;
border: 0;
}
</style>
</head>
<body style="###html_email_css_font###;">###html###</body>
</html>