I currently use Bootstrap 2 in my Rails 4.0.13 application. I am using a table to simulate two columns with the width parameter.
<table style="width: 800px;">
<tr>
<td style="width: 33%; padding: 10px;" valign="top" align="justify"><%= #mass_email_parm["email"].html_email_left.html_safe %></td>
<td style="width: 67%; padding: 10px;" valign="top" align="justify"><%= #mass_email_parm["email"].html_email_text.html_safe %></td>
</tr>
</table>
I have this in my tag in my mailer view.
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
I would like to rewrite my logic using span4 and span8 or something like that if possible. I have tried several times to see if there is a way to use Bootstrap in the mailer but have not found anything.
I thought I might try something like adding the link statement below. However I wonder about the meta statement I have. I have not worked with either of these much regarding mailer views.
<link href="assets/bootstrap_and_overrides.css.less" rel="stylesheet" media="screen">
Unfortunately, many (probably most) email providers strip out external stylesheet links. Gmail and others even strip embedded CSS, meaning your only real option is inline styling. My advice is to either inline style, or use a tool that will convert CSS to inline styles. See this excellent article for more details.
Related
A few months ago I started doing some research on HTML emails (never done those before). I read that Gmail started to support embedded CSS or "block" CSS as of September, '16. Since that time I have been trying off and on to figure out how to get Gmail to render the embedded CSS when I receive my test msgs. They look fine when I am composing them. I used this YouTube video to learn how to insert the markup in the compose window:
https://youtu.be/QprIvjZ5TYI?t=2m44s
Replacing the entire div the way the video said didn't work, but I tried replacing just the dummy text itself and when I clicked back into the compose window, the css & html were rendered perfectly. Screencap below:
http://imgur.com/a/cPi2B
Problem is when I sent it and looked at the incoming email, the style rules were ignored. Itried to post another screencap but SO is telling me I need reputation of 10 to do so and I'm a lowly 1. Anyway, trust me that all of the text on the incoming message was black.
In my first attempt I used the WHOLE html file, from .... Then I tried .... Same results. Then I tried expanding the DIVs I was replacing, replacing the parent DIV instead of the original, then its parent's DIV... That got me nowhere. Used both Firefox and Chrome, same on both. I'm out of ideas. It seems other people are getting embedded CSS to work. Any help greatly appreciated.
Thanks,
- DK
Generally speaking if you're about to send HTML e-mails you should do that using some external mail software (like Microsoft Outlook, Mozilla Thunderbird, Apple Mail etc.) and send it via SMTP.
In your case it will work, if your styles are inline, so you can send something like:
<p style="color: blue">This is a blue text</p>
But there is no way of sending something like:
<p>This is a blue text<p>
And attaching external .css file, because you can't attach CSS files in e-mails this way.
You can always convert your CSS and HTML into HTML with inline CSS using some minifiers, like here or here or here.
If you're 100% sure you're providing right HTML with inline CSS then you should save your HTML e-mail as a draft and then send it from your Drafts view. It works for me:
Unforunately you can't send HTML mails directly, but after saving it as a template / draft it will be processed by Gmail and then it should work as expected.
Hope it helps!
In your HTML file just add the <style> in a standard place within the <head> and it should work as expected.
Litmus did a really good write up of the Gmail responsive update, it's worth a read.
https://litmus.com/blog/gmail-to-support-responsive-email-design
As of October 2020, the Gmail UI still doesn't allow to compose email messages using HTML / CSS.
Here is a summary of the the trick shown in the referred video:
Click the compose button of the Gmail Web UI
Add a dummy text
Select the dummy text the use the Chrome DevTools to edit the element holdin the dummy text.
Unfortunatelly this doesn't allow to include <style>...</style>. If you dedide to use an external editor you could use the standard HTML structure
<html>
<head>
<style>
p {
color:Maroon;
}
</style>
</head>
<body>
<p>Hello worl!</p>
</body>
</html>
One option is to use Google Apps Script to compose your HTML messages. While it doesn't offer WYSWYG you could create a simple web app and make it available only to you.
The following example use scriptlets to create and style a simple table (the use of scriptlets is optional).
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
background-color:gray;
}
table {
margin:auto;
}
tr .header {
background-color:navy;
color:white;
}
tr .label {
background-color:white;
}
tr .value{
background-color:white;
text-align:right;
}
tr .totals {
background-color:white;
color:navy;
font-style:italic;
text-align:right;
}
</style>
</head>
<body>
<table>
<? const headers = ['Fruit','Qty'];?>
<? const data = [
['Apple',5],
['Banana',10],
['Cherry',20]
];?>
<colgroup>
<col span="1" style="width:100px">
<col span="1" style="width:50px">
</colgroup>
<thead>
<tr >
<? for (var header of headers) {?>
<th class="header"><?= header ?></th>
<?}?>
</tr>
</thead>
<tbody>
<? for(var row of data){ ?>
<tr >
<td class="label"><?= row[0] ?></td>
<td class="value"><?= row[1] ?></td>
</tr>
<?}?>
</tbody>
<tfoot>
<tr>
<td class="totals">Totals:</td>
<td class="totals"><?= data.reduce((total,row) => total + row[1],0)?></td>
</tr>
</tfoot>
</table>
</body>
</html>
If you dont' wan to use scriplets on the Code.gs file instead of
HtmlService.createTemplateFromFile('index').evaluate()
you could use
HtmlService.createHtmlOutputFromFile('index')
The above works fine when sending the email but doesn't work for messages that are saved as draft, so if you need to save your messages as draf, instead of using <style>...</style> use inline styles.
Resources
Gmail Sender Resources > CSS Support
Composing draft messages (This explains how to create a Gmail add-on to compose a draft, but doesn't mention how to include CSS)
Related
How to paste raw HTML into an email in Gmail? (from Web Applications)
Right now I'm coding an email and need to apply specific padding for Outlook 2007 and higher. At the moment I have the conditional formatting applied at the very end of the style attribute to override the "default" padding, like this:
<table cellpadding="0" cellspacing="0" border="0" width="211" align="left" class="ending_soon_table" style="float: left; padding: 0 10px; <!--[if gte mso 12]>padding: 0 7px;<![endif]-->">
Any tips on how I should be formatting differently?
Can you be more specific?
Any fiddle for this?
Good practice is to use whole statement for padding:
<table style="padding: top right bottom left;"></table>
Not just top-bottom && right-left declaration.
Also try !important to make sure it override existing CSS (NOTE: use !important just for testing.)
Than your statement is used only for greater than mso(ffice) 12. Is that what you want or you need it above 2007 version?
In case you need above 2007, change it to:
<!--[if gte mso 7]>padding: 0 7px;<![endif]-->
More on this you got here: http://templates.mailchimp.com/development/css/outlook-conditional-css/
It's a bad practice to have so much elements for styling email. Good thing is that you used table elements for it. Can you make a little snippet for your example please?
I am trying to make a plugin for WordPress.
It works great, except when i load the default WordPress themes. e.g. "twentyeleven."
This theme has a DOCTYPE as shown below. And hence, no matter what I do, it always inserts this annoying GAP when i put an image in a table.
Please Help!
How do I get rid of this gap?
Below is some code. Anytime a table is placed in a situation in which the DOCTYPE is defined as it is here, then I get this gap.
The WordPress default themes seem to use this DOCTYPE declaration. So they BREAK my pretty plugins...
<!DOCTYPE html>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<td width="100%">
<img border="0" src="http://goo.gl/PJdRU">
</td>
</tr>
</table>
</body>
</html>
All browsers render the above code as shown below. I just want to REMOVE the Gap! Thanks!
There are several solutions, but neither is perfect. I guess the easiest will be just change your img's style - in CSS (with td img { display: block } rule) or just an inline style, like this:
<img style="display:block" border="0" src="http://goo.gl/PJdRU">
Here's an article with explanations why you see what you see - and several possible ways of fixing it. ) And here's a working JSFiddle to play with.
I am using Div in my website to display some links. It works fine in IE, but when i expand that div in firefox and google chrome it goes weird.
Can anybody help me to figure it out. I have googled it but i did not fine any useful solutions.
<td vAlign="top" align="center"><font>-</font></td>
<td align="left" >
<div align="left" style="margin:0 auto; padding:0; display:block;clear:both; position:relative;">
<A class="inkblue" href="javascript:expand(4);">Faculty & Staff</A
</div>
</td>
<td></td>
</tr>
<tr id="e4" style="DISPLAY: none">
<td></td>
This is the code for that section. Please let me know if anything required.
This is the link to site. open it in firefox or chrome and click the link
"Faculty & Staff" under "Campuses" .
I have gone through your site:
I saw that you are using below line double time. Insert this line only one time.
If your are trying to Override some classes then specify different css file name.
<link rel="stylesheet" type="text/css" href="css/nuonline.css">
To overcome your issue:
Currently on click of "Faculty, Events & Campus", you are doing style="display:inline". Rather than doing this way you can remove style attribute itself.
Example:
On click: Remove style attribute style="display:none" for id="e4" or id="e5" or id="e7"
To Reset (that is on next click): Add style attribute as style="display:none" for id="e4" or id="e5" or id="e7"
There is one blank <td></td> remove it and give colspan="2" to next td element
I have a client form which includes HTML served up from an iframe - I can't edit it. The only thing I can do is apply CSS edits.
I'm trying to apply a simple adjustment which would stack the <td>s in the form so
1. What is your age?
becomes
1.
What is your age?
If you right click the first question and Inspect Element you'll see the rather interesting DOM structure I get to work with. This example it looks like this:
<div id="Age" class="questionlabel">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<span class="questionnumber_questionlabel">1. </span>
</td>
<td>
<label class="required">What is your age?</label>
</td>
</tr>
</tbody>
</table>
</div>
When I inspect that <td> and add a display:table-row; it completely ignores me. This is in Chrome - I can replicate this DOM and get the CSS to do what I want in jsfiddle so I'm thinking there is a reset somewhere I can't see. I even tried display:table-row !important; to no avail. I can apply border:2px solid blue; no problem. I can apply display:none; no problem.
Any ideas as to what is going on here that would prevent this simple CSS param from working?
To re-iterate the ONLY thing I can do is apply CSS - No JavaScript and no HTML edits. Basically I pass in a CSS file in the url to the iFrame. That's all I get. Thanks!
EDIT: I apologize I had to remove the link to the example form on the live site.
Edit - screenshots had to be removed, but the solution is still valid.
Added this code to form-css.css, using Firebug. Beginning or end, it did not matter:
table#form_table div.questionlabel td {display: table-row !important;}
.questionnumber_questionlabel {margin: inherit!important;}
(Note: I reset that margin as the old one (-10px) was causing unsightly overlap.)