I am using the WordPress plugin for newsletter subscription. I want to change the format for the mail its sending to user but don't want to edit core cause when anyone upgrade plugin all changes will flushed away so anyone knows how to rightly edit the plugin files without making changes in its core files thanks for the help in advance.
<body style="background-color: #ddd; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #666; margin: 0 auto; padding: 0;">
<br>
<table align="center">
<tr>
<td style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #666;">
<div style="text-align: left; max-width: 500px; border-top: 10px solid #43A4D0; border-bottom: 3px solid #43A4D0;">
<div style="padding: 10px 20px; color: #000; font-size: 20px; background-color: #EFEFEF; border-bottom: 1px solid #ddd">
<?php echo get_option('blogname'); ?>
</div>
<div style="padding: 20px; background-color: #fff; line-height: 18px">
<?php echo $message; ?>
</div>
</div>
</td>
</tr>
</table>
</body>
This the code in which i don't want blog name but want the logo of the blog and also want to change that style which is given on the html tags directly.
function mail($to, $subject, $message) {
ob_start();
include NEWSLETTER_DIR . '/subscription/email.php';
$message = ob_get_clean();
Newsletter::instance()->mail($to, $subject, $message);
}
This might be a function to include the email template file.
You want to use filters and actions, which can be specified by a plugin to give other scripts/plugins the opportunity to work with your plugin.
More specifically, hopefully you can find something like this:
$email_body = apply_filters( 'amazingnewsletter_email_body', $email_body );
This means that you can filter (aka, make changes to) the variable $email_body within your own plugin/theme. If you just want this for your current website, it's easiest to place these directly in functions.php.
However, the actual hook you are going to use depends entirely on the plugin. And even then, the plugin may not offer the ability to edit the body with actions or filters.
I suggest reading the WordPress.org codex about actions and filters to get a better understanding of how they work. They are very powerful.
Related
I'm trying to apply responsive design in sendGrid. When I preview it in the website preview it is working, but when I send the test email and view it on mobile, I see that the #media screen has not been applied. Does anyone know what could be happening?
{{#if rewardData.deals.[0].coupon}}
<style>
#media screen and (max-width:300px) {
.teste {
width: 100% !important;
}
.firstDiv {
display: inline-block !important;
}
}
</style>
<div class="firstDiv" style="display: flex;
align-items: center;
border: 1px solid #D9D9D9;
border-radius: 8.49px;
padding: 16px;
margin: 35px 35px 25px 28px;">
<div class="teste" style="text-align:left; display: inline-block; margin-right: 16px">
<img class="max-width" style="border-radius: 8px" data-proportionally-constrained="true" data-responsive="false" src="{{rewardData.deals.[0].wideBanner}}" alt="Banner da recompensa">
</div>
<div class="teste" style="display: inline-block;">
<div style="display: flex; align-items: center; margin-bottom: 14px">
<img style="border-radius: 8px; margin-right: 8px" width="32" src="{{rewardData.deals.[0].icon}}" alt="Logo da recompensa">
<p style="display: inline-block; vertical-align: super">{{rewardData.deals.[0].title}}</p><br>
</div>
<b style="font-size: 12px; text-align: left; color: #2B332E">{{rewardData.deals.[0].shortDescription}}</b><br><br>
<b style="font-size: 12px; text-align: left;">Resgatar recompensa</b>
</div>
</div>
<div style="font-family: inherit; text-align: inherit; color: #000000; font-family: helvetica, monospace; font-size: 14px; margin-bottom: 50px; margin-top: 25px; margin-bottom: 25px; padding: 0px 40px">
<img class="max-width" border="0" style="color: #000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; vertical-align: bottom;" width="16" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/92d7128873c0e80b/6ee5ec4b-aaad-46cb-9c96-d5d61fb7231d/72x72.png">
<strong style="padding-left: 5px">Como usar minha recompensa?</strong><br><br>
<div style="line-height: 18px">
{{rewardData.deals.[0].description}}
<b>Seu voucher tem validade de até 30 dias para ser usado.</b>
</div>
</div>
{{/if}}
Many email clients do not support #media statements.
The website preview is a useful tool to preview your work, however it cannot show how an email will render across different mail clients.
Is there a way you can achieve your responsivenice without a media query?
Many mobiles are more than 300px wide, so try increasing the max-width from 300 to about 450.
Otherwise, take note of which email client you sent to and whether it supports media queries: https://www.caniemail.com/features/css-at-media/
There's quite a lot of code you use that is not supported. Email has an added layer or two to web design, in that email clients only accept a subset of HTML & CSS - more akin to HTML4 and CSS2, but there are lots of exceptions.
So, it may also not be working because flex is not supported, or align-items (flex is more widely supported, but all of the other parts of flexbox like align-items are very poorly supported).
I'd suggest you take a totally different approach and you'd need to research how to do a responsive HTML email as the topic is much too large for one question.
I'm trying to design a header for an email newsletter that will be sent on Mailchimp. I've managed to make it the way I want it to be on the mail editor, however, when testing on other readers, the header goes completely bollocks. I believe the problem is on the positioning of elements, is that so?
I have tried several CSS positions combinations without any major success.
.header {
background-color: #5724a9 !important;
width: 100%;
height: auto;
min-height: 14em;
min-width: 600px;
position: relative;
}
.VER {
font-family: Arial;
font-size: 10px;
font-weight: normal;
font-style: italic;
font-stretch: normal;
line-height: 1.8;
letter-spacing: normal;
text-align: left;
color: #ffffff;
position: absolute;
top: 3%;
left: 3%;
word-wrap: break-word;
}
.logo {
width: 28%;
max-height: 12em;
object-fit: contain;
float: left;
position: absolute;
padding-top: 2em;
padding-left: 14.5em;
padding-right: 14.5em;
}
<div class="header">
<p class="VER">Ver este email no browser</p>
<a href="https://www.instagram.com/desembola/" style="text-decoration: none; display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/38baf9eb-8971-4232-8877-e821fb206396.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/929291fe-8e66-433a-893d-860c863dd597.png 2x,
https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/0668c4e9-df06-42cd-a8fb-0125371d2478.png 3x" class="instagram"></a>
<a href="https://www.facebook.com/desembolanews/" style="text-decoration: none;display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/d29b31ac-a288-47a3-aa9c-d2ab0b650374.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e92c4f99-3f9a-4676-af77-0fa93f54c0e6.png 2x,
https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/abb16351-fc77-4bf5-b34c-efa005ee76fe.png 3x" class="facebook"></a>
<img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/7ab88f02-314e-4cc7-bbeb-0d3d216d1dac.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/433683ea-5f9d-4d3a-ac8c-ab0d4a6de392.png 2x, https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e9d7c117-efdb-448c-aa7a-bdbe0a3ad2f5.png 3x" class="spotify">
Expected:
Reality (on different browsers):
Unfortunately e-mails are rendered in a very primitive way. Using divs and separate style declarations will most probably not work in most e-mail clients.
For starters you will have to use table layouts. Some best practices here
And you will have to inline all your CSS, mailchimp tool: here
It's not worth your time trying to develop HTML emails like you would develop a website.
Once you make a start on the above, it should be easier for you to define specific problems with development.
Here is an example of how it can be done. Basically 3 columns with images and links in different columns.
You have to remember, emails are not web pages. Each element should have its own CSS inlined. Media query and global CSS can be in the head of the document but not all CSS will be read by all email clients. Check out the best CSS guide created by Campaign Monitor sometime ago. Its the best resource to start with when it comes to CSS.
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="purple">
<tbody>
<tr>
<td width="200"> <p class="VER">Ver este email no browser</p></td>
<td align="center" style="color:#ffffff;">Logo here</td>
<td width="100">
<a href="https://www.instagram.com/desembola/" style="text-decoration: none; display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/38baf9eb-8971-4232-8877-e821fb206396.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/929291fe-8e66-433a-893d-860c863dd597.png 2x,
https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/0668c4e9-df06-42cd-a8fb-0125371d2478.png 3x" class="instagram"></a>
<a href="https://www.facebook.com/desembolanews/" style="text-decoration: none;display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/d29b31ac-a288-47a3-aa9c-d2ab0b650374.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e92c4f99-3f9a-4676-af77-0fa93f54c0e6.png 2x,
https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/abb16351-fc77-4bf5-b34c-efa005ee76fe.png 3x" class="facebook"></a>
<img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/7ab88f02-314e-4cc7-bbeb-0d3d216d1dac.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/433683ea-5f9d-4d3a-ac8c-ab0d4a6de392.png 2x, https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e9d7c117-efdb-448c-aa7a-bdbe0a3ad2f5.png 3x" class="spotify">
</td>
</tr>
</tbody>
</table>
Hi I need to display the custom field that I added via plugin (woocommerce edit checkout fields) I need to display the field data which is a date on the email that would be sent to the customer. here is my code on the email.php (which is found on the event-tickets-plus plugin)
<!--Date-->
<td class="ticket-details new-row new-left-row" valign="top" align="left"
width="120" style="background-color: #e1e9f6; padding: 0; width:120px;
margin:0 !important; text-align:center; border: 1px solid #fff;">
<h6 style="background-color:#3b89c9; color:#fff !important; margin:0 0
10px 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-transform:uppercase; font-size:14px; font-weight:700 !important;">
Ticket Date
</h6>
<span style="background-color: #e1e9f6; color:#0a0a0e !important; font-
family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font
size:15px;">
<?php do_action('show_date_here');?></span>
</td>
and here is my code on functions.php
<?php
add_action('show_date_here','get_date', 10,1);
function get_date($order){
$order = wc_get_order( $order_id );
$order_data = $order->get_data(); // The Order data
$order_id = $order->get_id();
$order_date_use = $order_data['ticket_date'];
echo $order_date_use;
}
?>
I hope you could help me with this.
I'm still trying to finish this theme I'm working on. Atm I'm trying to implement header support, and it's not going to well with my layout. Everything was fine until I added this line:
<img src="<?php header_image(); ?>" />
So, header currently looks like this:
<hgroup class="blog-header">
<img src="<?php header_image(); ?>" alt="" />
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php the_breadcrumb(); ?>
</hgroup>
Here's the thing, this works fine when there's no header image, however when adding one, it messes up my styling for the site description - which bumps up a few pixels from where it was. The title and the description is supposed to be inline with each other, and I'm not sure how to fix this without one of the scenarios making it wrong..
Here's my style for these:
.site-title {
font-family: 'Bree Serif', Georgia, serif;
font-weight: 700;
font-style: uppercase;
font-size: 30px;
color: #fff;
margin: 0 0 0 90px;
padding: 60px 25px 60px 0;
float: left;
}
.site-description {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-weight: 400;
color: #c9c9c9;
padding: 68px 25px 60px 0;
}
Ok this is going to be bizarre but if you go into your body class in your reset.css, and change line-height=1 to line-height=4px; it shifts it upwards. Or even just changing from 1 to 1px; it works.
Let me know if this works.
I'm using floats to position 2 divs beside each other.
print
<?php ob_start(); ?>
<style>
#sidedish{
float: left;
border: 1px solid black;
width: 100px;
height: 100px;
}
#maindish{
float: right;
width: 200px;
border: 1px solid black;
height: 100px;
text-align: center;
}
#container{
width: 304px;
height: 100px;
border: 1px solid black;
}
</style>
<div id="container">
<div id="sidedish"></div>
<div id="maindish"><div id="box">name</div></div>
</div>
<?php $_SESSION['boxes'] = ob_get_contents(); ?>
Here is what printbox do, it just renders the buffered data into a pdf, but somehow the floats that were set were lost in the process.
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(0, 0, 0, 0));
$html2pdf->writeHTML($_SESSION['boxes']);
$html2pdf->Output('random.pdf');
?>
It works fine on html:
but when I click on print it turns to this:
Any idea what the problem is?
Speaking from personal experiences, I would say styling the output of HTML2PDF is, at best, esoteric black magic science. The main reasons for this are:
The class only supports a (relatively small) subset of CSS styles & selectors
CSS compatibility is undocumented
PDF is impossible to debug in relation to the HTML input
To be fair, this is not only the issue for HTML2PDF but also for the TCPDF that HTML2PDF uses.
It might be possible that HTML2PDF, being just an almost-zero-setup, quick & easy alternative interface for the TCPDF, cuts more CSS support off — but I'm sure that even TCPDF wouldn't support float properly.
The best workaround that you could use is to send your floating divs to the nineties:
<table>
<tr>
<td><div class="float"> ... </div></td>
<td><div class="float"> ... </div></td>
</tr>
</table>
You could also hide this embarrassment from the public HTML:
<?php
$isPdf = (/* condition that tells us we're outputting PDF */) ? true : false;
if ($isPdf) {
echo "<table><tr><td>";
}
?>
<div class="float"> ... </div>
<?php
if ($isPdf) {
echo "</td><td>";
}
?>
<div class="float"> ... </div>
<?php
if ($isPdf) {
echo "</td></tr></table>";
}
?>
You can see the quick documentation online in french here:
http://demo.html2pdf.fr/examples/pdf/about.pdf
('Les float ne sont gérés que pour la balise IMG')
= Floats are only handled for img markups by the class.
Handled css properties are also listed in the doc.