I'm working with Sendgrid's template system and need to manually inline some css for content that will be included in the Sendgrid smtpapi call.
Premailer doesn't seem to be actually inlining the css styles. I can inspect the result of calling Premailer.new but the processed_doc and doc both do not have the styles inlined.
Different methods I've tried:
Including the css file directly:
header = <<-HTML
<div class="preview-content">
#{data["content"]}
</div>
HTML
p header
=> "<div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. </p>\n</div>\n"
premailer = Premailer.new(header, with_html_string: true, adapter: :nokogiri,css: [Rails.root.join('app', 'assets', 'stylesheets', 'email_base.css').to_s], input_encoding: "UTF-8", verbose: true)
p premailer.processed_doc.to_html
=> "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n<html><body>\n<div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>\n</div>\n</body></html>\n"
premailer.doc.to_html returns the same thing with no inlined css.
I checked that the css file is accessible and that the styles apply to .preview-content p.
Adding a header to the document
header = <<-HTML
<!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 charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<link rel="stylesheet" href="/asset/email_base.css" media="all">
</head>
<body width="100%" height="100%" bgcolor="#ffffff" style="margin: 0; padding: 0 20px;">
<div class="preview-content">
#{data["content"]}
</div>
</body>
</html>
HTML
p header
=> '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n <html xmlns=\"http://www.w3.org/1999/xhtml\">\n <head>\n <meta charset=\"utf-8\"> <!-- utf-8 works for most cases -->\n <meta name=\"viewport\" content=\"width=device-width\"> <!-- Forcing initial-scale shouldn't be necessary -->\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <!-- Use the latest (edge) version of IE rendering engine -->\n <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->\n <link rel=\"stylesheet\" href=\"/asset/email_base.css\" media=\"all\">\n </head>\n <body width=\"100%\" height=\"100%\" bgcolor=\"#ffffff\" style=\"margin: 0; padding: 0 20px;\">\n <div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p></div>\n </body>\n </html>\n'
The desired css to be inline:
.the-excerpt,
.the-excerpt p,
.preview-content p
// +responsive-text(18px, 30px)
line-height: 1.8 !important
font-size: 18px
Is there something I'm missing to inline css manually? Both ways don't seem to yield any different results.
I'm trying out Premailer right now, and having some problems of my own.. but the way that i see Premailer actually processing the content and getting something different back (it removes the classes with the proper configuration setting, at least) is using this method:
premailer = Premailer.new(html, { :with_html_string=>true, :verbose=>true, :remove_classes=>true })
return premailer.to_inline_css
Related
Help. Am learning HTML5/CSS. Things are going spiffy until I cannot debug my HTML/CSS markup.
Am using WeBuilder which auto-completes and has links to standard tools like Tidy and others.
Here is what I’ve tried
used an internal CSS link in my HTML: it works;
put the styles.css in same and in a css folder- BUMMER
have relocated both files to another HDD- BUMMER
both files validate with my available tools
I am sure the problem is in the HTML file and have fiddled with every modification I can find suggestions about. I have rewritten the HTML again using WeBuilder’s auto complete but have not done it in Notepad. I understand the basics of HTML and CSS plus am very familiar with files and folders so have directed the href correctly (even so have tried several ideas from W3C.
NOTE: I see in the "publish" here, it picks up the Arial font where mine has times. If Arial is not your default, I'm at a loss because the color doesn't show. Neither shows the color. If I can be of further help please advise. I really thank you for any help.
Here is my HTML markup:
<!DOCTYPE html5>
<html>
<head>
<title>A Simple Page</title>
<meta http-equiv="content-type" content="text/htm; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
<link rel="stylesheet" href="styles.css" />
</style>
</head>
<body>
<h1>First Title</h1>
<p>A paragraph of interesting content</p>
<h2>Second Title</h2>
<p>A paragraph of interesting content</p>
<h2>Third Title</h2>
<p>A paragraph of interesting content</p>
</body>
</html>
Here is the CSS:
h1, h2 {
color: #3366CC;
font-family: "Arial", sans-serif;
}
This makes no sense:
<style type="text/css">
<link rel="stylesheet" href="styles.css" />
</style>
It should simply be:
<link rel="stylesheet" href="styles.css" type="text/css" />
The <style> tags are only used for inline CSS in a page. So if you wanted to you could do this:
<style type="text/css">
h1, h2 {
color: #3366CC;
font-family: "Arial", sans-serif;
}
</style>
But it is really better to keep CSS in a separate file.
Also, there is a minor issue with your DOCTYPE at the top of your HTML file. An HTML5 DOCTYPE is simply:
<!DOCTYPE html>
And not:
<!DOCTYPE html5>
The purpose of HTML5 is to—among other things—simplify document formatting & readability. So there is no such thing as <!DOCTYPE html5> it is simply <!DOCTYPE html>.
I am trying angular.dart and saw that its slow. When am html page is loaded containing angular, angular directive is seen first, which are then converted appropriately. Shouldn't it be converted instantaneously and the user should not see whether we are using angular ?
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
</head>
<body>
<h3>Hello {{name}}!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
Surround {{name}} with a tag having class="ng-cloak". I used span tag. Keep it hidden by specifying css rule .ng-cloak{ display:none; }.
When angular is loaded, it will remove class="ng-cloak" from the span tag and everything will work as expected.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
<style>
.ng-cloak{ display:none;}
</style>
</head>
<body>
<h3>Hello <span class="ng-cloak">{{name}}</span>!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
</body>
</html>
An alternative way is to use ng-bind as demonstrated in this youtube video: AngularJS MTV Meetup: Best Practices (2012/12/11) (after about 12 minutes)
Quoted from the API doc of NgBindDirective class
Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.
It is preferrable to use ngBind instead of {{ expression }} when a
template is momentarily displayed by the browser in its raw state
before Angular compiles it. Since ngBind is an element attribute, it
makes the bindings invisible to the user while the page is loading.
This way you can display default content that get's replaced when Angular is ready
instead of showing a blank page or a progress icon.
Currently I am using the JavaFx Webview to load a HTML page. But there is a problem when it loads the HTML page. It doesn't read the letter-spacing or -webkit-letter-spacing attribute in CSS. It's fine with the Chrome browser. How can I make it work in JavaFx?
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style>
.text {
letter-spacing: 20px;
}
</style>
</head>
<body>
<div class="text">
abcdefg
</div>
</body>
</html>
Looks like this property is not supported in JavaFX/JDK 7, but works for me in JavaFX/JDK 8. As far as I know, some of the WebViews rendering bugs fixed in JDK 8 won't be backported to JDK 7 and this one seems like being one of such bugs.
I have a simple web-app that I'm throwing together.
By & large, the default grails main.css is fine for all the scaffolded pages.
However, I want to supress this and use different, in-line css for the landing page.
How do I configure grails not to link main.css on a specific page?
The html is extremely simple, and contains no grails specific markup:
<!doctype html>
<html>
<head>
<meta name="layout" content="main" />
<title>My landing page</title>
<style type="text/css" media="screen">
body
{
background-color: #fff;
}
img {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img alt="Welcome!"
src="${resource(dir:'images',file:'Landing.png') }">
</body>
</html>
Also -- is main.css linked purely out of convention, or is there some configuration lurking somewhere I haven't spotted? (I've done a search but couldn't find it anywhere).
Can someone please reference where in the docs it talks about these conventions?
main.css is included in your landing page because you have specified that your landing page is based on the main layout
<meta name="layout" content="main" />
this layout is defined by grails-app/views/layouts/main.gsp and includes the main.css, most likely with a tag like this in the <head> of the page:
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
If you remove:
<meta name="layout" content="main" />
your landing page will no longer be based on the main layout, so it will not include anything defined therein (e.g. main.css).
However, rather than removing the layout completely just to prevent main.css from being included, it may be simpler to just override the CSS rules that you want to cusomise on the layout page by including custom rules in a <style> block in the <head> of the landing page
<style type="text/css">
body {
/* styles in here override styles from main.css */
}
</style>
Take a look at the resources plugin in grails 2.0.x. You can define Modules comprising of specific javascript and CSS files which will be compressed, optimized for the web. In the page of your choice, you can include the module you want. In your case, you could add a case like this in your main.gsp
<g:if test="${controllerName == "landing"}">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'custom.css')}"/>
</g:if>
<g:else>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}"/>
</g:else>
I've been developing on 6.7.2 for quite some time and yesterday I noticed the weird looking version of my application. I went to the debug version and found this:
Starting Vaadin client side engine. Widgetset: Xinco
Widget set is built on version: 6.7.2
Warning: widgetset version 6.7.2 does not seem to match theme version
Starting application xincovaadin-1652339780
Vaadin application servlet version: 6.7.2
Application version: NONVERSIONED
inserting load indicator
Making UIDL Request with params: init
Server visit took 30ms
JSON parsing took 0ms
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
How can I fix this? I tried rebuilding my widgets without luck. Line 11 above repeats lots of times.
See: https://vaadin.com/forum/-/message_boards/view_message/953384
Edit:
From Firebug:
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type">
<style type="text/css">
<link href="/xinco/VAADIN/themes/xinco/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
<link href="/xinco/VAADIN/themes/xinco/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
<title>Xinco</title>
<link rel="stylesheet" type="text/css" href="/xinco/VAADIN/themes/xinco/styles.css">
<link rel="stylesheet" href="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/easyuploads.css">
<link rel="stylesheet" href="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/expandingtextarea/expandingtextarea.css">
<link rel="stylesheet" href="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/stepper/stepper.css">
</head>
<body class="v-generated-body v-ff v-ff8 v-ff80 v-gecko v-win" scroll="auto">
<script type="text/javascript">
<iframe id="__gwt_historyFrame" src="javascript:false" style="position:absolute;width:0;height:0;border:0;overflow:hidden;" tabindex="-1">
<script src="/xinco/VAADIN/widgetsets/Xinco/Xinco.nocache.js?1323124855776" language="javascript">
<script src="http://localhost:8084/xinco/VAADIN/widgetsets/Xinco/swfupload.js" language="javascript">
<script defer="defer">
<script type="text/javascript">
<script type="text/javascript">
<div id="xincovaadin-1652339780" class="v-app v-theme-xinco v-app-Xinco">
<noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript>
<iframe id="Xinco" src="javascript:''" style="position: absolute; width: 0pt; height: 0pt; border: medium none;" tabindex="-1">
</body>
</html>
This is what I see when looking at the page source:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">html, body {height:100%;margin:0;}</style><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/xinco/VAADIN/themes/xinco/favicon.ico" /><link rel="icon" type="image/vnd.microsoft.icon" href="/xinco/VAADIN/themes/xinco/favicon.ico" /><title>Xinco</title>
</head>
<body scroll="auto" class="v-generated-body">
<script type="text/javascript">
//<![CDATA[
if(!vaadin || !vaadin.vaadinConfigurations) {
if(!vaadin) { var vaadin = {}}
vaadin.vaadinConfigurations = {};
if (!vaadin.themesLoaded) { vaadin.themesLoaded = {}; }
vaadin.debug = true;
document.write('<iframe tabIndex="-1" id="__gwt_historyFrame" style="position:absolute;width:0;height:0;border:0;overflow:hidden;" src="javascript:false"></iframe>');
document.write("<script language='javascript' src='/xinco/VAADIN/widgetsets/Xinco/Xinco.nocache.js?1323183529006'><\/script>");
}
vaadin.vaadinConfigurations["xincovaadin-1652339780"] = {appUri:'/xinco/vaadin', standalone: true, themeUri:"/xinco/VAADIN/themes/xinco", versionInfo : {vaadinVersion:"6.7.2",applicationVersion:"NONVERSIONED"},"comErrMsg": {"caption":"Communication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null},"authErrMsg": {"caption":"Authentication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null}};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
if(!vaadin.themesLoaded['xinco']) {
var stylesheet = document.createElement('link');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('type', 'text/css');
stylesheet.setAttribute('href', '/xinco/VAADIN/themes/xinco/styles.css');
document.getElementsByTagName('head')[0].appendChild(stylesheet);
vaadin.themesLoaded['xinco'] = true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
setTimeout('if (typeof Xinco == "undefined") {alert("Failed to load the widgetset: /xinco/VAADIN/widgetsets/Xinco/Xinco.nocache.js?1323183529006")};',15000);
//]]>
</script>
<div id="xincovaadin-1652339780" class="v-app v-theme-xinco v-app-Xinco" ><div class="v-app-loading"></div></div>
<noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript></body>
</html>
The source code can be downloaded from here. The project is a NetBeans project.
Which theme are you using? Assuming that it's a custom theme, will the error messages disappear if you use the default theme?
Also make sure that:
You have cleaned your project and application server, and rebuilt the project
You don't have two different versions of the Vaadin JAR in your WEB-INF/lib directory
You haven't copied a theme directory from an older Vaadin JAR to your VAADIN/themes directory
Your (assumed) custom theme isn't inheriting any old theme
If you check the loaded css files in your browser (Firebug came in handy when I tried this), styles.css (or one of the styles.css') includes the following beginning part:
.v-theme-version:after {
content: "6_7_2";
}
.v-theme-version-6_7_2 {
display: none;
}
The only way I managed to produce this error was to inherit a custom theme from another Vaadin version's theme.
Update:
I checked your project and I think I know what's wrong. The servlet-mapping in web.xml should read /VAADIN/* instead of /vaadin/*. It should work without this change if you copy the themes from your vaadin.jar to VAADIN/themes in your project. Normally you should also copy the Vaadin widgetsets, but since you are using a custom widgetset, you don't have to do this.
Source: https://vaadin.com/book/-/page/application.environment.html#section.web.web-xml
Have you extracted the VAADIN/themes folder from vaadin.jar so that it is served statically? In that case, you need to update that directory with the contents from Vaadin 6.7.2.
Alternatively, have you created a folder under VAADIN/themes that has the same name as the Vaadin theme that you are using?