I am generating an email from a html.erb file in my rails application for the user to confirm their email address. I am trying to make the link_to line below a green button just like I use in other emails. However it shows up as a plain text link.
This is the link I am having trouble with
<tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
<%= link_to 'Confirm Email', confirmation_url(#resource, confirmation_token: #token), class: 'btn-sm-mpgreen' %>
</td>
</tr>
And it looks like this in the email
This is the green button from another email I create that I want to use above also.
Schedule Match
Which looks like this in the email
This is because you haven't added styles to your html.erb where you are designing your email. Write in head something like:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rails Email</title>
<style type="text/css">
.background { background-color:#555555; height:2px; }
/* Some of your css code */
</style>
</head>
Add styling to your class
.btn-sm-mpgreen {
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box;
font-size: 14px; color: #FFF; text-decoration: none; line-height: 2em;
font-weight: bold; text-align: center; cursor: pointer; display: inline-block;
border-radius: 5px; text-transform: capitalize; background-color: #13904B; margin: 10px 0;
border-color: #13904B; border-style: solid; border-width: 10px 20px;
}
Related
I've got the following issue. I've got a div where I'm unable to vertically align its text and also unable to place it below other divs.
My div:
<div th:text="#{mailContent.resetBtn}" style="
border: 0;
color: white;
height: 25px;
display: table-cell;
background-color: #FD8907;
cursor: pointer;
border-radius: 2px;
outline: 0;
text-align: center;
font-family: 'Rubik', sans-serif;
font-size: 16px;
padding: 50px;
display: table;
margin: 0 auto;
vertical-align: middle;
">
RESET PASSWORD
</div>
It ends up looking like this
I want it to be below the text that says "click on the following button...".
And I also find it impossible to set some padding to the text and centering it.
(Padding there is exaggeratedly set to 50px but it doesn't work anyways).
Full code:
https://pastebin.com/NqgXs4tD
Consider using <td> inside a <tr> instead of div
#title{
font-size: 25px;
font-weight: bold;
}
#pass-content {
font-style: italic;
font-family: 'Rubik', sans-serif;
color: #999;
font-size: 15px;
}
#btn-info {
padding: 20px 0 10px 0;
color: #153643;
font-family: 'Rubik', sans-serif;
font-size: 15px;
line-height: 20px;
}
#btn {
border: 0;
color: white;
height: 25px;
background-color: #FD8907;
cursor: pointer;
border-radius: 2px;
outline: 0;
text-align: center;
font-family: 'Rubik', sans-serif;
font-size: 13px;
padding: 5px;
display: table;
margin: 0 auto;
vertical-align: middle;
}
<table>
<tr id="title">
<td>Password Reset</td>
</tr>
<tr>
<td id="pass-content"> This is an email to reset the password for the account 123#gmail.com. If you don't wish to change your password please ignore this email. </td>
</tr>
<tr id="btn-info">
<td>
Click on the following button:
</td>
</tr>
<tr id="btn">
<td>RESET PASSWORD</td>
</tr>
</table>
Use flex-box as display, so you can align it horizontal and vertical.
Also you use display 2 times. And you should sort ur rules..
And because HTML5 exist you should never ever use table for design and only for tables. Did you validate your file? You open a new table tag while the old one isn't closed.
With display: flex and align-items: center you can vertically align the content elements (and text). And with order: {number} you can re-order the child elements of a flexbox element.
I'm trying to use a "Comic Sans MS" font, this font loads perfectly in the gmail web app, but when it comes to gmail app, it does not render in the gmail or does not load the font, it just displays a regular font, i surfed all the posts on internet and Stackoverflow but could not figure out where is my code going wrong.
Below is the code i'm using, not sure where am i going wrong! It would be great, if someone could let me know what mistake i'm doing ans where.
<!DOCTYPE html>
<html style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\">
<head>
<meta name=\"viewport\" content=\"width=device-width\" />
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>Email Verification</title>
<style type=\"text/css\">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6em;
}
body {
background-color: #f6f6f6;
}
#media only screen and (max-width: 640px) {
body {
padding: 0 !important;
}
h1 {
font-weight: 800 !important; margin: 20px 0 5px !important;
}
h2 {
font-weight: 800 !important; margin: 20px 0 5px !important;
}
h3 {
font-weight: 800 !important; margin: 20px 0 5px !important;
}
h4 {
font-weight: 800 !important; margin: 20px 0 5px !important;
}
h1 {
font-size: 22px !important;
}
h2 {
font-size: 18px !important;
}
h3 {
font-size: 16px !important;
}
.container {
padding: 0 !important; width: 100% !important;
}
.content {
padding: 0 !important;
}
.content-wrap {
padding: 10px !important;
}
.invoice {
width: 100% !important;
}
}
</style>
</head>
<body itemscope itemtype=\"http://schema.org/EmailMessage\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6em; background-color: #f6f6f6; margin: 0;\" bgcolor=\"#f6f6f6\">
<table class=\"body-wrap\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: #f6f6f6; margin: 0;\" bgcolor=\"#f6f6f6\"><tr style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\"><td style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;\" valign=\"top\"></td>
<td class=\"container\" width=\"600\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;\" valign=\"top\">
<div class=\"content\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;\">
<table class=\"main\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; background-color: #fff; margin: 0; border: 1px solid #e9e9e9;\" bgcolor=\"#fff\"><tr style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\">
</tr><tr style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\"><td class=\"content-wrap\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 20px;\" valign=\"top\">
<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\"><tr style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\"><td class=\"content-block\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;\" valign=\"top\">
Hi,
<br /><br />
Please verify your email address by clicking the link below.
<br /><br />
$url
<br /><br />
If the above URL does not work try copying and pasting it into your browser.<br /><br />
If you still encounter any problem, please contact us at support#xyz.com
<br /><br />
Thank You,<br />
The XYZTeam
</td>
</tr></table></td>
</tr></table>
</td>
</tr></table></body>
</html>
Mostly mail apps wont support fonts. The font that you have used might be installed in your windows/mac system. So, when you open the mail in browser it will render properly with the font you have used. In mobiles it will be default fonts instead of the font you used.
Please refer Gmail not showing correct font
Gmail App is ungrateful when it comes to the email templates.
There is a ton of things that the Gmail app doesn't handle.
Ok someone help me with creating my first website. The problem is that the stylesheet only applies partly.
My body
<div class="top1">
<h1 align="left" class="1logo">La Di Da DI</h1>
<h1 align="left" class="2logo">we likes to party</h1></div>
</body>
My stylesheet
html, body {
margin: 0px;
padding: 0px;
outline-offset: 0px;
background-color: #FFEAE5;
}
.mainTitle{
display: inline;
}
.2logo {
display: inline;
color: #FFEAE5;
font-size: 18px;
font-style: italic;
}
.1logo {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline;
color: #FFEAE5;
}
.top1 {
padding: 5px;
padding-top: 3px;
padding-left: 25px;
background-color: #F87666;
}
Stylesheet link
<link href="main.css" content"text/css" rel="stylesheet">
Using a number at the starting of the class is not a good practice because it takes a different approach to apply css to that kind of class...
Try to remove the numbers from the starting and put it at end like:
HTML
<div class="top1">
<h1 align="left" class="logo1">La Di Da DI</h1>
<h1 align="left" class="logo2">we likes to party</h1>
</div>
CSS
html,
body {
margin: 0px;
padding: 0px;
outline-offset: 0px;
background-color: #FFEAE5;
}
.mainTitle {
display: inline;
}
.logo2 {
display: inline;
color: #FFEAE5;
font-size: 18px;
font-style: italic;
}
.logo1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline;
color: #FFEAE5;
}
.top1 {
padding: 5px;
padding-top: 3px;
padding-left: 25px;
background-color: #F87666;
}
If you are looking for a solution that how to apply css to class that starts from a number see this answer
So today im trying to take items and subitems from a listview and put it in my html template. i can see how this is hard to understand so im going to be showing u what i mean.
This is the Source code for the HTML File
body {
font-size: 13px;
font-family: verdana, helvetica, arial, sans-serif;
color: #666666;
background-color: #333333;
margin: 0px;
}
table {
border-collapse: collapse;
width: 100%;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
tr:nth-child(even) {
background-color: #f1f1f1;
}
tr.h th {
background-color: #333333;
border: none;
}
th {
color: #ffffff;
background-color: #00E5EE;
border: 1px solid #00E5EE;
padding: 3px;
vertical-align: top;
text-align: left;
}
td {
border: 1px solid #d4d4d4;
padding: 5px;
padding-top: 7px;
padding-bottom: 7px;
vertical-align: top;
}
pre {
font-size: 13px;
font-family: verdana, helvetica, arial, sans-serif;
padding: 0px;
margin: 0px;
font-weight: normal;
white-space: pre-wrap;
word-wrap: break-word;
}
<body>
<div class="center" style="margin:auto;width:80%;">
<table>
<tr class="h">
<th>
<h2>Stats... </h2>
</th>
<th></th>
<th></th>
</tr>
<tr>
<th>name</th>
<th>age</th>
<th>gander</th>
</tr>
<pre><tr><td>Quan</td><td>12</td><td>male</td></tr></pre>
<pre><tr><td>sam</td><td>14</td><td>male</td></tr></pre>
</table>
<p><small>lit stuff right here </small></p>
</div>
</body>
So now to tell you what i want happening, i want when i click the button that says "Turn to html" that i show in the form photo, to convert the items and subitems into the html layout that i also show in the second photo.
i hope this is enough information.
I am creating an html calendar(cal.ics) invite and it works in email clients like Gmail, Firefox, and YahooMail. But when I try it in thunderbird, the paragraph(p) tags are always off to the right, even though I've explicity set attributes like align left, float: none, etc. Am I doing something wrong? The email is below, is there something missing in my css?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Follow-Up! Meeting</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 2.0em;
margin: 0;
padding: 0;
text-align: left;
}
img {
max-width: 600px;
width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
height: 100%;
-webkit-text-size-adjust: none;
width: 100% !important;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
margin-bottom: 10px;
width: auto !important;
}
.btn-primary td {
background-color: #348eda;
border-radius: 25px;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
text-align: center;
vertical-align: top;
}
.btn-primary td a {
background-color: #348eda;
border: solid 1px #348eda;
border-radius: 25px;
border-width: 10px 20px;
display: inline-block;
color: #ffffff;
cursor: pointer;
font-weight: bold;
line-height: 2;
text-decoration: none;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
padding: 20px;
width: 100%;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
clear: both !important;
width: 100%;
}
.footer-wrap .container p {
color: #666666;
font-size: 12px;
}
table.footer-wrap a {
color: #999999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
color: #111111;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
line-height: 1.2em;
margin: 40px 0 10px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 0;
margin-bottom: 10px;
float: none;
text-align: left;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
clear: both !important;
display: block !important;
Margin: 0 auto !important;
max-width: 600px !important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
display: block;
margin: 0 auto;
max-width: 600px;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table width="100%" class="body-wrap" bgcolor="#f6f6f6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF"><!-- content -->
<div class="content">
<table width="100%" style="width: 100%; text-align: left;" cellpadding="0" cellspacing="0" border="0">
<tr style="width: 100%; text-align: left;" >
<td align="left" style="width: 100%; text-align: left;" >
Hi John Doe,
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
<h4>Topic</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >A Samle Meeting!</p>
<h4>Summmary</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >
A sample meeting to prove the concept work andthen take it form there
</p>
<h4>Location</h4>
<p>
123 Example Street New york, NY
</p>
<h4>Time</h4>
<p>
From: February 7, 2016, 2:28 am GMT-0500 <br />
To: February 9, 2016, 3:50 pm GMT-0500
</p>
<h4>Next Steps</h4>
<p>
You may view more information on the meeting by clicking the link below
</p><!-- button -->
<table class="btn-primary" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>View Meeting</td>
</tr>
</table><!-- /button -->
<p>
Please adjust your meeting schedule infomration there.
</p>
<p>
Thanks,
</p>
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container"><!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /footer -->
</body>
</html>
Tested your email in latest Thunderbird and paragraphs seem to be where they should be.
You may be however referring to the 20px padding set on the "container" with white background. Removing the padding will make the text stick to the left side of white space.
Since both Gmail and Yahoo ignore CSS in HEAD you do not see the padding there.
Personally I would advice against removing the padding for esthetic reason.
Preview in Thunderbird 38.5.1 (Windows)
The problem quite stupid actually. Apparently the spaces in the html were causing the problem.So I changed
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
To
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">You have been invited to attend a meeting</p>
With no space and problem fixed