Mail Design CSS doesn't work

iKaros · September 22, 2022

Hello.

We are editing the design and format of the emails that customers receive and we have found several problems.

- The CSS code does not load correctly when sending the email.
- Some images do not load.

This is how it should look like:
https://i.imgur.com/NHtkcp1.png

And this is how it looks:
https://i.gyazo.com/f4ddcfbee198d07e110112845e3deb43.png

The structure we currently have is:
Global Email CSS Styling

.welcome-img{width: 50%; background-image: url('https://universalgg.com/assets/img/mails/image1.png'); background-position: left; background-size: cover; background-repeat: no-repeat;}.welcome-copyright{color: #DDDDDD; font-size: 12px; text-align: center;}body{font-size: 17px; line-height: 25px; color: #f1f1f1; font-family: 'Open Sans', sans-serif; font-weight: 400; margin: 0px; background-color: #070B41;}

Client Email Header Content

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style type="text/css">
            [EmailCSS]
  </style>
</head>
<body>

Client Email Footer Content

            </body>
</html>

Welcome Content Mail:

<table style="background-color: rgb(3 5 33 / 87%); border-radius: 20px; overflow: hidden; margin-top: 20px;" border="0" width="1140" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td>
<table style="padding: 50px 40px 50px 65px;" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding-bottom: 35px;" colspan="2"><img style="max-width: 430px;" src="https://universalgg.com/assets/img/mails/logo.png" alt="logo" width="100%" height="auto" /></td>
</tr>
<tr>
<td style="padding-bottom: 25px; font-size: 22px; font-weight: bold; color: #fff;" colspan="2">Welcome!</td>
</tr>
<tr>
<td style="padding-bottom: 25px;" colspan="2">Hi {$client_first_name}, please review this email in its entirety as it contains important information.</td>
</tr>
<tr>
<td style="padding-bottom: 30px;" colspan="2">You have registered your account on {$client_signup_date}. You will need your email address and the password you chose during registration to log in. If you created your account as part of placing a new order with us, you will receive an order confirmation email shortly.</td>
</tr>
<tr>
<td style="padding-bottom: 30px;" colspan="2">Please do not reply to this email, it is an automated message. We send you a cordial greeting, thank you for trusting us.</td>
</tr>
</tbody>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="border-top: 1px solid #707070;"> </td>
</tr>
</tbody>
</table>
<table style="padding: 30px 40px 30px 65px;" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr style="vertical-align: middle;">
<td style="padding-bottom: 20px; font-size: 15px; font-weight: 500; color: #1094f0;"><a style="text-decoration: none; color: #1094f0;" href="https://universalgg.com">Website</a>  |   <a style="text-decoration: none; color: #1094f0;" href="billing.universalgg.com">Client Area</a>  |   <a style="text-decoration: none; color: #1094f0;" href="#">Contact</a></td>
<td style="padding-bottom: 13px; text-align: right;"><a href="https://twitter.com/UniversalGamg"><img style="display: inline-block; margin-right: 15px;" src="https://universalgg.com/assets/img/mails/s_twitter.svg" alt="icon" /></a> <a href="https://www.instagram.com/universal_gg/"><img style="display: inline-block; margin-right: 15px;" src="https://universalgg.com/assets/img/mails/s_instagram.svg" alt="icon" /></a> <a href="#"><img style="display: inline-block; margin-bottom: -1.5px;" src="https://universalgg.com/assets/img/mails/s_discord.svg" alt="icon" /></a></td>
</tr>
<tr>
<td class="welcome-copyright" colspan="2">2018-2022 © LYHUB OÜ</td>
</tr>
</tbody>
</table>
</td>
<td class="welcome-img"> </td>
</tr>
</tbody>
</table>

What we're doing wrong?
Thanks for help. Good day!

iKaros · May 2, 2023

Hello, i still need help with this thread.

WHMCS John · May 2, 2023

Hi @iKaros,

Each email client will render messages differently.

How does the email look when it leaves WHMCS when viewed in the Configuration > System Log > Email Message Log?

iKaros · May 2, 2023

14 minutes ago, WHMCS John said:

Hi @iKaros,

Each email client will render messages differently.

How does the email look when it leaves WHMCS when viewed in the Configuration > System Log > Email Message Log?

How looks now:

How must looks:

:

iKaros · May 3, 2023

YOU CAN USE MY EMAIL DESIGN FOR YOUR COMPANY, THANKS TO THIS COMMUNITY I HAVE FOUND A LOT OF COMMUNITY CONTENT, SO I GIVE YOU MY PERMISSION TO USE IT.

Post Update:

After a long time working on the code, I have managed to get it to look correct. There were many problems that I am going to name now, which I fixed to make it display correctly;

Global Email CSS Styling: Some generic tags will not work, for example 'body', instead of adding it to Global Email CSS Styling, I added it directly to the HTML code to make it work.

Error ❌

body{font-size: 17px; line-height: 25px; color: #f1f1f1; font-family: 'Open Sans', sans-serif; font-weight: 400; margin: 0px; background-color: #070B41;}

Solution ✅

<body style="font-size: 17px; line-height: 25px; color: #f1f1f1; font-family: 'Open Sans', sans-serif; font-weight: 400; margin: 0px; background-color: #070B41;">

Sometimes you have to add an '!important' to the CSS code, because another tag is replacing it. For example, I wanted to put links with a different color and no style;

Error ❌

a{text-decoration: none; color: #1094F0;}

Solution ✅

a{text-decoration: none!important; color: #1094F0!important;}

Some images on some providers do not load correctly because it can detect that the domain is not secure. For example;

Error ❌

https://universalgg.com/assets/img/mails/logo.svg

Solution ✅

https://i.imgur.com/7nQbkxQ.png

It has taken me a long time to investigate, since on localhost it was working correctly. I have tried various SMTP providers and it was working fine too.

Conclusion: The error is from WHMCS and not from my design, but it can be solved.

All code:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    .main-table{background-color: rgb(3 5 33 / 87%); border-radius: 20px; overflow: hidden; margin-top: 20px;}
    .content-table{padding: 50px 40px 50px 65px;}
    .h1-table{padding-bottom: 25px; font-size: 22px; font-weight: 700; color: #fff;}
    .btmspace-table{padding-bottom: 30px;}.top-line{padding-top: 30px;}
    .grey-line{border-top: 1px solid #707070;}
    .welcome-img{width: 50%; background-image: url('https://universalgg.com/assets/img/mails/img.webp'); background-position: left; background-size: cover; background-repeat: no-repeat;}
    .welcome-copyright{color: #DDDDDD; font-size: 12px; text-align: center;}
    a{text-decoration: none!important; color: #1094F0!important;}
  </style>
</head>
<body style="font-size: 17px; line-height: 25px; color: #f1f1f1; font-family: 'Open Sans', sans-serif; font-weight: 400; margin: 0px; background-color: #070B41;">

<table width="1140" border="0" align="center" cellpadding="0" cellspacing="0" class="main-table">
  <tr>
    <td>
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="content-table">
        <tbody>
          <tr>
            <td colspan="2" style="padding-bottom: 35px;">
              <img src="https://universalgg.com/assets/img/mails/logo.svg" style="max-width: 430px;" width="100%" height="auto" alt="logo">
            </td>
          </tr>
          <tr>
            <td colspan="2" class="h1-table">
              ¡Bienvenido!
            </td>
          </tr>
          <tr>
            <td colspan="2" class="btmspace-table">
              Hola {$user_first_name}, revisa este correo electrónico en su totalidad, ya que contiene información importante.
            </td>
          </tr>
          <tr>
            <td colspan="2" class="btmspace-table">
              Has registrado tu cuenta el día {$user_signup_date}. Necesitarás tu dirección de correo electrónico y la contraseña que elegiste durante el registro, para iniciar sesión.</br>
              Si creó la cuenta como parte de la realización de un nuevo pedido con nosotros, en breve recibirás un correo electrónico de confirmación del pedido.
            </td>
          </tr>
          <tr>
            <td colspan="2">
              Por favor, no responda a este mail, es un mensaje automático. Le enviamos un cordial saludo, gracias por confiar en nosotros.
            </td>
          </tr>
        </tbody>
      </table>

      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="top-line">
        <tbody>
          <tr>
            <td class="grey-line"></td>
          </tr>
        </tbody>
      </table>

      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="padding: 30px 40px 30px 65px;">
        <tbody>
          <tr style="vertical-align: middle;">
            <td style="padding-bottom: 20px; font-size: 15px; font-weight: 500; color: #1094F0;">
              <a href="https://universalgg.com">Sitio web</a>&nbsp; | &nbsp;
              <a href="{$whmcs_url}">Área de clientes</a>&nbsp; | &nbsp;
              <a href="mailto:info@universalgg.com">Contactar</a>
            </td>
            <td style="padding-bottom: 13px; text-align: right;">
              <a href="https://twitter.com/UniversalGamg"><img src="https://universalgg.com/assets/img/mails/s_twitter.svg" style="display: inline-block; margin-right: 15px;" alt="icon"></a>
              <a href="https://www.instagram.com/universal_gg/"><img src="https://universalgg.com/assets/img/mails/s_instagram.svg" style="display: inline-block; margin-right: 15px;" alt="icon"></a>
              <a href="https://discord.gg/nMxTQ5UZpM"><img src="https://universalgg.com/assets/img/mails/s_discord.svg" style="display: inline-block; margin-bottom: -1.5px;" alt="icon"></a>
            </td>
          </tr>
          <tr>
            <td colspan="2" class="welcome-copyright">
                2018-2023 &#169; {$company_name}
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td class="welcome-img"></td>
  </tr>
</table>

</body>
</html>

Edited May 3, 2023 by iKaros

iKaros · May 4, 2023

Lastest update:

The another code works correctly at iCloud but in Gmail shows wrong, so changing some stuffs the final code to show correct at iCloud, Gmail and any popular provider is:

<!DOCTYPE html>
<html ⚡4email data-css-strict>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body style="font-size: 17px; line-height: 25px; color: #f1f1f1; font-family: 'Open Sans', sans-serif; font-weight: 400; margin: 0px; background-color: #070B41;">

<!-- this ensures Gmail doesn't trim the email -->
<span style="opacity: 0"> {{ randomness }} </span>
<table width="1140" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color: #030521de; border-radius: 20px; overflow: hidden; margin: 20px auto 20px auto;">
  <tr>
    <td>
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="padding: 50px 40px 50px 65px;">
        <tbody>
          <tr>
            <td colspan="2" style="padding-bottom: 40px;">
              <img src="https://i.imgur.com/7nQbkxQ.png" style="max-width: 430px;" width="100%" height="auto" alt="logo">
            </td>
          </tr>
          <tr>
            <td colspan="2" style="padding-bottom: 25px; font-size: 22px; font-weight: 700; color: #fff;">
              <span>Hola, {$user_first_name}.</span>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="padding-bottom: 30px;">
              <span>Necesitamos verificar su dirección de correo electrónico. Esto es necesario para confirmar la propiedad del mismo.</span>
              <span style="display: block;"><a href="{$verification_url}" style="text-decoration: none; color: #f0ca10">CONFIRMAR CORREO ELECTRÓNICO</a></span>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="padding-bottom: 30px;">
              <span>Si tiene problemas, intente copiar y pegar la siguiente URL en su navegador:</span>
              <span style="display: block; text-decoration: none; color: #1094f0;">{$verification_url}</span>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <span>Este enlace es válido solo por 60 minutos. Si ha caducado, inicie sesión en nuestro <a href="{$whmcs_url}" style="text-decoration: none; color: #1094f0;">área de clientes</a> para solicitar un nuevo enlace.</span>
            </td>
          </tr>
        </tbody>
      </table>

      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="padding-top: 30px;">
        <tbody>
          <tr>
            <td style="border-top: 1px solid #707070;"></td>
          </tr>
        </tbody>
      </table>

      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="padding: 30px 40px 30px 65px;">
        <tbody>
          <tr style="vertical-align: middle;">
            <td style="padding-bottom: 20px; font-size: 15px; font-weight: 500; color: #1094F0;">
              <a href="https://universalgg.com" style="text-decoration: none; color: #1094f0;">Sitio web</a>&nbsp; | &nbsp;
              <a href="{$whmcs_url}" style="text-decoration: none; color: #1094f0;">Área de clientes</a>&nbsp; | &nbsp;
              <a href="mailto:info@universalgg.com" style="text-decoration: none; color: #1094f0;">Contactar</a>
            </td>
            <td style="padding-bottom: 13px; text-align: right;">
              <a href="https://twitter.com/UniversalGamg"><img src="https://i.imgur.com/tw6ULqv.png" style="display: inline-block; margin-right: 15px; width: 20px; height: auto;" alt="icon"></a>
              <a href="https://www.instagram.com/universal_gg/"><img src="https://i.imgur.com/Ulql9vH.png" style="display: inline-block; margin-right: 15px; width: 20px; height: auto;" alt="icon"></a>
              <a href="https://discord.gg/nMxTQ5UZpM"><img src="https://i.imgur.com/HZMV6Ic.png" style="display: inline-block; margin-bottom: -1.5px; width: 20px; height: auto;" alt="icon"></a>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="color: #DDDDDD; font-size: 12px; text-align: center;">
                2018-2023 &#169; {$company_name}
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50%; background-image: url('https://i.imgur.com/xldJQPy.jpg'); background-position: left; background-size: cover; background-repeat: no-repeat;"></td>
  </tr>
</table>
<!-- this ensures Gmail doesn't trim the email -->
<span style="opacity: 0"> {{ randomness }} </span>

</body>
</html>

Gmail don't trust in all domains to show images, so i am using imgur.com.
Gmail will hide content if you don't set

<!-- this ensures Gmail doesn't trim the email -->
<span style="opacity: 0"> {{ randomness }} </span>

I add some amp integrations that works with Gmail.
Don't add a CSS style tag in head. For some reason some providers only get the style at the same code line.
Only Google Official Fonts will work. Custom fonts in Gmail won't be allowed.

pRieStaKos · May 5, 2023

https://app.bootstrapemail.com/editor

iKaros · May 7, 2023

On 5/5/2023 at 9:13 PM, pRieStaKos said:

https://app.bootstrapemail.com/editor

Hello, you didn't read the post.

Good day.

berstein · May 9, 2023

Sir @iKaros do you use internal WHMCS mail configuration to send the email (e.g. email send button or API) ?

I have a question regarding email styling, where I want to use Symfony mailer package to send email (I have various requirements which are not supported by using sendmail API).
The problem is, the WHMCS variable for company name and company logo won't loaded properly.

image.png.2c4a4f6f14f5c215e93070e73c4a0707.png

Did you face similar issue or maybe do you have solution to this issue?

Thanks

iKaros · May 10, 2023

On 5/9/2023 at 5:45 AM, berstein said:

Sir @iKaros do you use internal WHMCS mail configuration to send the email (e.g. email send button or API) ?
...............

Hello good day.

Right now i am using iCloud SMTP, I have purchased the 1 € per month plan to use custom domains.

<td colspan="2" style="color: #DDDDDD; font-size: 12px; text-align: center;">
	2018-2023 &#169; {$company_name}
</td>

For me {company_name} works well, i have configured it in System Settings - General Settings - General:

I only have a problem with the {company_logo} PHP Tag, doesn't work but i am using imgur instead.

Edited May 10, 2023 by iKaros

Sign In

Mail Design CSS doesn't work

Recommended Posts

iKaros

Link to comment

Share on other sites

iKaros

Link to comment

Share on other sites

WHMCS John

Link to comment

Share on other sites

iKaros

Link to comment

Share on other sites

iKaros

Link to comment

Share on other sites

iKaros

Link to comment

Share on other sites

pRieStaKos

Link to comment

Share on other sites

iKaros

Link to comment

Share on other sites

berstein

Link to comment

Share on other sites

iKaros

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Latest Activity

Blog

Technical Support

Important Information