Включить собственные html и css в подписи

ИЗМЕНИТЬ Я внедрил html в качестве подписи, но проблема с im теперь очень странная.

У меня есть подпись, и каждый раз я отправляю ее из Outlook на веб-почтовый сервис outlook, размещающий теги в html, и заполняет все интервалы. Как я могу это исправить.

У меня есть вопрос о подписи Outlook. Для моей работы я должен сделать подпись, поэтому она выглядит более профессионально. Я сделал тест, чтобы увидеть, как мне нужно реализовать его в HTML подписи, но я не могу это понять.

Это код, который Outlook создает:

    <style>
<!--
 /* Font Definitions */
 @font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;
    mso-font-charset:0;
    mso-generic-font-family:swiss;
    mso-font-pitch:variable;
    mso-font-signature:-520092929 1073786111 9 0 415 0;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
    {mso-style-unhide:no;
    mso-style-qformat:yes;
    mso-style-parent:"";
    margin:0cm;
    margin-bottom:.0001pt;
    mso-pagination:widow-orphan;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";
    mso-ascii-font-family:Calibri;
    mso-ascii-theme-font:minor-latin;
    mso-fareast-font-family:"Times New Roman";
    mso-fareast-theme-font:minor-fareast;
    mso-hansi-font-family:Calibri;
    mso-hansi-theme-font:minor-latin;
    mso-bidi-font-family:"Times New Roman";
    mso-bidi-theme-font:minor-bidi;}
p.MsoAutoSig, li.MsoAutoSig, div.MsoAutoSig
    {mso-style-priority:99;
    mso-style-link:"E-mailhandtekening Char";
    margin:0cm;
    margin-bottom:.0001pt;
    mso-pagination:widow-orphan;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";
    mso-ascii-font-family:Calibri;
    mso-ascii-theme-font:minor-latin;
    mso-fareast-font-family:"Times New Roman";
    mso-fareast-theme-font:minor-fareast;
    mso-hansi-font-family:Calibri;
    mso-hansi-theme-font:minor-latin;
    mso-bidi-font-family:"Times New Roman";
    mso-bidi-theme-font:minor-bidi;}
span.E-mailhandtekeningChar
    {mso-style-name:"E-mailhandtekening Char";
    mso-style-priority:99;
    mso-style-unhide:no;
    mso-style-locked:yes;
    mso-style-link:E-mailhandtekening;}
.MsoChpDefault
    {mso-style-type:export-only;
    mso-default-props:yes;
    mso-ascii-font-family:Calibri;
    mso-ascii-theme-font:minor-latin;
    mso-fareast-font-family:"Times New Roman";
    mso-fareast-theme-font:minor-fareast;
    mso-hansi-font-family:Calibri;
    mso-hansi-theme-font:minor-latin;
    mso-bidi-font-family:"Times New Roman";
    mso-bidi-theme-font:minor-bidi;}
@page WordSection1
    {size:595.3pt 841.9pt;
    margin:70.85pt 70.85pt 70.85pt 70.85pt;
    mso-header-margin:35.4pt;
    mso-footer-margin:35.4pt;
    mso-paper-source:0;}
div.WordSection1
    {page:WordSection1;}
-->
</style>


</head>

<body lang=NL style='tab-interval:35.4pt'>

<div class=WordSection1>

<p class=MsoAutoSig><span style='mso-fareast-font-family:Calibri;mso-fareast-theme-font:
minor-latin'><o:p>&nbsp;</o:p></span></p>

</div>

</body>

</html>

Я действительно не понимаю, где мне нужно вставить свой код. Это мой код:

<style>
a {
    text-decoration: none;
    color: inherit;
}

.wrapper {
    width:50%;
    font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}

.topText {
    font-size: 11pt;
    margin-bottom: 5px;
}

.topLine {
   border-top: 2px solid  #C80032;
   margin-bottom: 5px;
}

.content {
    height:100px;
    width: 100%;
    margin-bottom: 5px;
}

p {
    font-size:10pt;
}

.left-content {
    float:left;
    margin-right: 140px;
}

.right-content {
}

.name {
    margin: 0px !important;
    float: left;
}

.address {
    margin: 0px 0px 0px 20px;
}

.address_A {
    margin: 0px 0px 0px 30px;
}

.address_M {
    margin: 0px 0px 0px 14px;
}

.bottomBar {
    float: right;
    width:74.5%;
    height: 25px;
    background-color:#7F7B7B;
    color: white;
    font-size: 12pt;
    text-align: left;
    margin-left: 18px;
}

.tableStyle{
    margin-bottom: 5px;
}

.social-Blocks
{
    background-color:white;
    width: 25px !important;
    height: 25px !important;
    float:left;
    margin-left: 15px;
    text-align:center;
    font-size: 23px;
    color: #0987B2;
}

.bottom-bar-first{
    float: left;
    width:11%;
    height: 25px;
    background-color:#7F7B7B;
    color: white;
    font-size: 12pt;
}

.bottom_Span{
 margin-left: 10px;
}

.suplaconLogo{
    height:90px ;
    width:190px;
}

.logo{
    float: right;
}


</style>
<link rel="stylesheet" href="style.css"></head>

<div class="wrapper">
 <div class="topText">Met vriendelijke groet,</div>
    <div class="topLine"></div>
    <img class="logo" src="images/logo.png" height="80" width="350">
    <table class="tableStyle" cellpadding="0">
        <tr>
            <td><span><strong>Information</strong></span></td><td><span class="address_A"><strong>Information</strong></span></td>
        </tr>
        <tr>
            <td><span class="name">T</span><span class="address"> Information</span></td>
            <td><span class="address_A">Information</span></td>
        </tr>

        <tr>
            <td><span class="name">M</span><span class="address_M">Information</span></td>
            <td><span class="address_A">Information</span></td>
        </tr>

        <tr>
            <td><span class="name">E</span><span class="address">Information </span></td>
            <td><span class="address_A"><a href="">Information</a></span></td>
        </tr>
    </table>


    <div class="bottomStyle">
        <div class="bottom-bar-first"></div>
        <div class="social-Blocks"><a href="
"><span class="icon-linkedin center" target="blank"></span></a></div>
        <div class="social-Blocks"><a href="" target="blank"><span class="icon-facebook2 center"></span></a></div>
        <div class="social-Blocks"><a href="" target="blank"><img src="" height="25"></a></div>
        <div class="bottomBar"><span class="bottom_Span"><strong> Information</strong></span></div>
    </div>
</div>

Как я могу включить свой код в код Outlook или где мне нужно поместить мой код? Я нашел это, и кажется, что мой CSS действительно совместим:

Возможности создания HTML и CSS в Word 2007 в Outlook 2007

Ответ 1

ссылка на внешнюю таблицу стилей не поддерживается почти всеми почтовыми клиентами (наверняка Outlook не поддерживает ее).

поэтому я предлагаю вам поместить все в тег head > style

Ответ 2

Моя лучшая практика (даже если это звучит грубо) с подписями Outlook - это стиль подписи в MS Word и вставка этого блока текста в поле подписи Outlook в параметрах.

Я бы не использовал собственный пользовательский CSS в Outlook.

Ответ 3

  • Принесите все свои встроенные стили, это должно решить большинство ваших проблем, например:

< div class= "wrapper" style = "width: 50%; font-family: Calibri, Candara, Segoe," Segoe UI ", Optima, Arial, sans-serif;" >

  1. Включите свой код в файл HTML
  2. Открыть указанный HTML файл в браузере
  3. Выделите и скопируйте полученную подпись в буфер обмена
  4. Google, как добавить подпись для своей версии Outlook в вашей ОС (например, Outlook 2010 Windows)
  5. Вставить в поле подписи
  6. Готово. У вас должна быть подпись с кросс-клиентом, достойная признания.

На стороне заметки, которую я бы рекомендовал не копировать и вставлять из Word, если вы можете помочь.

Ответ 4

Ну, Outlook отстой. Это просто не поддерживает много CSS. И будь то настольный клиент или версия электронной почты, или даже почта hotmail или MSN, вы получите разные результаты для каждого.

Эта ссылка дает некоторое представление о том, что/не поддерживается. Например, вы не можете плавать в Outlook.

https://www.campaignmonitor.com/css/

Вы также должны использовать встроенные стили, а не связывать внешнюю часть или даже включать блок стиля в голову, чтобы они не были разделены. Здесь инструмент, который будет делать это автоматически.

http://inliner.cm/

В принципе, вам нужно опустить его для Microsoft из-за отсутствия поддержки CSS.