I am trying to setup svnspam. The setup and configuration went fine. But when the mails are sent to my Gmail id, they do not have the coloured diffs.
Poking into the original mail through the Gmail view original interface I get to see the CSS like this:
<html>
<head>
<style type="text/css">
body {background-color:#ffffff;}
.file {border:1px solid #eeeeee;margin-top:1em;margin-bottom:1em;}
.pathname {font-family:monospace; float:right;}
.fileheader {margin-bottom:.5em;}
.diff {margin:0;}
.tasklist {padding:4px;border:1px dashed #000000;margin-top:1em;}
.tasklist ul {margin-top:0;margin-bottom:0;}
tr.alt {background-color:#eeeeee}
#added {background-color:#ddffdd;}
#addedchars {background-color:#99ff99;font-weight:bolder;}
tr.alt #added {background-color:#ccf7cc;}
#removed {background-color:#ffdddd;}
#removedchars {background-color:#ff9999;font-weight:bolder;}
tr.alt #removed {background-color:#f7cccc;}
#info {color:#888888;}
#context {background-color:#eeeeee;}
td {padding-left:.3em;padding-right:.3em;}
tr.head {border-bottom-width:1px;border-bottom-style:solid;}
tr.head td {padding:0;padding-top:.2em;}
.task {background-color:#ffff00;}
.comment {padding:4px;border:1px dashed #000000;background-color:#ffffdd}
.error {color:red;}
hr {border-width:0px;height:2px;background:black;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" rules="cols">
Now when I copy the whole html from the original source and create an html file locally I get to see the coloured diffs beautifully.
What could be wrong here?
I just started working with HTML mail formatting a couple days ago, so I'm no expert. I've found that it is not easy to support all the different mail clients out there. The number one thing you need to do is use inline styles, as <style> blocks don't necessarily work in all clients. Also, do not attempt to do regular CSS layout, you must use tables for layout. This means lots of repeated code, messy tables, and such. For instance:
<div style="width:590px; margin-top:10px;margin-right:auto;margin-bottom:5px;margin-left:auto; padding: 20px 20px 20px 20px; background-color:#89b556;background-image: url(http://groupon.s3.amazonaws.com/email-images/shared/bg-email-starburst.jpg);background-repeat: no-repeat;background-position: center top; border-width:5px; border-style: solid; border-color:#deedcc;-moz-border-radius:10px;-webkit-border-radius:10px; ">
<table width="100%" style="background-color:#fff; -moz-border-radius-topright:8px; -moz-border-radius-topleft:8px; -webkit-border-top-right-radius:8px; -webkit-border-top-left-radius:8px; *margin-top: -5px" cellspacing="0" cellpadding="0">
I read somewhere that some clients won't accept the <style> block in the <head>, but will in the <body>, so give that a try. Maybe gmail would support that.
Take a look at these free email templates for some ideas. Another thing I do is find a nicely formatted email that was sent to me and view its source. For instance, I used an email sent by Groupon.com, viewed the source, and took ideas from it. Unfortunately, I later found that it doesn't look right in some clients, such as Evolution. But it could be a starting point for you.
Here's another SO question that has some helpful answers.
For completeness sake (and my own future reference), I'm including the awesome link* provided by #Cherian above. I had not seen that link before, but it contains a wealth of information! Great find...
**link has since died at original location. It is accessible at: http://web.archive.org/web/20090116092215/http://xavierfrenette.com/articles/css-support-in-webmail/*
Tauren has given a great answer.
I've just found out that the new gmail interface (introduced in 2011) strips the background-color attribute from inline styles. I've managed to work around this by using the bgcolor attribute on a tr element.
Related
I'm working on sending emails to various email clients(such as yahoo,hotmail,gmail,....).
I have a div with id OrderInfo inside that I have a variable which generates a dynamic table.
HTML
<div id="OrderInfo">
variable
</div>
The dynamic table generates headers(th) with lower case, so I want to change that to uppercase and few more styling. So I have written a selectors
CSS
#OrderInfo table tr th {
text-transform: uppercase;
background-color: #737373;
color: white;
}
This is working fine for yahoo, hotmail but not for gmail.
I came across that only inline styles work for gmail but how can I the styles of modify a dynamic one.
I have no control on the variable (I mentioned in the div) it generates a table with values which processes while sending to the client.
So I cannot keep a static table and cannot change the way it renders
gmail as well as some other web and desktop/mobile clients strips away css stylesheets either imported or embedded in a <style>...</style> node in the head
Put them inline:
<div id="OrderInfo">
<table>
<tr>
<td style="text-transform: uppercase; background-color: #737373; color: white;">
<!-- .......... -->
</td>
</tr>
</table>
</div>
As a more general advice: building email html is not trivial as final result may vary a lot depending on the recipent's mail client.
The general rule is to make the html as simple as possible, avoiding "modern" css features; use nested tables instead of divs when possible (some says build the html as if you were building a 15 years ago webpage).
The above is very general and may not be always true.
There are several resources online that gives advices and rules on how to make an html email or template.
Finally the only and one rule to always follow if you want to be sure of the result: test your messages with various client
UPDATE 2018
GMAIL now and from a while ago has been supporting embedded CSS, so you can use CSS inside tag <style> in head, it even allow/supports the use of media queries.
OLD ANSWER
Gmail doesn't support embedded CSS, you need to use inline styles, take a look at this
12 Things you MUST Know when Developing Emails for Gmail and Gmail Mobile Apps
Here is what you could do:
<th bgcolor="#737373" style="text-transform: uppercase; color:white></th>
Many email service provide not support to css included in email template. Instead use inline css.
Also, Email template should be formed using tables as it only support HTML3. You can use HTML4/5 elements withing td tags
Do check this link. It will help you to build email template.
Try with this styling making your link red with no special effect for the hover situation:
a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}
This works fine for me, but if anyone of the 4 statements are missing it will not work neither in a gmail client nor in Outlook. They must also appear in the order shown above.
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>
I have an old version of frontpage I am toying around with. I planned to use django in the background to do the heavy lifting but thought using this old Frontpage software I have would be good for the front end but I am finding it is writing code in an out of date fashion. I was reading that the tag has been deprecated and we should be using "style" now. the example I was reading has it inside the paragraph or header tag. However the code I have from frontpage is using the font tag inside of a table cell tag so I am wondering what is the correct way to write it.
Here is the code generated by Frontpage
<td width="190" align="center" bgcolor="#000080" height="18"><b><a href="index.htm">
<font title="return to main page" color="#00FFFF" face="Verdana">Home</font></a></b></td>
would I just change it so the styles
<td width="190" align="center" bgcolor="#000080" height="18" style="color:#00FFFF;font-family:Verdana">
<b>Home</b>
</td>
My problem with that is now all text in the table cell would be that font right? So if I wanted more things in the table cell than just the link where would I put that? Also I just tried that and the font-family is working but not the color...?
You need to look up and spend some time learning CSS.
You can do something like this with it:
CSS:
.linkstyle
{
font-family: verdana;
color: #00FFFF;
}
CODE:
<span style="linkstyle">Home</span>
Using inline styles like you've posted, this would work.
<td style="width: 190px; height: 18px; text-align: center; background-color: #000080;">
<strong>Home</strong>
</td>
As a side note, you have several very bad practices. Using tables to lay out your website is very outdated and hard to work with (which is why it is outdated). Using inline CSS is confusing to everyone (including yourself). In addition to the references others have posted, I recommend http://htmldog.com/
Why are you using Frontpage?
Grab a free editor (search for one), or just create it yourself using something like Notepad++. The amount of time you will spend cleaning up code will be a total waste of your time when using Frontpage (gui).
Also use CSS styles instead of inline bgcolor / font, etc;
You could use a combination of <span> tags with class attributes and css.
Here are some good references on that stuff:
HTML: http://www.w3schools.com/tags
CSS2: http://www.w3schools.com/css/css_reference.asp
CSS3: http://www.w3schools.com/css3/css3_reference.asp
What is the best way to place/layout the google+1 and facebook Like buttons so they align neatly?
Currently, the first "thing" in my body is this heading, appearing on top of all pages (slightly modified after logging in): (linebreaks added for readability) :
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<g:plusone size="small" href="https://www.apebroker.com/">
</g:plusone>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.apebroker.com%2Findex.php&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</td>
<td align="left"></td><td align="right">It's more fun after you
login
</td>
</tr>
</table>
My problem is that this looks like crap. I know that pages don't need to look exactly the same in every browser, but acceptable ugliness has its limits.
The google button is nicely "vertically centered", while the facebook stuff kind of sticks to the top of the page, 0px down.
See this example:
I tried adding padding:2px; to the style in the facebook iframe, and sure, it came down a bit, but so did the google button too, and the entire heading grew, pushing down the <hr> below.
I obviously don't know much about iframes, but I've managed fine on my own until now.
In my global style sheet I have (amongst other things) this:
body {
margin:0px;
padding:0px;
background-color:#e0e0b0;
color:#302010;
font-family:"Trebuchet MS",Helvetica,Sans-serif;
font-size:100%;
}
And I don't want to change that, as it cascades to all sorts of things that I'm reluctant to break. If you want to check out the complete style sheet and HTML source, an example page can be found here.
Thank you in advance for any hints/suggestions!
How about plus one button, and it's width?
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ru'}
</script>
A problem is that the table cells are sizing themself based on the font size even though there isn't any text in the table.
The "correct" answer is not to use tables for layout.
However, if you explicitly set:
<td align="left" style="font-size: 1px">
then your life will get slightly better as you'll be able to explicitly control the height of each of the cells and position things. At the moment despite you "asking" for a height of 21px, you're getting 26px.
After that the FB button will look nice and you'll need to move the +1 button around.
But, the real answer is not to use tables:
http://www.w3.org/2002/03/csslayout-howto
http://www.hotdesign.com/seybold/
and various others...
I've found a fix for this using to encapsulate both fb:like and g:plus separately, and then setting the style of both to style="vertical-align: top;". See example at http://www.clonearmycustoms.com/
I use a MediaWiki instance on a thumb drive to keep track of a ton of stuff. In the past, I've been in a hurry so I haven't had the chance to look for a nice way to make tables, so this syntax has served my purposes well:
{| border=1
...
|}
Now I want something a little nicer; I'm used to using CSS to make nicer table borders, but I'm not finding a clean way to do this syntax via MediaWiki. Basically, I want a table that looks equivalent to this HTML:
<table style="border-collapse: collapse">
<tr>
<td style="border: 1px solid black">one</td>
<td style="border: 1px solid black">two</td>
</tr>
</table>
Setting border on every cell is going to be difficult. My initial guess is I need to add a table class to a CSS file somewhere; if so, where might the appropriate file be located?
Do like they do in Wikipedia: create a "prettytable" template (see source; you can skip the fancy <noinclude> stuff) where you put some HTML / CSS, e.g.:
border="1" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0;
background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse;"
Then use the template like this in your tables; it does a simple "include":
{| {{Prettytable}}
...
|}
The same technique can be used for styling cells. You should find plenty more examples of this in different Wikipedias (and other Wikimedia projects).
You can customise the CSS used via pages in the MediaWiki namespace, for example, MediaWiki:Common.css. There are also skin-specific CSS pages, e.g. MediaWiki:Monobook.css, for the default skin.
As you wrote, you can edit Mediawiki CSS files. This is the way to go; however, if for some reason you can't use CSS, you can always use Wiki templates that contain cell-specific styling tags.
Use this tool to quickly generate the tables - http://www.tablesgenerator.com/mediawiki_tables