2017-12-10 6 views
-1

Ich nahm eine Vorlage und angepasst es. Ich habe eine Hintergrundfarbe hinzugefügt, die in Chrome angezeigt wird, wenn ich die Datei .html in Chrome lade, aber wenn ich versuche, diese mit Outlook zu laden, wird die Hintergrundfarbe nicht angezeigt. Ich habe mich umgesehen, aber ich bin neu in HTML, also habe ich nicht ruhig verstanden, wie man diese Antworten auf meine spezifische Situation anwendet, vor allem, weil ich nicht den ganzen Code geschrieben habe, ich bekam das zur Bearbeitung.Hintergrundfarbe funktioniert nicht in Outlook

${config_styles_link(color: #227700; text-decoration: none !important)} 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
    <head> 
 

 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 
    </head> 
 
    <body> 
 

 
    <table cellpadding="0" border="0" style="line-height: 1.2em; font-family: 
 
    'Helvetica Neue', Helvetica, Arial, sans-serif; border-spacing: 0px; font- 
 
    size: 100%; font-color: white; border: 0; background-color: #fff;" 
 
    cellspacing="0" width="100%"> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <table border="0" cellspacing="0" cellpadding="0" width="650" 
 
    align="center" style="line-height: 1.2em; font-family: 'Helvetica Neue', 
 
    Helvetica, Arial, sans-serif; border-spacing: 0px; font-size: 100%; 
 
    background-color: 252734; border: 1px solid #ccc; margin-top: 5px; margin- 
 
    bottom: 5px;" > 
 
      
 
    <tbody> 
 
       <tr> 
 
        <td style="padding: 16px 16px 0px 20px; vertical-align: middle; 
 
    font-size: 18px; color: grey;" align="left"> 
 
        </td> 
 
        <td width="200" style="padding:16px 16px 0px 14px;vertical- 
 
    align:middle; line-height:12px;" align="right"> 
 
        
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2" style="padding: 8px 16px 8px 20px;"> 
 
    <imgsrc="static.pexels.com/photos/11406/c12ee0f379643a278198b2086afd3b9c.jp"  
 
    style="width:600px;height:142px;"> 
 
    <p style= "color: D2D5EB">Hello ${user_first_name},</p> 
 
    <p style= "color: D2D5EB"> 
 
    We are looking forward to your participation in ${webcast_title}. 
 
    <div style="border:1px white; height: 60px; width: 180px; margin-left: 80px; 
 
    font-family: arial; font-size: 17px; font-weight: 600; color: D2D5EB; 
 
    background-color: 252734; clear:both;"> 
 
     ${webcast_details} 
 
    </div> 
 

 
    <img src="https://thumbs.dreamstime.com/z/skull-human-size-robot-isolated- 
 
    black-35652577.jpg" style="width:104px;height:142px;"> 
 

 

 

 
    </p> 
 
    <hr style="clear:both;"> 
 

 

 
    <p>&nbsp;</p> 
 

 
    <p style ="clear:both; color: D2D5EB;">You can test your system now to make 
 
    sure you can view our webinars and videos: ${help_viewers_systemtest}.</p> 
 

 
    <p style="color: D2D5EB;">${channel_webcasts}</p> 
 

 
    <p style ="font-family: arial; font-size: 11px; font-weight: 600; color: 
 
    grey; text-align: center;"> In the meantime you can check out our website by 
 
    clicking <a href="https://example.com/">here</a> for more 
 
    information about what we do, future events and to check out our blog!</p> 
 

 
    <p style="font-family: arial, sans-serif; font-size: 12px; color: 
 
    D2D5EB;">Thank you,<br /> 
 
        ${webcast_channel_title}</p> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td style="padding: 0px 16px 0px 20px; font-family: 
 
    Arial,Helvetica,sans-serif; color: #000; font-size: 11px; color: D2D5EB;"> 
 
        <p>You received this email because you are subscribed to <a 
 
    style="color: D2D5EB;; text-decoration: none !important" 
 
    href="${webcast_channel_url}&utm_content=channel">${webcast_channel_title} 
 
    </a> on BrightTALK.</p> 
 
        </td> 
 
        <td width="120" style="padding:4px 16px 0px 0px;vertical- 
 
    align:top;" align="right"> 
 
        <img title="BrightTALK" 
 
    src="https://p.brighttalk.com/platform_email/brighttalklogo.png" 
 
    alt="BrightTALK" width="120" height="34" /> 
 
        </td> 
 
       </tbody> 
 
      </table> 
 
      <table border="0" cellspacing="0" cellpadding="0" width="650" 
 
    align="center" style="padding: 0px 0px; line-height: 1em;"> 
 
       <tbody> 
 
       <tr> 
 
        <td style="padding-top: 0px; font-family: Arial,Helvetica,sans- 
 
    serif; color: #000; font-size: 11px; background-color: 252734;"> 
 
    <p style="font-size:11px; color: D2D5EB">All times are shown in your time 
 
    zone: ${user_timezone_alias}</p> 
 
        <p style="color: D2D5EB;">To update your email preferences, 
 
    please visit: ${user_link_preferences}<br /> 
 
         Should you wish to unsubscribe from this channel please 
 
    visit: ${user_link_mybrighttalk}</p> 
 
        <p style="color: D2D5EB;"> 
 
         For more information, please visit us at <a style="color: 
 
    #227700; text-decoration: none !important" 
 
    href="http://www.brighttalk.com">www.brighttalk.com</a> <br /> 
 
         BrightTALK&trade;, 501 Folsom Street, 2nd Floor, San 
 
    Francisco, CA 94105</p> 
 
        <p style="color: D2D5EB;">${email_unsubscribe_link}</p> 
 
        </td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </body> 
 
</html>

Der Hintergrund in Aussicht weiß erscheint, dreht sich alles andere bis in Ordnung. Ich möchte, dass die Hintergrundfarbe eine marineblaue Farbe ist.

+0

Sie die Raute-Symbol fehlt ('#'), bevor einige der Hex Farbcodes für die 'Hintergrund-color' und' color' Stilregeln. –

Antwort

0

Der Hintergrund erscheint weiß, weil Sie die

background-color: #fff; 

Ändern Sie den #fff weiße Farbe für eine andere Farbe, die Sie wollen

haben.

Versuchen, zum Beispiel:

background-color: #0E061C; 
Verwandte Themen