If the CommentToMail plug-in is used to reply to messages via email notification, the problem arises. A simpler and better looking email style is still needed. But to be clear, most email clients only support inline style Css mode. inline style Such as:

 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

So, here I recommend a very useful one CSS Inliner Tool , automatically converting the css in the html page to inline style will not damage your media query part

Some email clients are removed from email <head> and <style> Tag, so it's best to embed your CSS in your tag. We know that writing embedded CSS is time-consuming and repetitive, so we built this conversion tool to automatically inline CSS for your email.
Just paste the HTML of your email below, click Convert, and you will get a version that is easier for email and can be sent. If your email's CSS contains media queries for responsive styles, don't worry, the inline tool will keep these rule sets.

Open your new email notification page. Attach the page template I used. (For CommentToMail plug-in only!)

1.png

guest.html:

 <div class="nui-fClear sR0">  <br />  <table style="width: 99.8%;height:99.8% "> <tbody> <tr> <td style="background:#FAFAFA">  <div style="background-color:white; border-left: 2px solid #555555;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;width:500px;margin:50px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB', Microsoft Yahei, Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px; ">  <h2 style="border-bottom:1px solid #DDD; font-size:14px;font-weight:normal;padding:13px 0 10px 8px; "><span style="color: #f59200; font-weight: bold; ">&gt;</span>In<a style=" text decoration: none; color: #f59200; " href=" http://www.ihewro.com ">The comments on friend C</a>'s blog have been replied</h2> <div style="padding:0 12px 0 12px;margin-top:18px">  <p>{author_p}, you once commented on the article {title}:</p> <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">{text_p}</p>  <p>{author} gives you the following reply:</p> <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">{text}</p>  <p>You can click<a style="text decoration: none; color: # f59200" href="{permalink}">to view the complete reply</a>. Welcome to the<a style="text decoration: none; color: # f59200" href=“ http://www.ihewro.com ">Friend C</a></p> </div>  </div> </td> </tr> </tbody> </table>  <br /> <br />  </div>

owner.html:

 <div class="nui-fClear sR0">  <br />  <table style="width: 99.8%;height:99.8% "> <tbody> <tr> <td style="background:#FAFAFA">  <div style="background-color:white; border-left: 2px solid #555555;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;width:500px;margin:50px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB', Microsoft Yahei, Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px; ">  <h2 style="border-bottom:1px solid #DDD; font-size:14px;font-weight:normal;padding:13px 0 10px 8px; "><span style="color: #f59200; font-weight: bold; ">&gt; </span><a style="text-decoration:none; color: #f59200; " href=" http://www.ihewro.com ">Friends C</a>blog has new comments</h2> <div style="padding:0 12px 0 12px;margin-top:18px">  <p>{author} Student commented on the article {title}:</p> <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0">{text}</p>  <p>You can click<a style="text decoration: none; color: # f59200" href="{permanink}">to view the complete content of the comment</a>. Welcome to the<a style="text decoration: none; color: # f59200" href=“ http://www.ihewro.com ">Friend C</a></p> </div>  </div> </td> </tr> </tbody> </table>  <br /> <br />  </div>
Last modification: December 25, 2016
© Allow specification reprint
Do you like my article?
Don't forget to praise or appreciate, let me know that you accompany me on the way of creation.