I really hope you can help as I'm going crazy trying to figure out how I can make this signature the way I want.
Basically, I would like the logo to be aligned at the top with the text,
and the bottom image to be left aligned, starting underneath the logo (and not underneath the text).
Note: This html is for email, so I can't using css.
Here is a visual of what I have (and want) and the code :
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #3d3d3d dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d;">
<tr>
<td style="padding: 6px 0 0 0">
<a href="http://www.txxxxk.fr" title="www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size: 12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f; letter-spacing: 1px">TxxxxK</strong><br>
e: oxxxxx#txxxxxk.fr | s: www.txxxxxk.fr
<br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
<a href="http://twitter.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://facebook.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://linkedin.com/company/txxxxk">
<img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a><br />
<a href="http://www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
</td>
</tr>
</table>
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d;">
<tr>
<td style="padding: 6px 0 0 0">
<a href="http://www.txxxxk.fr" title="www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size: 12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f; letter-spacing: 1px">TxxxxK</strong><br>
e: oxxxxx#txxxxxk.fr | s: www.txxxxxk.fr
<br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
<a href="http://twitter.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://facebook.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://linkedin.com/company/txxxxk">
<img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
</td>
</tr>
</table>
<table style="border-bottom: 1px #3d3d3d dotted; margin: 0px 0 6px; min-width: 960px;">
<tr>
<td align="left"><a href="http://www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a></td>
</tr>
</table>
Fiddle
Something like this might do the trick, just place the bottom content on its own row.
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #3d3d3d dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d; " >
<tr>
<td style="padding: 6px 0 0 0" >
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;">
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size:12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f;letter-spacing: 1px">TxxxxK</strong><br>
e: oxxxxx#txxxxxk.fr | s: www.txxxxxk.fr <br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
</td>
</tr>
<tr>
<td colspan="2"><img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;">
<img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;">
<img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"><br />
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></td>
</tr>
</table>
You're using one table row for an appearance that needs two rows, also you need two td tags in the first tr to get the logo and text next to each other:
think of it like:
< ROW (TR) >
< DATA (TD)> < DATA (TD) >
< / ROW (TR) >
<table>
<tr>
<td><!-- logo goes here --></td>
<td><!-- contact info goes here --></td>
</tr>
<tr>
<td><!-- Banner goes here --></td>
</tr>
</table>
Related
I have created an e-mail-signature in HTML and I am using it with the native Apple Mail-app on iPhone.
I am using Dark Mode, too, but sadly, the background of my emails turns white if I use my signature. I don't know what is causing this.
Is there a way to put the background transparent so it won't be white and turns black text to white (automatically done by the mail client, here apple mail)
Here is my signature :
<div>
<style>
.sh-src a {
text-decoration: none !important;
}
</style>
</div>
<br />
<table cellpadding="0" cellspacing="0" border="0" class="sh-src" style="margin: 0px; border-collapse: collapse;">
<tr>
<td style="padding: 0px 1px 0px 0px;">
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: separate; margin: 0px;">
<tr>
<!---->
<td valign="top" style="padding: 0px 17px 0px 1px; vertical-align: top;">
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse;">
<tr>
<td style="padding: 0px 1px 0px 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap;">
<p style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700; color: rgb(0, 0, 0); white-space: nowrap; margin: 1px;">My name</p>
<p style="font-family: Arial, sans-serif; font-size: 13px; line-height: 19px; white-space: nowrap; color: rgb(136, 136, 136); margin: 1px;">My function</p>
<!---->
<!---->
</td>
</tr>
<tr>
<!---->
<td valign="middle" colspan="3" style="padding: 3px 1px 0px 0px; vertical-align: middle;">
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse;">
<tr>
<td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px;">
<p style="margin: 1px;">
<a href="linkedin url" target="_blank">
<img src="https://signaturehound.com/api/v1/png/linkedin/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
</a>
</p>
</td>
<td width="2" style="padding: 0px 0px 1px;"></td>
<td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px;">
<p style="margin: 1px;">
<a href="insta url" target="_blank">
<img src="https://signaturehound.com/api/v1/png/instagram/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
</a>
</p>
</td>
<td width="2" style="padding: 0px 0px 1px;"></td>
<td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px;">
<p style="margin: 1px;">
<a href="YouTube url" target="_blank">
<img src="https://signaturehound.com/api/v1/png/youtube/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
</a>
</p>
</td>
<td width="2" style="padding: 0px 0px 1px;"></td>
<td width="22" style="font-size: 0px; line-height: 0px; padding: 0px 1px 0px 0px;">
<p style="margin: 1px;">
<a href="imdb url" target="_blank">
<img src="https://signaturehound.com/api/v1/png/imdb/round-outlined/007bff.png" alt="" width="22" height="22" style="display: block; border: 0px; max-width: 22px;" />
</a>
</p>
</td>
<td width="2" style="padding: 0px 0px 1px;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="padding: 1px 0px 0px; border-right-width: 2px; border-right-style: solid; border-right-color: rgb(0, 123, 255);"></td>
<td valign="top" style="padding: 0px 1px 0px 17px; vertical-align: top;">
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse;">
<tr>
<td style="padding: 0px 1px 0px 0px;">
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px; border-collapse: collapse;">
<tr>
<td valign="middle" style="padding: 1px 5px 1px 0px; vertical-align: middle;">
<p style="margin: 1px;"><img src="https://signaturehound.com/api/v1/png/email/default/007bff.png" alt="" width="18" height="18" style="display: block; border: 0px; max-width: 18px;" /></p>
</td>
<td style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 135) !important; padding: 1px 0px; vertical-align: middle;">
<p style="margin: 1px;">
<a
href="mailto:mail"
target="_blank"
style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;"
>
<span style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;">
mail.com
</span>
</a>
</p>
</td>
</tr>
<tr>
<td valign="middle" style="padding: 1px 5px 1px 0px; vertical-align: middle;">
<p style="margin: 1px;"><img src="https://signaturehound.com/api/v1/png/mobile/default/007bff.png" alt="" width="18" height="18" style="display: block; border: 0px; max-width: 18px;" /></p>
</td>
<td style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 135) !important; padding: 1px 0px; vertical-align: middle;">
<p style="margin: 1px;">
<a
href="tel:phone"
target="_blank"
style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;"
>
<span style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(136, 136, 136); text-decoration: none !important;">
My phone
</span>
</a>
</p>
</td>
</tr>
<!---->
<tr>
<td valign="middle" style="padding: 1px 5px 1px 0px; vertical-align: middle;">
<p style="margin: 1px;"><img src="https://signaturehound.com/api/v1/png/website/default/007bff.png" alt="" width="18" height="18" style="display: block; border: 0px; max-width: 18px;" /></p>
</td>
<td
style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(0, 123, 254) !important; font-weight: 700; padding: 1px 0px; vertical-align: middle;"
>
<p style="margin: 1px;">
<a
href="domain.com"
target="_blank"
style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(0, 123, 255); font-weight: 700; text-decoration: none !important;"
>
<span style="font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; color: rgb(0, 123, 255); font-weight: 700; text-decoration: none !important;">
domain.com
</span>
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="padding: 0px 1px 14px 0px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgb(0, 123, 255);"></td>
</tr>
</table>
</td>
</tr>
<!---->
<!---->
<!---->
<tr>
<td style="padding: 0px 1px 0px 0px;">
</td>
</tr>
</table>
Also when I write the mail, the signature looks good as it should looks but not when it’s sent :
I am running into a problem creating an HTML signature for Outlook mobile. I want it to exactly match the signature (used firmwide) I have for my desktop outlook. See below for a picture.
Currently, I am using this code and while the layout is correct, I cannot get the font to change colors. When I draft an email the font is the correct color but once sent, it changes to black. Any ideas?
<table style="
border-collapse:collapse;
border:none;">
<tbody>
<tr>
<td style="
width: 467.5pt;
border-top: none;
border-right: none;
border-bottom: none;
border-image: initial;
border-left: 1.5pt solid rgb(0, 168, 126);
padding: 0 0.15in;
height: 0.25in;
vertical-align: top;">
<p style="
margin: 0 0 .0001pt;
font-size:15px;
font-family:Calibri,sans-serif;">
<strong>
<span style="
font-size:16px;
font-family:Garamond,serif;
color:#003B4C;">
FirstName LastName
</span>
</strong>
</p>
</td>
</tr>
<tr>
<td style="
width: 467.5pt;
border-top: none;
border-right: none;
border-bottom: none;
border-image: initial;
border-left: 1.5pt solid rgb(0, 168, 126);
padding: 0 0.15in;
height: 9.9pt;
vertical-align: top;">
<p style="
margin: 0 0 .0001pt;
font-size: 15px;
font-family: Calibri,sans-serif;">
<span style="
font-size: 12px;
font-family:Arial,sans-serif;
color:#003B4C;">
t.
</span>
<span style="
font-size: 12px;
font-family: Arial,sans-serif;
color: #003B4C;
text-decoration: none;">
+1 (123) 456-7891
</span>
<span style="
font-size: 12px;
font-family: Arial,sans-serif;
color: #003B4C;">
| m.
</span>
<span style="
font-size: 12px;
font-family: Arial,sans-serif;
color: #003B4C;
text-decoration: none;">
+1 (123) 456-7891
</span>
</p>
</td>
</tr>
</tbody>
</table>
I have made a Email template for order confirmation.
It has a table,the table layout is fine on regular devices but on the gmail application on Phone the table layout is being disturbed.
The table border is going out of bound on the right side.
Here is my code for the email template:
<div style="text-align: center; margin: 0, auto; padding: 10px;">
<a href="http://brightopaints.com/" target="_blank">
<img src="http://brightopaints.com/wp-content/themes/brightoPaints/images/BrightoPaintlogo-2.png" alt="Brighto Paint" class="FollowBlockIcon" width="102" style="width: 102px; max-width: 102px;" />
</a>
</div>
<div style="max-width: 730px; background-color: #ebebeb; border-radius: 10px; text-align: center; margin: auto !important; padding-left: 24px; padding-right: 24px;">
<h1 style="color: #514f9e; padding: 15px; font-size: 48px; font-weight: 600;">THANK YOU!</h1>
<img src="http://brightopaints.com/wp-content/themes/brightoPaints/images/truck.png" width="250" style="width: 250px; max-width: 250px;" />
<h2 style="color: #000000; padding-top: 25px; font-size: 28px; font-weight: 500;">Your order is on its way.</h2>
<h2 style="color: #000000; padding-top: 25px; font-size: 18px; font-weight: 500;">this email confirms that we have received our order ". date('ymdHis')." placed on ".date('d-m-Y')."</h2>
<hr style="border: 1.2px solid black; margin-left: 30px; margin-right: 30px; margin-top: 40px;" />
<h2 style="color: #000000; padding-top: 12px; font-size: 36px; font-weight: 300;">shipping and billing details</h2>
<div style="border: 1px solid black; border-radius: 5px; margin: 24px; padding-left: 15px; padding-right: 15px;">
<table style="width: 100%; border-collapse: collapse; border-style: hidden; overflow-x: auto;">
<tbody>
<tr>
<td style="border: 2px solid white; padding: 8px;">User Name</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">User Email</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_email."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Contact Number</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_number."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Address</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$complete_address."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Product Name</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Product Shade</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_shade_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Type/Packaging</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_type_packaging."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Quantity</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_quantity."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Order Message</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$order_message."</td>
</tr>
</tbody>
</table>
</div>
<h2 style="color: #000000; padding-top: 12px; padding-left: 22px; font-size: 36px; font-weight: 300; text-align: left !important;">Total :</h2>
<h2 style="color: #000000; padding-top: 12px; padding-left: 22px; font-size: 20px; font-weight: 300; text-align: left !important;">subtotal :</h2>
<h2 style="color: #000000; padding-top: 62px; padding-left: 22px; padding-right: 22px; padding-bottom: 62px; font-size: 15px; font-weight: 500; text-align: center !important;">
if anything doesn't look right, simply contact us at our <span style="color: #537bed; text-decoration: underline;">Toll Free: 08000-1973</span> if it hasn't been dispatched, we will get it sorted right away.
</h2>
</div>
I have tried to use overflow:hidden; but then my content is cut off.
Here is what I am getting:
Use table-layout:fixed; for table and for all td to word-wrap:break-word;
NOTE:
I have added the word-wrap:break-word; ONLY for email due to inline css elements so please do the same for all other td.
<div style='text-align: center;margin: 0,auto;padding: 10px;'>
<a href='http://brightopaints.com/' target='_blank'><img src='http://brightopaints.com/wp-content/themes/brightoPaints/images/BrightoPaintlogo-2.png' alt='Brighto Paint' class='FollowBlockIcon' width='102' style='width:102px; max-width:102px;'></a>
</div>
<div style='max-width: 730px;background-color: #ebebeb;border-radius: 10px;text-align: center; margin: auto !important;padding-left: 24px;padding-right: 24px;'>
<h1 style='color: #514f9e;padding: 15px;font-size: 48px;font-weight: 600;'>THANK YOU!</h1>
<img src='http://brightopaints.com/wp-content/themes/brightoPaints/images/truck.png' width='250' style='width:250px; max-width:250px' />
<h2 style='color: #000000;padding-top: 25px;font-size: 28px;font-weight: 500;'>Your order is on its way.</h2>
<h2 style='color: #000000;padding-top: 25px;font-size: 18px;font-weight: 500;'>this email confirms that we have received our order ". date('ymdHis')." placed on ".date('d-m-Y')."</h2>
<hr style='border: 1.2px solid black;margin-left: 30px;margin-right: 30px;margin-top: 40px;'>
<h2 style='color: #000000;padding-top: 12px;font-size: 36px;font-weight: 300;'>shipping and billing details</h2>
<div style='border: 1px solid black;border-radius: 5px;margin: 24px;
padding-left: 15px;padding-right: 15px;'>
<table style='width: 100%;border-collapse: collapse;border-style: hidden;overflow-x:auto;table-layout:fixed;'>
<tbody>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>User Name</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$person_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>User Email</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px; word-wrap:break-word;'>dsfadsfasdfasdfsddsfadsfasdfasdfsdafasdfasdfadfadsfadsfasdfasdfsdafasdfasdfadfaafasdfasdfadfa#gmail.com</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Contact Number</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$person_number."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Address</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$complete_address."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Product Name</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$product_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Product Shade</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$product_shade_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Type/Packaging</td>
<td style='font-weight: bold !important; border: 2px solid white;
padding: 8px;'>".$product_type_packaging."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Quantity</td>
<td style='font-weight: bold !important; border: 2px solid white;
padding: 8px;'>".$product_quantity."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Order Message</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$order_message."</td>
</tr>
</tbody>
</table>
</div>
<h2 style='color: #000000;padding-top: 12px;padding-left: 22px; font-size: 36px;font-weight: 300; text-align: left !important;'>Total : </h2>
<h2 style='color: #000000;padding-top: 12px;padding-left: 22px;font-size: 20px;font-weight: 300;text-align: left !important;'>subtotal : </h2>
<h2 style='color: #000000;padding-top: 62px;padding-left: 22px;padding-right: 22px;padding-bottom: 62px;font-size: 15px;font-weight: 500;text-align: center !important;'>
if anything doesn't look right, simply contact us at our <span style='color: #537bed;text-decoration: underline;'>Toll Free: 08000-1973</span> if it hasn't been dispatched, we will get it sorted right away.
</h2>
</div>
Desperately looking for help with determining if there is the possibility to ignore css styles on my wordpress website?
My friend asked me for help in creating the site of his new company at the beginning I wanted to refuse but it is a good friend, so I thought "I will install wordpress, a few clicks and done". Now it has come to me how much I have underestimated the frontend devs and through what hell they are going through to ensure the responsiveness of the site with the help of this ... css.
I apologize for this introduction but for a few hours I am trying to make a very simple responsive table in html. It turned out that I'm doing everything correctly but my wordpress skin changes the style of almost all tags that I want to use, for example, table, tr, td and to "reset" the css style for this element my html fragment instead of clean nice html is HELL!
Every html element inherits from theme and I have to "reset" it to "default" values.
<table style="border: none; vertical-align: initial; table-layout: fixed; padding: 10px 10px 10px 10px;" cellpadding="5">
<tbody>
<tr>
<td style="border: none;">
<table style="border: none !important; vertical-align: middle; border-collapse: collapse; border-color: #ddddddd;" cellpadding="5">
<tbody style="border: none;">
<tr>
<th style="border-color: #21288f; text-align: center;" colspan="2"><span style="border: none; color: #21288f; text-align: center;"> FACILITY MANAGEMENT </span></th>
<th style="border: none;"></th>
</tr>
<tr style="border: none; vertical-align: middle; padding-bottom: 0px; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em; height: 10%;" valign="middle">
<td style="border: none; padding: 10px 10px 10px 10px; vertical-align: middle; display: block margin-bottom: 0em;" valign="middle"><img style="min-width: 30px; min-height: 30px; ;vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em;" valign="middle"><span style="color: #21288f;">TEXT1</span></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em;" rowspan="6" valign="middle"></td>
</tr>
<tr style="border: none; vertical-align: middle; padding-bottom: 0px; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT2</span></td>
</tr>
<tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT3</span></td>
</tr>
<tr style="border: none; vertical-align: middle;">
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
</tr>
<tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
</tr>
<tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
</tr>
</tbody>
</table>
</td>
<td style="border: none;"><img class="wp-image-630 aligncenter" alt="" width="322" height="255" />
<img class="wp-image-631 aligncenter" alt="" width="311" height="240" />
</td>
</tr>
<tr>
<td style="border: none;"></td>
<td style="border: none;"></td>
</tr>
</tbody>
</table>
I will take every advice on how to deal with it so that my posts do not inherit from the wordpress theme.
I would recommend to first look at the themes documentation, you may provide a link to the site or more specific information.
Maybe the theme provides some options or a tutorial for a child theme?
Anyways. Inline css attributes are taken over all but they may not be neccessary (sometimes they are)
Take a look at css specificity: https://css-tricks.com/specifics-on-css-specificity/
You need to find out what css selectors are beeing used to style the tables (browser dev tools) and then make stronger ones that overrides them, even if they are parsed before them.
you then can put them in a <style> tag before the table or somewhere else in a css file that gets not overwritten by updates(Child theme)
Update: after looking at https://demo.themegrill.com/spacious/wp-content/themes/spacious/style.css from the themes demo there is the table styling starting from line 54
you should be able to override it with
body table {
/* original values
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.5em;
width: 100%;
*/
}
body th {
/* original values
font-weight: bold;
border: 1px solid #EAEAEA;
padding: 6px 10px;
*/
}
body td {
/* original values
border: 1px solid #EAEAEA;
padding: 6px 10px;
*/
}
body caption,
body th,
body td {
/* original values
text-align: left;
*/
}
the easiest way for you is put that css into the themes Custom CSS option as this is a feature promoted here: https://themegrill.com/themes/spacious/#all-features
I have an HTML5 table with 3 header columns. They colspan=2 each, for a total of 6 columns wide. Under each header are 2 body columns that correspond to that header. I've got individual columns aligned left, but now I want the entire body center aligned so it lines up with the headers. I've tried the margin: 0 auto trick making sure I had a width defined and it's just not working.
Here is what it looks like now:
Here is my HTML:
<div id="areas">
<table>
<thead>
<tr>
<td colspan="2">Delaware County</td>
<td colspan="2">Main Line</td>
<td colspan="2">Chester County</td>
</tr>
</thead>
<tbody>
<tr>
<td class="city">Broomall</td>
<td class="zip">19008</td>
<td class="city">Ardmore</td>
<td class="zip">19003</td>
<td class="city">Paoli</td>
<td class="zip">19301</td>
</tr>
<tr>
<td class="city">Chester</td>
<td class="zip">19013</td>
<td class="city">Bala Cynwyd</td>
<td class="zip">19004</td>
<td class="city">Avondale</td>
<td class="zip">19311</td>
</tr>
<tr>
<td class="city">Aston</td>
<td class="zip">19014</td>
<td class="city">Bryn Mawr</td>
<td class="zip">19010</td>
<td class="city">Berwyn</td>
<td class="zip">19312</td>
</tr>
</tbody>
</table>
</div>
And my CSS:
#areas {
position: relative;
margin: 30px auto 60px auto;
width: 950px;
padding: 20px;
background-color: #4B004B;
-webkit-box-shadow: 11px 11px 15px rgba(50, 50, 50, 0.85);
-moz-box-shadow: 11px 11px 15px rgba(50, 50, 50, 0.85);
box-shadow: 11px 11px 15px rgba(50, 50, 50, 0.85);
border: 3px outset gold;
}
#areas thead td {
font-family: 'electricalregular';
-webkit-text-stroke: 1px orange;
letter-spacing: 2px;
font-size: 10pt;
font-weight: 100;
text-align: center;
width: 316px;
color: gold;
padding: 0 0 15px 0;
}
#areas tbody {
width: 950px;
margin: 0 auto;
}
#areas tbody td {
font-family: 'CommunistSans';
color: gold;
font-weight: 100;
padding: 0 0 5px 0px;
width: 158px;
}
#areas .zip {
text-align: left;
}
#areas .city {
text-align: left;
}
you could try
#areas .zip, #areas .city { position: relative; left: 30px; }