I am working on my first Laravel 5 project and desperately need a way to inline CSS from my email views. I am using Mailgun because of delivery issues with Mandrill (unfortunately, Mandrill has CSS inline capability baked in but Mailgun does not).
It appears that most packages out there for inlining CSS on emails for Laravel are out of date, most stopped working correctly on version 4.2. I have tried:
Inlining CSS when sending an email with Mailgun in Laravel - Antoine Augusti - does not seem to do anything, emails are not inlined. It appears that there are several fundamental differences in L5 that break this approach
fedeisas/laravel-mail-css-inliner - Does not work. Someone posted some code at the end of this Issue but I cannot figure out how to implement it (also do not know if it was intended for Laravel 5).
bweston92/laravel-inline-css-mailer - Looks promising but does not seem to do anything, CSS is not being inlined.
Does anyone have any recommendations? I would really like to be able to inline CSS for email, especially when I'm injecting HTML prior to sending (from WYSIWYG editor).
Inspired by bweston92/laravel-inline-css-mailer, which I could not get to work, I came up with this little class using the TijsVerkoyen\CssToInlineStyles package. Please feel free to offer suggestions or point me in a better direction, just needed something quickly.
<?php namespace App\Library;
use TijsVerkoyen\CssToInlineStyles\CssToInlineStyles;
/**
* Class inlineEmail
*
* Returns rendered Email view with inlined CSS
* #package App\Library
*/
class inlineEmail {
/**
* Filename of the view to render
* #var string
*/
private $view;
/**
* Data - passed to view
* #var array
*/
private $data;
/**
* #param string $view Filename/path of view to render
* #param array $data Data of email
*/
public function __construct($view, array $data)
{
// Render the email view
$emailView = view($view, $data)->render();
$this->view = $emailView;
$this->data = $data;
}
/**
* Convert to inlined CSS
*
* #return string
* #throws \TijsVerkoyen\CssToInlineStyles\Exception
*/
public function convert()
{
$converter = new CssToInlineStyles();
$converter->setUseInlineStylesBlock();
$converter->setCleanup();
$converter->setStripOriginalStyleTags();
$converter->setHTML($this->view);
$content = $converter->convert();
return $content;
}
}
Use:
$data = ['someVar' => 'someValue'];
$inlineEmail = new inlineEmail('emails.group-email', $data);
$content = $inlineEmail->convert();
Mail::queue('emails.raw', ['content' => $content], function($message) use ($data) {
$message->subject('Hello World')
->to('support#somewhere.org')
->bcc($data['recipients']);
});
The converted, inlined HTML/CSS is then passed to emails.raw, which contains only {!! $content !!}.
Here is the template I use for the majority of my emails - it is essentially a minimal version of Bootstrap for email. I'd give credit to its author but having trouble tracking down exactly where I found it, if someone knows please leave a comment. There are many other templates out there, just search for Bootstrap Email Template or HTML Email Boilerplate.
<!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">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100%!important;
height: 100%;
}
a {
color: #348eda;
}
.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.btn-secondary {
text-decoration: none;
color: #FFF;
background-color: #aaa;
border: solid #aaa;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
table.body-wrap {
width: 100%;
padding: 20px;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
table.footer-wrap {
width: 100%;
clear: both!important;
}
.footer-wrap .container p {
font-size: 12px;
color: #666;
}
table.footer-wrap a {
color: #999;
}
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.1;
margin-bottom: 15px;
color: #000;
margin: 40px 0 10px;
line-height: 1.2;
font-weight: 200;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
font-size: 14px;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important; /* makes it centered */
clear: both!important;
}
.body-wrap .container {
padding: 20px;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- Main Body -->
<table class="body-wrap">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<div class="content">
<table>
<tr>
<td align="center">
<img src="https://example.com/images/logo.png" alt="Company Logo"/>
</td>
</tr>
<!-- Email content goes here .. -->
#yield('content')
</table>
</div>
</td>
<td></td>
</tr>
</table>
<!-- /Main Body -->
<!-- Footer -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container">
<div class="content">
<table>
<tr>
<td align="center">
<p>Footer goes here</p>
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table>
<!-- /Footer -->
</body>
</html>
A typical email that extends this view would look something like this:
#extends('emails.template')
#section('content')
<tr>
<td>
<h1>Example Email</h1>
<p>This is an example email. There are many like it but this one is mine.</p>
</td>
</tr>
<tr>
<td align="center">
<p>
This is a Button
</p>
</td>
</tr>
#endsection
Related
The style settings i'm making for my table in my CSS file do not work in the html that i made
CSS:
body {
background-color: #ccffff;
}
h1 {
font-family: verdana;
}
h2 {
font-family: verdana;
}
h3 {
font-family: verdana;
}
h4 {
color: red;
font-family: verdana;
border: 3px solid black;
padding: 15px;
margin: 10px;
}
table {
width: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
p {
font-family: verdana
}
#p01 {
color: blue;
font-size: 200%;
}
p.error {
color: red;
}
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My second HTML</title>
<link rel="stylesheet" href="css/mijn_eerste_css.css">
</head>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jan</td>
<td>Jansens</td>
<td>20</td>
</tr>
<tr>
<td>Kees</td>
<td>Pieters</td>
<td>21</td>
</tr>
</table>
When I put the exact same style settings in the HTML file like so:
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
It works just fine.
Why doesn't this work when it's in the CSS and what do I have to do to fix it?
(The CSS is linked properly, all the other style settings work just fine.)
I tried and it works just fine for me. it shows border also correctly.
<link rel="stylesheet" href="css/mijn_eerste_css.css">.
I am not seeing any issue.
I'm building a webpage using DreamWeaver from scratch (no template). It's for a school project.
My DIV formatting was fine until I tried to embed the YouTube video. Why is my YouTube video stuck directly beneath the header? Also, the DIV/Table on the right side of the page is also out of whack. It just want the YT video on the left and the table on the right, and I want them to line up horizontally.
Thanks for any assistance. Click to view the Webpage, with obvious errors.
CODE:
HTML-
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="FamilyBookMain.css">
</head>
<title>FamilyBook.com</title>
<body>
<div id="top">
</div>
<div class="video-container">
<iframe width="560" height="315" src="//www.youtube.com/embed/MQgdE1_lHnA?rel=0" allowfullscreen></iframe>
<div class="famtree">
<img src="images/fambooktree.png" width="705" height="221"/>
</div>
</div>
<div id="body">
<table style="border-collapse:collapse;">
<thead>
<h1>Your Ancestors Are Dead.</h1>
<h1>But Here, They're Still Alive.</h1>
<br>
</thead>
<tbody>
<tr>
<td style="padding:10px">
<p class="table"><br>Welcome to the world's <strong>largest</strong> online resource for social media profiles and data from the twenty-first century. FamilyBook.com is home to billions of profiles from MySpace, FaceBook, Twitter, Instagram, and more. <br> <br>
We are the <strong>leading provider of social media data</strong> from the early 2000s, including searchable image tags, status updates, relationship histories, friendships and family networks. Our mission is to link people to the personal histories of their ancestors- one social media profile at a time.</p></td> </tr>
<tr><td style="padding:10px">
<p class="table">
Imagine the stories that you'll uncover as you explore your loved one's Facebook timeline and likes, private messages and chat logs, Twitter conversations, and Instagram uploads. The <strong>secrets</strong> that you uncover may even surprise you.<br>
<br> Simply start with a name and <strong>we'll do the rest.
</strong> Discover your ancestor's past. Learn where you came from. <br>
</p></td>
</tr>
</tbody>
<thead>
<tr>
<th class="head" colspan="2">
<strong>Our services are coming soon!</strong><br><br>
</tr>
</thead>
</table>
</div>
<div class="footer">
<p id="footer"><img src="http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png" width="139" height="25"/>
<br>Jessica E. Tompkins 2014 | About
</p>
</div>
</body>
</html>
CSS-
#charset "UTF-8";
/* CSS Document */
body {
background-color:#EEEEEE;
position: fixed;
}
#top {
width: 100%;
height: 60px;
background- image:url('http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png');
background-color:#FFF;
background-repeat:no-repeat;
background-position:60px bottom;
border-bottom-width:thin;
border-bottom-color: #333;
border-bottom-style:solid;
position: fixed;
top: 0px;
}
#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: relative;
left: 650px;
bottom: 215px;
}
h1 {
color: #333;
font-family: Arial, Verdana, sans-serif;
text-align: center;
margin: 0px;
top: 10px;
position: relative;
}
.video {
position: relative;
left:170px;
top: 170px;
}
ul.crap {
color: #333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
}
#video {
color: #99aacc;
font-family: Arial, Verdana, sans-serif;
text-align: center;
height: 200;
width: 450;
margin: 350px 0px 0px;
position: absolute;
}
.table {
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:14px;
color: white;
}
.head {
color: #333;
font-family: Verdana, Geneva, sans-serif;
font-size:16px;
padding: 15px;
font-weight:100;
}
.footer{
width: 100%;
height: 60px;
background-color: #99aacc;
border:1px solid #333;
position:fixed;
bottom:0px;
}
#footer{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
padding:5px;
color: white;
text-align:center;
}
a {
text-decoration:none;
}
First of all, welcome to StackOverflow. I only spent about a minute looking over and editing your code, but I think I get the gist of what you want to do. Please see the code below:
Change your #body element to match the code below: (I positioned the div absolutely.)
#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: absolute;
left: 650px;
top:65px
}
Paste this into your CSS:
.video-container{
width:auto;
height:auto;
margin-top:75px;
}
Now, let me just say that your HTML kind of messy and could be streamlined quite a bit. As #Havard Brynjulfsen pointed out, there are a few IDs and classes that remain unused. In any case, the code above, should yield the desired results, but what you are trying to do could be accomplished much more elegantly if you are willing to change up your HTML structure.
Also, there are some bugs in your HTML. I would highly suggest validating your code with the official W3C validator.
There are too many issues for me to list here without going off-topic, but here are the biggies:
Your doctype declaration is incorrect, it should be <!DOCTYPE html>.
Your <title> should be in the <head> of your document.
I am trying to create a simple search bar with a background, and an 'Advanced' href on the side. It is rendered correctly in Chrome, Mozilla, however in IE 8 the href appears as a separate block on the line below?
My HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>FireFox HomePage</title>
<!--[if lt IE 9]>
<script src="../HTML5Shiv/dist/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="MainPage1.css" />
</head>
<body>
<header>
<div class="wrapper">
<img src="../../IMG/FireFox.png" alt="FireFox Logo" title="FireFox Home" />
<span id="usernav">Logout<a href="#">My Profile</span>
</div>
<form action="" method="Search">
<p>
<input type="search" />
<input type="submit" value="Search"/>
Advanced
</p>
</form>
</header>
</body>
</html>
My CSS code:
/* CSS Reset */
* { margin: 0; padding: 0; }
html { height: 101%; font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif; background: #fff; }
body { font-size: 62.5%; font-family: Helvetica, Arial, sans-serif; line-height: 10%; }
img { border: 0;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Main CSS */
header { width: 1000px; margin: 0 auto; clear: both;}
.wrapper { width: 1000px; margin: 0 auto; margin-top: 10px;}
#usernav { position: relative; margin-top: 20 px; font-size: 12px;}
#usernav a { color: #444; text-shadow: 0px 1px 1px #ddd; text-decoration: none; float: right; padding: 8px;}
#usernav a:hover { text-decoration: underline; }
form{background-color: #eee; border-bottom: 1px solid #dadada; height: 50px;}
/** #group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
Ok I've solved the problem after playing around with the code a little. It seems that removing the
<span id="usernav">Logout<a href="#">My Profile</span>
from within the div and placing it directly within the header solved the IE bug. Not sure why though, suggestions are welcome. I can't post the image as I don't have more than 10 reputations points :(
I just downloaded and installed IE9 and used it on our intranet web pages. This problem only occurs when the font-family is set to Goudy Old Style. When I changed the font-family to Verdana the page rendered properly( that is according to the stylesheet). The problem does not occur in Firefox. It didn't help to specify font-style:normal in the default BODY style.
When I inspect the dom object in the developer mode I can see the style applied to the object and it matches what is in the stylesheet. I am relying on inheritance in that the default style defined in the body is font-style: normal. Is appears that the font face for Goudy Old Style does not have a normal mode.
The page is generated by a servlet on a WL Server 81. I'm not sure if this is related but I'll make a change tonight when I have access to server.
Current:
sb.append("<!DOCTYPE HTML PUBLIC \"");
Will change to:
sb.append("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\"http://www.w3.org/TR/html4/loose.dtd\">\n");
I appreciate any help since the client has made this problem a priority.
Revised: Adding page source - Here is the source of the page in question. Unfortunately the page is behind a firewall.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>HALL 2011-2012 SEASON</TITLE>
<LINK REL="STYLESHEET" TITLE="style" HREF="stylesheets/default.css" TYPE="text/css">
<STYLE TYPE="text/css">
<!--
BODY { font-family: "Goudy Old Style", serif; font-size: 11pt; font-style: normal; }
TABLE { page-break-before: auto; page-break-inside: avoid; }
H1 { page-break-before: always; }
H1:first-child { page-break-inside: avoid; }
.Event { page-break-inside: avoid; }
.EventTitle { font-weight: bold; margin-top: 0; margin-bottom: 0; }
.OrdinarySeriesName { margin-top: 0; margin-bottom: 0; }
.HighlightedSeriesName { margin-top: 0; margin-bottom: 0; }
.Location { margin-top: 0; margin-bottom: 0; }
.Licensee { margin-top: 0; margin-bottom: 0; }
.CancellationNotice { font-weight: bold; margin-top: 0; margin-bottom: 0; }
.EventTime { margin-top: 0; margin-bottom: 0; }
.SpecialTitle { margin-top: 0; margin-bottom: 0; }
.Appearance { margin-top: 0; margin-bottom: 0; }
.SubTitle { font-style: italic; margin-top: 0; margin-bottom: 0; }
.Repertoire { margin-top: 0.75em; margin-bottom: 0; }
.ProducerCredit { margin-top: 0.75em; margin-bottom: 0; }
.GeneralInfo { margin-top: 0.75em; margin-bottom: 0; }
.PreConcertActivities { margin-top: 0.75em; margin-bottom: 0; }
.SponsorCredit { margin-top: 0.75em; margin-bottom: 0; }
.SponsorComment { color: #808080; margin-top: 0.75em; margin-bottom: 0; }
.TicketInfo { margin-top: 0.75em; margin-bottom: 0; }
.Event TD { page-break-before: auto; }
.Series { page-break-before: always; }
.Series:first-child { page-break-before: auto; }
.SeriesEventTime { font-weight: bold; margin-top: 1.5em; }
.SeriesSpecialTitle { font-weight: bold; margin-top: 0; margin-bottom: 0; }
.SeriesTitle { font-weight: bold; text-decoration: underline; }
.MailProlog { font-family: Arial, Helvetica, sans-serif; }
.Index { font-size: x-small; }
.LicenseeDescription { display: none; }
-->
</STYLE>
</HEAD>
<BODY><IMG SRC="/images/logo1.gif" ALT=" HALL" BORDER=0 WIDTH=249 HEIGHT=43><H1 STYLE="page-break-before: auto;"><A NAME="Index">Index</A>
</H1>
<HR><TABLE WIDTH="100%" BORDER=0>
<TR><TD VALIGN="BASELINE" WIDTH="40%"><H2><A NAME="Oct">October</A>
</H2>
</TD>
<TD VALIGN="BASELINE" WIDTH="60%"><H3>Jump to: Oct </H3>
</TD>
</TR>
</TABLE>
<TABLE CLASS=Index WIDTH="100%" BORDER=0>
<TR><TD VALIGN="TOP" WIDTH="40%">MARIINSKY ORCHESTRA<BR>OPENING NIGHT GALA
</TD>
If you use this font stack:
font-family: Garamond, "Big Caslon", "Times New Roman";
the difference between Goudy and Garamond isn't that big (at least the versions on my computer).
The difference between Goudy italic and Garamond is MUCH bigger!
You could go down the font-squirrel route but there's extra page weight if not using pre-installed fonts to consider.
What I want is to have a centered content column that has a bg with a long vertical gradient. It will most likely extend past the browser, however I don't want it to create scrollbars. I want it to act as if it were like the body background where it continues and is only revealed if the browser is larger or there is more content.
Looks like you need something like this. My example used tables, but you can try to replace it with div layout.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>aruseni</title>
<style type="text/css">
body {
font-size: 14px;
font-family: arial, helvetica, sans-serif;
color: #000;
background-color: #9b9b9b;
}
html, body{
margin:0;
padding:0;
height:100%;
border:none
}
a, a:link {
font-weight: bold;
color: #000;
}
a:visited {
font-weight: bold;
color: #444;
}
img {
border: 0;
}
table.site {
border: 0;
padding: 0;
border-spacing: 0;
margin: 0 auto;
width: 80%;
height: 100%;
min-width: 700px;
}
tr {
vertical-align: top;
}
td {
padding: 0;
}
td.left_side {
width: 200px;
}
td.right_side {
width: 200px;
}
td.content {
padding: 10px;
background-color: #fff;
background-image:url('gradient-1x2000.png');
background-repeat: repeat-x;
width: 200px;
}
</style>
</head>
<body>
<table class="site">
<tr style="padding: 0px;">
<td class="left_side"> </td>
<td class="content">
<p>Your contents go here. :)</p>
</td>
<td class="right_side"> </td>
</tr>
</table>
</body>
</html>
The gradient here is an image with 2000 height and 1 weight. The gradient starts in the top, and if the browser’s height is more than 2000 pixels (oh, really?), as “background-color: #fff;” specifies, the white colour is rendered.