skip to Main Content

I am working on a mail template for an inventory confirmation email and the mail I have to do contains something that I am struggling to find resources on so any resource about it if you know is helpful.
I am trying to make a responsive mail template that also looks good on outlook/microsoft mail and making circle for item colour presents the most trouble to me.
This is the image

2

Answers


  1. You can use the <style> tag in email to create something like this. Inline styles are also supported.

    .circle{
        height: 16px;
        width: 16px;
        border-radius: 50%;
        outline: 2px solid;
        outline-offset: 2px;
        background-color: #f589d9;
    }
    <div class="circle"></div>
    Login or Signup to reply.
  2. Here’s an example on how to do this with HTML, CSS, and a dedicated VML fallback for The Outlooks on Windows.

    <!DOCTYPE html>
    <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Question regarding CSS in Outlook mail temp</title>
      <!-- https://stackoverflow.com/questions/70364018/question-regarding-css-in-outlook-mail-temp?noredirect=1#comment124384406_70364018 -->
        <!--[if mso]>
        <xml>
        <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
    </head>
    <body>
      <!--[if !mso]><!-->
      <div style="width:24px;" role="img" aria-label="Pink color">
        <div style="border:4px solid #000; border-radius:50%;">
          <div style="padding:2px;">
            <div style="width:12px; height:12px;background-color:#f587d8; border-radius:50%;"></div>
          </div>
        </div>
      </div>
      <!--<![endif]-->
        <!--[if mso]>
      <v:group style="position:relative; width:24px; height:24px;" coordsize="24,24">
          <v:oval style="position:absolute; left:0; top:0; width:24px; height:24px; z-index:1;" stroked="false" fillcolor="#000000"></v:oval>
          <v:oval style="position:absolute; left:4px; top:4px; width:16px; height:16px; z-index:2;" stroked="false" fillcolor="#ffffff"></v:oval>
          <v:oval style="position:absolute; left:6px; top:6px; width:12px; height:12px; z-index:3;" stroked="false" fillcolor="#f587d8"></v:oval>
      </v:group>
        <![endif]-->
    </body>
    </html>
    

    Here are test results of rendering on Email on Acid.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search