I an a newsletter app, i send a view as a template of mail.
Inside the view there a variable that hold the content taken from a form.
I try to apply different inline style to the view, but no one worked.
This is the view, now there is only one style (color:blue) to test css:
<html>
<body style="color:blue;">
{{ $content }}
</body>
</html>
How can i do to style this view, and send a mail with the proper css style?
Thank you
You can do styling like this,
<!DOCTYPE html>
<html>
<body>
<p style="font-style:italic">
{{ $content }}
</p>
</body>
</html>
It works for me.
Related
I have the following simple HTML page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons, sap.ui.table, sap.ui.ux3"
data-sap-ui-theme= "sap_bluecrystal">
</script>
<script>
sap.ui.localResources("zvhr_dashboard");
var view = sap.ui.view({id:"idDashboard1", viewName:"zvhr_dashboard.Dashboard", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<header class="header">Page Header</header>
<div id="content" class="content">
<div id="totalHoursChart" class="chartContainer"></div>
<div id="totalCostChart" class="chartContainer"></div>
<div id="totalCountChart" class="chartContainer"></div>
</div>
</body>
The containers totalHoursChart, totalCostsChart, totalCountChart are for line charts. Whenever the template is rendered because of the lines
var view = sap.ui.view({
id:"idDashboard1",
viewName:"zvhr_dashboard.Dashboard",
type:sap.ui.core.mvc.ViewType.JS
});
view.placeAt("content");
There is only one div created in content div and line charts that I draw and place at respective chart containers get overridden. I am unable to figure out how to do this nested views.
I have been unable to find one simple example showing how to do this.
Create a separate div to place your view in:
<div id="content" class="content">
<div id="dashboardContainer"></div>
<div id="totalHoursChart" class="chartContainer"></div>
<div id="totalCostChart" class="chartContainer"></div>
<div id="totalCountChart" class="chartContainer"></div>
</div>
view.placeAt("dashboardContainer");
Well I was able to achieve what I needed and I guess it precisely does fulfill my requirement. I referred to this and understood that the whole page can have a layout and I can place multiple views inside that layout.
The link I provided is of VerticalLayout but there are lot many options to pick from. Using it I was able to place three views(line charts in my case one below the other). The only thing I didnt like was that I had to give fixed width in pixels for every view that I placed inside layout, because when I gave width in percentages the views started shrinking after the page rendering was done.
So to follow the suggestion of #Qualiture I did it in one single div.
In the interest of DRY, I have 3 page types in my SPA: (1)Layout, (2)Index, and (3)XXXX (view).
Layout has the body related tags, Index the nav system, and XXXX the relative content. Here is the code:
Layout.ejs:
<!DOCTYPE>
<html>
<head>
<title>Index Page</title>
<% include ../includes/styles%>
<script type="text/javascript" src="/vendor/jquery/dist/jquery.min.js" ></script>
</head>
<body>
</body>
<% include ../includes/scripts%>
</html>
Index.ejs:
<% include ../includes/layout %>
<h1>This is where the nav bar goes</h1>
<div data-ng-view></div>
View pages not important for this problem.
What I noticed is that my sccript tags from layout are above the body's children DOMs, not at all what I wanted.
What I wanted is:
----- body
--- content
----- scripts
What must I do in layout.ejs to keep the script tags at the bottom of the final html page?
ejs-locals does not support Express 4.x.
I opted for creating a custom engine.
I'm learning to use html. I want the words 'hello welcome to my blog' to appear in courier font. But I want to set it up as a 'class'.
I'm on blogger and I can't seem to get the code working to make this text appear. I'm sure I typed out everything right but for some reason blogspot won't apply the courier font.
However it can read things like h1/h2/Bold/Italic but only when this is directly written before class not in brackets on its own.
<head>
<style>
.font (font-family:courier;)
</ style>
</head>
<body>
<div class="font">
Hello welcome to my blog </div>
</ body>
In CSS syntax you need to wrap properties and values within braces {} not in parenthesis ()
Also you need to close the tags carefully like this </body> Don't use space inside like this </ body>
So you code should look like this-
<head>
<style>
.font {
font-family:courier;
}
</style>
</head>
<body>
<div class="font">
Hello welcome to my blog
</div>
</body>
replace () with {} on the style
<html>
<head>
<STYLE type=" text/css ">
.font{font-family :"Courier New", Courier, monospace}
</style>
</head>
<body>
<div class="font">
`Hello welcome to my blog</div> </body>
</html>
demo for this
I want to load TinyMCe with default content as below when loaded .
<html>
<body>
</body>
</html>
I have set cleanup : false . Still it wraps html with <p></p> and removes my code .
Any solution to this ?
Got it solved . Just had to enable full html plugin.
I'm learning Perl and using Dancer as a web framework.
I've got two views (tt files) which should share the same navigation.
So, it would be great to start learning how to manage templates for navigation and footers.
I've read the documentation for the Template Toolkit and I've done the following:
I've changed the config.yml file to:
#template: "simple"
template: "template_toolkit"
engines:
template_toolkit:
start_tag: '[%'
end_tag: '%]'
I've defined the templates in the .pm file:
package proyecto;
use Dancer ':syntax';
our $VERSION = '0.1';
get '/' => sub {
template 'index';
};
get '/menu' => sub {
template 'menu';
};
true;
There is a link in the index template directing the visitor to the menu template:
<li class="active">< a href="/menu">Menu <span class="sr-only"></span></a></li>
I would like to reuse the navigation code from index.tt into menu.tt, so I've wrapped the navigation code in index.tt with the following:
[% BLOCK navigation %]
#my nav code
[% END %]
To finally include that code in the menu.tt file, I've written the following (where the navigation code should be):
[% navigation = 'index.tt' %]
[% INCLUDE navigation %]
The files index.tt and menu.tt are located in the folder views. But it seems it's not that easy! =( Any suggestion on how to reuse code from one file to another which is located in the same directory?
This is what layouts are for. The idea is that content common to all pages (e.g. header, footer, navbar) goes in the layout and content specific to each page goes in templates called views. Views are called "partials" in other frameworks because they only contain the content for part of the page.
If you use the dancer command line utility to set up your application, the default layout is views/layouts/main.tt and looks something like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=<% settings.charset %>" />
<title>Foo</title>
<link rel="stylesheet" href="<% request.uri_base %>/css/style.css" />
</head>
<body>
<% content %>
<div id="footer">
Powered by Dancer <% dancer_version %>
</div>
</body>
</html>
The <% content %> section is replaced with the specified view when you call template 'view';. (In your case, you'll need to change <% and %> to [% and %] since you're using the Template Toolkit-style delimiters.)
For example, if views/index.tt is:
<h1>Hello, World!</h1>
calling template 'index'; in a route renders the following:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Foo</title>
<link rel="stylesheet" href="http://www.example.com/css/style.css" />
</head>
<body>
<h1>Hello, World!</h1>
<div id="footer">
Powered by Dancer 1.3202
</div>
</body>
</html>
Note that there's already a footer section; you just have to add elements for a header and navbar.
If this is new development, you should really be using Dancer2 instead of Dancer (fortunately, layouts and views are the same in both).
The [% INCLUDE %] directive's argument can be interpreted in one of two ways.
The name of another template file
The name of a block that is defined in the current template file (or in another template file which has included the current template file).
All of which means that your current plan won't work. menu.tt won't see any block defined inside index.tt.
There are a couple of better solutions though.
Firstly, consider moving the navigation code into a third, separate, template file. You can then INCLUDE this template into both index.tt and menu.tt.
Secondly, you can use Dancer's "layout" feature. This is a template that is wrapped around your view templates. Typically the layout template contains the navigation and all standard page furniture (like headers and footers). It also contains a [% content %] directive. When a view is rendered, the rendered version is dropped into the layout template in the location of the [% content %] directive. See the Layouts section in Dancer::Tutorial for more information.
p.s. I see you're using Dancer. I'd highly recommend switching to Dancer2.