Email Template Validation - zurb-foundation

I am sending transnational emails, I download a template from Zurb foundation but the problem that this template is not showing correctly as I expected. I validated the HTML using W3C and it is valid yet it is not showing correctly.
You can have a look at the template on http://52fluent.com/email.html
The main problem that the gray bar up is always trimmed as if there is no styling what so ever is implemented
How can I find the problem and what tools to use

The problem is that the template relies on a link to the CSS stylesheet at http://52fluent.com/email.css:
<link rel="stylesheet" type="text/css" href="http://52fluent.com/email.css" />
Such a link does not work in email. You need to copy the styles from that CSS file onto each of the appropriate HTML elements in the template, for example:
<table class="head-wrap" bgcolor="#999999"
style="margin: 0; padding: 0; [...etc...]">
Of course, there are tools to do that automatically: for example, a quick Google search turned up a CSS Inline Transformer. There’s also a Python library called premailer.

Related

Why is my template html file not using bootsrap css?

I'm Sreenesh, a beginner in Django web framework.
I've been facing some problems while doing a project.
this is my
OUTPUT of my django website which is not what i expected it to be.
this is my
HTML CODE from this I think you can say output is not the desired one.
command prompt throws me these 2 errors CMD PROMPT and I'm unable to fix these problems on my own as I'm a self learner.this is my bootstrap files directory as you can see the path I specified in link tag in my html code is right. this is my Settings.py and Url.py. Could anyone help me where i am doing wrong and how to fix these problems so I can get ahead with my project and learn some valuable lessons. Thank you everyone.
Update: this is my folder tree for those who need it for some verifications.
If you are facing some trouble wile using bootstrap in local then use CDN
in your base html file :
Into the <head> tag
<!-- Boostrap css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
Just before closing the body tag
<!-- jQuery and Bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
Try it and let us know the result
You are getting a 404 error (does not exist) when it tries to load bootstrap.min.css. So, it's not in the folder specified by
{% static css/css/bootstrap.min.css %}
(or possibly, there's a file protection problem). Anyway, I think that translates to $BASE_DIR/static/css/css/bootstrap.min.css (using Linux notation, I don't do Windows).
Check that the file is there? And to debug in case I'm wrong, you can get the actual path it's looking for by using the same template tag to generate visible HTML content, or an HTML comment that you can see with your browser view page source
<!-- trying to load bootstrap from {% static css/css/bootstrap.min.css %} -->

How to have the Layout convert a Page written in Markdown to HTML (using Zurb Foundation Panini)

I am using Zurb's Panini site generator. I am using a CMS that outputs a html file written in markdown to the pages folder. My goal was to have the template file convert the markdown to html.
I've tried to have the markdown get converted before it enters the template file but haven't found a way with the CMS I am using (NetlifyCMS). The CMS also needs to be very user friendly for non-technical users.
<!-- This is the part of the template file -->
<article class="cell medium-5 cell-block-y location-info-container">
<h1 class="location">{{title}}</h1>
{{#markdown}}
{{> body}}
{{/markdown}}
</article>
When running foundation build everything works as expected except for the markdown content is still markdown. I have tried to find a workaround but with no luck so I am open to a solution or workaround. Also, a quick apology in advanced, due to client restrictions I am unable to post links and have the project on a private repository.
You have to add a markdown helper using marked or another markdown library.
https://github.com/zurb/panini/blob/dev/readme.md

What is the proper way to include highlightjs's CSS while using ember-remarkable?

I have installed the ember-remarkable addon in Ember 2.7. I am able to use the md-text component to format text content. The content adds the appropriate <code> markup for fenced code blocks such as:
```javascript
// An empty function
function test() {
}
```
However, the CSS to highlight that code as Javascript is not being included in my app. I am currently styling my app in app/styles/app.scss using the ember-cli-sass addon.
One way to include the CSS would be to add a <link> to app/index.html to a CDN such as:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
Is that the best way? Or is there an "Ember" way to easily include the styles that are in the bower_components/highlightjs directory?
The proper way to include the Highlightjs CSS that I wanted is to add this line to ember-cli-build.js:
app.import('bower_components/highlightjs/styles/default.css');
Of course, this is not limited to the default style.

another $(...).datepicker is not a function error

If this seems not-so-helpful (Noting the 'too localized' close votes), then please tell me why. I think Django and JQuery UI make a pretty good team so it's worth working out any gotchas about using them. The answer to this question is not something I've found documented or in another question and is relevant to use of other widgets in other places.
And on to the question...
I have a django project in development mode. Inside its static directory I have the following file structure:
directory: js
jquery-1.9.1.js
jquery-ui-1.10.1.custom.js
other_stuff.js
directory: css
directory: ui-lightness
directory: images
jquery-ui-1.10.1.custom.css
jquery-ui-1.10.1.custom.min.css
I'm trying to get the datepicker to work on one of my forms:
In my html head I have:
<link type="text/css" rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.10.1.custom.css"/>
<script src="/static/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/static/js/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id_date_of_birth").datepicker();
});
</script>
And the input I am trying to change looks like:
<input type="text" size="10" id="id_date_of_birth" class="vDateField" value="1987-01-19" name="date_of_birth"/>
Now I know this question has been asked like a billion times before but none of the listed solutions I have read so far seem to work...Can anybody hazard a guess as to why I am getting the error$(...).datepicker is not a function ?
Stuff I've considered:
Everything seems to be included in the correct order. Other solutions mention including jquery ui's ...core.js but I think everything is included in jquery-ui-1.10.1.custom.js because otherwise the jquery ui download page is very misleading (I chose to download every component and there is no effect)
No other errors came up except the one I mentioned. All scripts loaded correctly
Nothing is included more than once
I'm waiting until the document is ready before calling anything at all so my problem is not due to bad timing
If the directory structure you listed is accurate, your jquery files do not end with ".js", while your references to those files do have ".js" in the page header. Add the ".js" extension to your jquery files and it should work.
you should also close your input element:
<input type="text" size="10" id="id_date_of_birth" class="vDateField" value="1987-01-19" name="date_of_birth" **/**>
For some reason the link wanted a separate closing tag...
<link type="text/css" rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.10.1.custom.css"><link/>
This happened to me several times.
What i did was to copy the whole code (script) and placed it in the parent view.
If you're trying to place the script in a partial it may not work, try to put it in a higher level until you get the job done.
One example in django-oscar i had to place the script in the basket.html template to make it work in here:
{% include 'basket/partials/basket_content.html' %}

CodeIgniter templates

Hello first sorry if its a stupid question, but I amm a beginner, and im a bit lost.
For practice I decided to code a really small social network just for practice.
I worked on small CodeIgniter projects in the past, and the truth is I dont really like loading the header and footer in every controller.
So on YouTube I saw a video about creating basic templating.
But I can't really decide whether it is a good idea.
So how would it look like?
In my view folder I created 3 subfolders
- include
- template
- user
In the templates I have the main_template.php and that looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="<?php base_url();?>themes/default/style.css">
<title><?php echo $title; ?></title>
</head>
<body>
</body>
</html>
The controllers would contain different variables for the title and other stuff if needed for each view.
My question is: is it a bad idea not create header and footer files, and creating all views with including the html, head, and body tag like this?
I would recommend using a "header" and "footer". Otherwise it's going to get really messy when you'r trying to customize each template. I get passing down a few variables to the views; actually, that will come in really handy when setting the page's title, meta description, JS/CSS includes, etc. However if you keep your header/footer together, you will have to either pass the entire body in a variable or pass in the name of the specific view you want; in which case you would have to load the specific view inside this main view.
Don't know if I get you right. But, I will put some examples how to use the Template library.
It isn't included, you can take It here : http://gist.github.com/1519385.
Put the Template.php file in /application/libraries.
Make a directory on the views, name It "templates" and inside a "main.php".
This "main.php" file, the name describes it well, let's say that It is your Main template.
Example : http://pastie.org/3071074
There you can see the $content variable, It is defined on your controller.
Example : http://pastie.org/3071097
Thats a very basic example, you can extend It more as you need. Hope It helps.