I have just started using Zurb Foundation (SASS) to create responsive emails. I followed this tutorial to create a test email. As seen in the tutorial, when viewing the test email in the browser it is responsive and looks beautiful.
The standard boiler plate I use for the test email:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>{{subject}}</title>
<!-- <style> -->
</head>
<body>
<span class="preheader">{{description}}</span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
{{> body}}
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body>
</html>
The body of the test email:
---
layout: index-layout
subject: My Email Templates
---
<container>
<row class="gray collapse">
<columns>
<center><img src="http://unsplash.it/800/200"></center>
</columns>
</row>
<row class="gray">
<columns>
<h2 class="text-center">Responsive columns below</h2>
</columns>
</row>
<row class="gray">
<columns small="12" large="4">
<p>Column 1</p>
</columns small="12" large="4">
<columns>
<p>Column 2</p>
</columns small="12" large="4">
<columns>
<p>Column 3</p>
</columns>
</row>
</container>
This is what the resulting source looks like taken from "view source" in Chrome:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>My Email Templates</title>
<!-- <style> -->
</head>
<body><script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.23.6'><\/script>".replace("HOST", location.hostname));
//]]></script>
<span class="preheader"></span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center data-parsed="">
<table align="center" class="container float-center"><tbody><tr><td>
<table class="row gray collapse"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tr><th>
<center data-parsed=""><img src="http://unsplash.it/800/200" align="center" class="float-center"></center>
</th>
<th class="expander"></th></tr></table></th>
</tr></tbody></table>
<table class="row gray"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tr><th>
<h2 class="text-center">Responsive columns below</h2>
</th>
<th class="expander"></th></tr></table></th>
</tr></tbody></table>
<table class="row gray"><tbody><tr>
<th class="small-12 large-4 columns first"><table><tr><th>
<p>Column 1</p>
</th></tr></table></th>
<th class="small-12 large-4 columns"><table><tr><th>
<p>Column 2</p>
</th></tr></table></th>
<th class="small-12 large-4 columns last"><table><tr><th>
<p>Column 3</p>
</th></tr></table></th>
</tr></tbody></table>
</td></tr></tbody></table>
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body>
</html>
I sent the test email to myself using gmail to check it. This was done by copying the source shown above and pasting it using "Insert HTML" through the html extension for gmail in chrome. The result was horrible - no responsiveness and it looked ugly.
How am I supposed to make use of the test email that I have created? Is it even the source from "view source" in Chrome that I should send in an email? Is it even possible to send the test email over gmail, or do I have to use e.g., mailchimp or sendgrid?
Putsmail will be your best bet for quickly testing a single template like this. You can just paste your complied HTML in and add your gmail address (or any others)
The SASS version of Zurb Foundation for Email 2.0 is controlled using terminal emulator. I am assuming you have already installed Zurb using one. The thing you are missing is a few commands.
To start, you use the terminal to navigate to the directory where you installed Zurb. The command is npm start or foundation watch. This will start Zurb running in a mode where you can see your edits before it runs a command to inline the code.
To inline the code, type foundation build or npm run build. This will give you an email which has the necessary css code inline where needed to produce the final email.
Zurb Commands
A few other Zurb commands you might find useful are:
npm install --global foundation-cli - (Install npm)
foundation new --framework emails - (a new installation of zurb)
npm start - (start the application)
foundation watch - (start the application)
foundation build - (run an inliner for the appropriate css)
npm run build - (run an inliner for the appropriate css)
npm cache clean - (clear the cache)
npm update - (install latest updates)
If none of this makes sense, please visit one of the following for better tutorials to hopefully get you up to speed on how Zurb works. It's complicated, but it makes great emails.
More Information
https://foundation.zurb.com/emails/docs/sass-guide.html
https://foundation.zurb.com/emails/docs/css-guide.html
Good luck.
Related
I need to create an XSLT script to import content from a spreadsheet into an HTML file.
My spreadsheet has 3 columns I need to import.
I'll have the spreadsheet data exported to HTML in this format:
<table class="tableizer-table">
<thead>
<tr class="tableizer-firstrow">
<th>CARD ID</th>
<th>PROMPT</th>
<th>RESPONSE</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>Acquisition</td>
<td>In classical conditioning, the process of taking advantage of reflexive
responses to turn a neutral stimulus into a conditioned stimulus.</td>
</tr>
</tbody>
</table>
That data needs to be added to this HTML page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" designation="" enumeration="" data-uuid="61dac34c7de54289a58698d5bfc8e776">
<head>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" title="default" href="../../assets/css/main.css"/>
<title>usurpmcatfc0001</title>
</head>
<body>
<section property="ktp:document" typeof="ktp:Document" class="ktp-document">
<section class="ktp-document-meta">
<section property="ktp:metadata" class="ktp-meta"><span property="atom:content-item-name" class="ktp-meta" data-value="usurpmcatfc0001"></span></section>
<section property="ktp:tags" class="ktp-meta"><span property="ktp:topic" class="ktp-meta">MCAT</span><span property="ktp:topic" class="ktp-meta">Behavioral Sciences</span><span property="ktp:subsubtopic" class="ktp-meta">Sensation and Perception</span></section>
</section>
<section property="ktp:document-section" typeof="ktp:flashcards" class="ktp-document-section" data-title="Absolute Threshold">
<p>The minimum of stimulus energy needed to activate a sensory system.</p>
</section>
</section>
</body>
</html>
The data from column 1 needs to feed into the data-value of this section:
<section property="ktp:metadata" class="ktp-meta"><span property="atom:content-item-name" class="ktp-meta" data-value="[COLUMN 1 DATA]"></span></section>
The data from column 2 needs to feed into the data-title and the data from column 3 needs to feed in between the <p></p> tags of this section:
<section property="ktp:document-section" typeof="ktp:flashcards" class="ktp-document-section" data-title="Absolute Threshold">
<p>The minimum of stimulus energy needed to activate a sensory system.</p>
</section>
Any help generating this script would be most appreciated.
Thanks!
If the exported HTML is parseable as XML you can read it simply with the doc function e.g. <xsl:variable name="excel-table" select="doc('exported-table.xml')//table[#class = 'tableizer-table']"/> and of course reading in a column is as easy as e.g. $excel-table/tbody/tr/td[1].
So set up templates for the nodes you want to manipulate e.g.
<xsl:template match="section[#property = 'ktp:metadata']/span/data-value">
<xsl:attribute name="{name()}" select="$excel-table/tbody/tr/td[1]"/>
</xsl:template>
Of course the base processing will be done by the identity transformation e.g. <xsl:mode on-no-match="shallow-copy"/> in XSLT 3.
The only complication seems to be that the main document is XHTML in the namespace xmlns="http://www.w3.org/1999/xhtml" so you need to set up xpath-default-namespace="http://www.w3.org/1999/xhtml" but if the table export is in no namespace the variable needs to use <xsl:variable name="excel-table" xpath-default-namespace="" select="doc('exported-table.xml')//table[#class = 'tableizer-table']"/> and any selection inside the document needs to do the same e.g. the <xsl:attribute name="{name()}" xpath-default-namespace="" select="$excel-table/tbody/tr/td[1]"/>.
I have a situation where I want to create search in my page. I want to create search without it mixing with the original page as I need to use this same search in more than one page. I created search table in a div in templates folder and named it MySearch.html. Now, I have included that in the main page as {% include 'MySearch.html'%} and it is able to give me the drop down with static text but not with the options that I am filling with query set.
In urls.py -
url(r'Search', myproj.type4.views.ShowSearch, name='Search'),
In ShowSearch() -
def ShowSearch(request):
countryqueryset = Type4Main.objects.all().values('country').distinct()
return render(request,'MySearch.html',{
'countryqueryset':countryqueryset,
})
In MySearch.html -
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<head>
<meta charset="UTF-8"/>
<title> My Search
</title>
</head>
<body>
<div id ="mysearch" name="mysearch">
<table id="mysearchtbl" name="mysearchtbl">
<tr>
<th>
Country
</th>
</tr>
<tr>
<td>
<select id="country">
<option value="0">Select</option>
{% for country in countryqueryset %}
<option value="{{country.country}}">{{country.country}}</option>
{% endfor %}
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
I can only see Select as option when it is merging with the main page. What am I doing wrong?
Views render templates, not the other way round: templates don't call views. If you are not viewing the page via the ShowSearch URL then the data from that view won't be passed to the template.
For data that needs to be included on every page regardless of the view, use a custom template tag.
I have the following html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" "http://www.w3.org/MarkUp/Wilbur/HTML32.dtd">
<html xmlns="http://www.w3.org/MarkUp/Wilbur/HTML32.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body style="margin-left: 5%;">
<a name="pagetop"></a>
<a name="firstpage"></a>
<div>
<h3>Content to read I</h3>
<p>
Content to read II<br><br>
</p>
<img src="abc.svg" width="200" height="166" alt="">
<br><br>
<h4>Code:ABC</h4>
<!-- End Buttons -->
</div>
</body>
</html>
I want to read the content between the 2 tags < p > (without < br >) and < h3 >
Is there some standard available in lets say boost for achieving the same?
I almost never work with ColdFusion anymore. That said, I have one site that was just moved to another server and CF was updated to whatever its most stable version is. I think it was 8 when I programmed this. At any rate, when my form is submitted the following code is generating a "bad request" error (that's all it says in the browser window). I don't have access to the CF Administrator - basically, just FTP. Any ideas why the following code would generate a bad request error?
<cfparam name="form.AutoArtID" default="1">
<cfparam name="form.FWPriorityID" default="1">
<cfparam name="form.totalFields" default="0">
<CFLOOP FROM="1" TO="#form.totalFields#" INDEX="Counter">
<cfset variables.FWPriorityID=F ORM[ "FWPriorityID_"& counter]>
<cfset variables.AutoArtID=F ORM[ "AutoArtID_"& counter]>
<CFQUERY NAME="Updateexbuildernew" DATASOURCE="Ikonltd">
UPDATE artworknew SET FWPriorityID =
<cfqueryparam value="#variables.FWPriorityID#" cfsqltype="cf_sql_integer" null="#not IsNumeric(variables.FWPriorityID)#">
WHERE AutoArtID=
<cfqueryparam value="#variables.AutoArtID#" cfsqltype="cf_sql_integer">
</CFQUERY>
</CFLOOP>
<html>
<head>
<title>IKONLTD DATABASE ADMIN TOOL </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/admin.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="http://ikonltd.com/admin/js/drop_down_menu.js"></script>
<script language="JavaScript" src="mm_menu.js"></script>
<script language="JavaScript" type="text/javascript" src="http://ikonltd.com/admin/js/drop_down_menu.js"></script>
<script language="JavaScript" src="mm_menu.js"></script>
</head>
<body>
<script language="JavaScript1.2">
mmLoadMenus();
</script>
<cfinclude template="../includes/topnav.cfm">
<p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" valign="top">
<h3 align="center">update artist artwork priority</h3>
</td>
</tr>
<tr>
<td width="32%" valign="top"> </td>
<td width="68%" valign="top"> </td>
</tr>
<tr>
<td colspan="2" valign="top">
<p>PriorityIDs for <strong>Featured Works</strong> have been updated. <br>
<br>
Click here to further edit Featured Works Priority IDs.</p>
<hr>
</td>
</tr>
</table>
</body>
</html>
Solution came from server admin who has access to cf admin:
Had to increase the POST parameters in ColdFusion admin.
I was getting issue because I was uploading a 30MB csv file and then was able to fix the issue by adjusting the 'Maximum size of post data'.
In the Coldfusion Admin page on your webserver, under "Server Settings -> Settings", increase the "Maximum number of POST request parameters" setting. I know this because I had this same issue and this post pointed me in the right direction.
I have created a modal window that shows up upon loading any page in my site. I am using this modal window for language selection. I would like the users to be able to hide (1 month) the language selection modal window by clicking a hide this window button.
I have the modal window opening and loading the content in an external file as:
jQuery(document).ready(function(){
//name, value, additional -- expire cookie in 30 days
jQuery.colorbox({href:'/language.php', iframe:true, open:true, width:860, height:450})
});
And this is the external file with the language selection menu:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<style>
#lang-container {width: 100%}
.halfregion {display: block; float: left; width: 50%;}
.langblock {float: left; width: 40%; background: #ebebf1; margin: .5em; padding: 0.5em; height: 230px; text-align: center;}
</style>
</head>
<body>
<div id="lang-container">
<div class="halfregion">
<h2>Choose your region</h2>
<div class="langblock">
<p style="text-align: center"><img src="/sites/all/themes/podsystem/images/en-us.png" width=80 alt="US region" /></p>
<p>This site includes content and products for US, please select this region if you are in United States.</p>
<p>US English</p>
</div>
<div class="langblock">
<p style="text-align: center"><img src="/sites/all/themes/podsystem/images/en.png" width=80 alt="International English region" /></p>
<p>Select this region if you are outside US.</p>
<p>English</p>
</div>
<p><a class="hidthis" href="#">Click here to stop showing this message</a></p>
</div>
<div class="halfregion">
<h2>Elige tu región</h2>
<div class="langblock">
<p style="text-align: center"><img src="/sites/all/themes/podsystem/images/es.png" width=80 alt="US region" /></p>
<p>Selecciona esta region si hablas español.</p>
<p>Español</p>
</div>
<div class="langblock">
<p>We are working to improve your experience using our sites. Would you like to see other languages? Drop us a comment.</p>
<p>Contact us</p>
</div>
<p><a class="hidthis" href="#">Pincha aquí para dejar de mostrar este mensaje.</a></p>
</div>
</div>
</body>
</html>
I am really stuck now, how do I do to get the modal window to close when the users click on the links with the .hidthis class?
Thanks in advance.
The documentation at http://www.jacklmoore.com/colorbox/ suggests that you could attach $.colorbox.close() to the links to "initiate the close sequence."
If you don't have any more use for the plugin's functionality $.colorbox.remove() is also available to disable the functionality, with the provision that you no longer need it during the life of the page.