Skip to main content

GMail Styling

David Daley

Has anyone found success in styling GMail messages?  It seems gmail strips out all style sheets and inline styles when displaying the email message.

0

Comments

3 comments

Date Votes
  • VISUI
    • Logi Info Ninja

    Hey David,

    I'm not sure if anything has changed recently, but I was previously able to receive emails sent out from Logi Info that utilized basic HTML styling.

    Here is a sample "Email Body" I used when the Body Type was set to "HTML"

     

    <!DOCTYPE HTML>
    <HTML xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:rdXslExtension="urn:rdXslExtension">
      <HEAD>
        <TITLE>Reporting</TITLE>
        <META http-equiv="X-UA-Compatible" content="IE=edge" />
      </HEAD>
      <BODY onload="">
       <STYLE> 
         body {
          background-color: #FFFFFF;
         }
         .footer {
          width: 100%;
          position: absolute;
          bottom: 20px;
          Vertical-Align: Middle; 
          Display: flex; 
          Flex-Direction: Row; 
          Justify-Content: Center; 
          Align-Items: Center; 
          Padding: 10px;
         }
        </STYLE>

        <DIV style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: 30px; " id="divContent">
          <IMG src="https://www.mealticket.com/hs-fs/hubfs/Artwork%2012.png?width=192&amp;name=Artwork%2012.png" width="192" height="30" TITLE="Mealticket logo" alt="" id="imgPowerHealth"></IMG>
          <DIV id="divText">
            <H3 STYLE="Color: #FFFFFF; Text-Align: Center;">@Constant.AppTitle~ - @Request.ReportTitle~</H3>
          </DIV>
        </DIV>
        <BR>
        <BR>
        <DIV class="messagebody">@Request.EmailBody~</DIV>
        <BR>
        <BR>
        <DIV class="footer">
         <DIV style="Text-Align: Center;">©2023 Power Health - All Rights Reserved</DIV>
        </DIV>
      </BODY>
    </HTML>
    0
  • David Daley

    Hey John,

    Maybe I wasn't clear.  I am trying to send a simple report with a Data Table.  The table has some basic styles, like right alignment of numbers, fonts and column heading background colors. 

    Using the GMail web interface or the GMail app, it seems to strip out all style sheet links, and even any inline styles. 

    Using a email client, like Outlook or Thunderbird works fine.  The Yahoo email app also renders it ok. 

    Wondering if there is a work around for that.

    0
  • Neil Quinby

    Hi David

    Gmail like many email clients only supports a small subset of css selectors. Google has a fairly comprehensive set of notes in the Google Developer environment that should help you. In the main my advice would be to use table based layouts rather than the more common (and current) div based constructs and keep all your styling in-line.
    Take a look here for the Google Developer guides to Gmail: https://developers.google.com/gmail/design/css

    I hope this helps.

    Regards

    Neil

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post