Our company has developed some very simple table-based clickable html email signatures for clients to use, and we want to showcase them as being clickable on http://scottleroymarketing.com/email-signature but as you can tell...they're not showing up very well.
Setting aside using tables for layout and inline CSS versus a stylesheet (both of which are the easiest way we've found to work within email providers, especially Gmail/GSuite which is what most of our clients use), is there anything within wordpress that would override/mess up the inline styling of the tables? Inline styles trump global CSS from the theme, as far as I'm aware, but there might be exceptions that I don't know about. I'm pretty inexperienced with Wordpress, so I may have been googling the wrong thing (I've looked for "wordpress table styles" and "wordpress inline styles" but all I've found is tutorials for how to apply styles to tables, and fixes for the html/rich text editor not showing on the page). We can screenshot the template as it's supposed to display, and put that on the page, but we'd rather demonstrate how the elements are all clickable versus an image block signature, if possible.
I've previewed the page on Chrome and Firefox, and I figure it will look essentially the same on other browsers since all of the elements I used render about the same on each browser. I'm not sure what version of Wordpress we're using, or how to find it.
Here's the code for the second signature shown on that page, already having been tweaked so that at least the columns are somewhat the correct width:
<!-- Begin Signature #2 !-->
<div class="slmsignature1">
<table style="width: 80%; max-width: 700px; min-width: 300px; border: none; border-collapse: collapse; background: url('http://i.imgur.com/SizXUrg.jpg'); background-color: black; color: #fff; font-family:sans-serif;">
<tbody>
<tr>
<td style="width: 200px; font-family:'Gill Sans MT', Tahoma, sans-serif;">
<img style="width: 100%; max-width: 195px; margin: 0px;" src="http://i.imgur.com/ectryVc.jpg" alt="Scott Le Roy's Head Shot" />
</td>
<td style="vertical-align: bottom; font-family:'Gill Sans MT', Tahoma, sans-serif;">
<img style="max-width: 160px;" src="http://i.imgur.com/Uns6X52.png" alt="Keller Williams Logo" />
<p style="font-size: 6pt; margin-bottom: 0px;">
Each Keller Williams Office
<br />
Is Independently Owned And Operated
</p>
</td>
<td style="vertical-align: top; text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif;" colspan="2">
<h1 style="font-family: sans-serif; margin: 0px 5px 0px 0px;">
Scott Le Roy
</h1>
<h2 style="font-family: sans-serif; font-size: 15px; margin: 0px 5px 5px 0px;">
CEO/Digital Marketer
</h2>
<p style="margin: 0px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="tel:123-456-7890">
C: 123-456-7890
</a>
</p>
<p style="margin: 0px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="tel:321-654-0987">
O: 321-654-0987
</a>
</p>
<p style="margin: 5px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="mailto:[email protected]">
[email protected]
</a>
</p>
<p style="margin: 0px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="http://scottleroymarketing.com">
www.ScottLeRoyMarketing.com
</a>
</p>
</td>
</tr>
<tr style="height: 25px; text-decoration:none; font-size:8pt;">
<td style="text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif;">
<a href="https://www.facebook.com/groups/scottleroymarketing/">
<img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/ES2mp6u.png" alt="Facebook Icon" />
</a>
<a href="https://www.twitter.com/">
<img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/E2iChYF.png" alt="Twitter Icon" />
</a>
<a href="https://www.pinterest.com/">
<img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/dJARSqo.png" alt="Pinterest Icon" />
</a>
<a href="https://www.linkedin.com/">
<img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/Ucw1EDq.png" alt="Linkedin Icon" />
</a>
<a href="https://www.instagram.com/">
<img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/lFx5fpA.png" alt="Instagram Icon" />
</a>
</td>
<td style="text-align: center; width 40%; font-family:'Gill Sans MT', Tahoma, sans-serif;">
123 E. Main St #201
<span style="color: #b40101;">
|
</span>
Anytown, VA 12345
</td>
<td>
Another Placeholder
</td>
</tr>
</tbody>
</table>
Update: I played around some more and it looks like the Wordpress "Text"/code editor is treating line breaks in the code as line breaks in the content as well, and removing <br /> tags. I've updated the linked page to show that change, but the "Visual" editor is showing it differently than the live page. Ugh.
Screenshot of the "Visual" editor in Wordpress
Screenshot of the actual live page
Ho-lee hell that was something else. You have to be super duper specific with your markup in wordpress, for each individual <td> and everything, or else it will try to apply the default styles to that data, even if you told it not to in the actual table itself. Good thing email services aren't like this...
Anyway, the final verdict is to use a plugin that allows you to disable the "wpautop" plugin for the page so that it doesn't convert line breaks in the code to <br /> when it renders, then the "Don't Muck My Markup" plugin to have it not convert <br /> to those same line breaks.
Final code block for that signature that is displaying pretty much properly on http://scottleroymarketing.com/email-signature (second one):
<!-- Begin Signature #2 !-->
<div class="slmsignature1">
<table style="width: 80%; max-width: 700px; min-width: 300px; border: none; border-collapse: collapse; background: url('http://i.imgur.com/SizXUrg.jpg'); background-color: black; color: #fff; font-family:sans-serif;">
<tbody>
<tr>
<td style="width: 200px; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
<img style="width: 100%; max-width: 195px; margin: 0px;" src="http://i.imgur.com/ectryVc.jpg" alt="Scott Le Roy's Head Shot" />
</td>
<td style="vertical-align: bottom; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
<img style="max-width: 160px;" src="http://i.imgur.com/Uns6X52.png" alt="Keller Williams Logo" />
<p style="font-size: 6pt; margin-bottom: 0px;">
Each Keller Williams Office
<br />
Is Independently Owned And Operated
</p>
</td>
<td style="vertical-align: top; text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;" colspan="2">
<h1 style="font-family: sans-serif; margin: -5px 5px 0px 0px;">
Scott Le Roy
</h1>
<h2 style="font-family: sans-serif; font-size: 15px; margin: -5px 5px 5px 0px;">
CEO/Digital Marketer
</h2>
<p style="margin: -5px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="tel:123-456-7890">
C: 123-456-7890
</a>
</p>
<p style="margin: -5px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="tel:321-654-0987">
O: 321-654-0987
</a>
</p>
<p style="margin: -5px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="mailto:[email protected]">
[email protected]
</a>
</p>
<p style="margin: -5px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="http://scottleroymarketing.com">
www.ScottLeRoyMarketing.com
</a>
</p>
</td>
</tr>
<tr style="height: 25px; width: 200px;text-decoration:none; font-size:8pt;">
<td style="text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
<table style="border:none; border-collapse:collapse; padding:0px; margin:0px;">
<tr>
<td style="padding:0px;border:none;">
<a href="https://www.facebook.com/groups/scottleroymarketing/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/ES2mp6u.png" alt="Facebook Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.twitter.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/E2iChYF.png" alt="Twitter Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.pinterest.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/dJARSqo.png" alt="Pinterest Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.linkedin.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/Ucw1EDq.png" alt="Linkedin Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.instagram.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/lFx5fpA.png" alt="Instagram Icon" /></a>
</td>
</tr>
</table>
</td>
<td colspan="2" style="text-align: center; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
123 E. Main St #201 <span style="color: #b40101;">|</span> Anytown, VA 12345
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Signature #2 !-->
The final verdict is to use a plugin (there are several) that allows you to disable the "wpautop" plugin for the page so that it doesn't convert line breaks in the code in the "Text" editor to <br /> when it renders, then the "Don't Muck My Markup" plugin to have it not convert <br /> to those same line breaks.
The other thing is that you have to go into each <td> element and tell it to not show borders, etc, because Wordpress (evidently) ignores <style> elements added to the "Text" editor so you can't apply a style to all <td>s, you have to do them each individually :-/
And in the social media icons shown in the bottom left (of the particular signature noted in this post), just adding them to that table cell with the <a> and <img> tags won't show them inline like it's supposed to, you have to create another <table> within that cell, and make each icon its own <td> in the same <tr> with no padding, also remembering to do "border:none;" on each <td>.
Props to @ihazcode for pointing me in the direction of the "Don't Muck My Markup" plugin!