I'm making a website with spring-boot & spring-security which prefers to supply freemarker as view. I don't know ftl much, and now I need use adminLTE's CSS and JS files in my ftl, but how?
<html lang="en">
<#assign basePath=request.contextPath>
<#macro head>
...
<script src="${basePath}WEB-INF/AdminLTE/dist/js/adminlte.min.js"></script>
<link src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/line/line.css" rel="stylesheet"></link>
<script src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/icheck.js"></script>
...
<#macro>
you can include css file by using <#include > tag,
place the stylesheet in the directory and use the
<#include "/{path to style sheet}/Styles.css">
and make sure your style sheet is inside the styles element:
<style type="text/css">
...
</style>
Example of this approach is
Test Template
<html>
<head>
<#include "css/test.css">
</head>
<body>
.......................
</body>
</html>
test.css
<style type="text/css">
body{background-color:#C5C5C0;}
*{font-family:Tahoma, Verdana, Helvetica, sans-serif;}
</style>
you can declare some param in code and use it to fill full path to css
// in java
params.put("htmlIncludePath", "classpath:/templates/pdfTemplates/include/");
...
// in ftl
<link href="${htmlIncludePath}manrope.css" rel="stylesheet">
physically files should be located in src/main/resources/templates/pdfTemplates/include
I use this simple solution.
I created a dedicated Get method for css-s.
#GetMapping(value="/css/{cssFile}")
public #ResponseBody byte[] getFile(#PathVariable("cssFile") String cssFile) throws IOException {
InputStream in = getClass()
.getResourceAsStream("/css/" + cssFile);
try {
return in.readAllBytes();
} catch (Exception e){
var error = new String("ERROR: css file (/css/" + cssFile + ") not found");
return error.getBytes();
}
}
Now I can reference the css file in the usual html way right in .ftlh file. Just need to put my file under resources/css/ directory.
<html>
<head>
<link href="css/general.css" rel="stylesheet">
</head>
<body>
...
Please also note that the suggested method (see other responses) with include statement, will produce a html file with full content of the corresponding css file not a link to css. So if you have heavy css files expect that their content will be literally included into html files received by clients.
Related
I created a JSON document for an OpenApi Restful service. I was wondering if there is anyway to load the json file without using an outsource website. Sorry if this is a dumb question im new to OpenApi.
Here is the html code;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ReDoc</title>
<link rel="icon" href="favicon.png">
<style>
body {
margin: 0;
padding: 0;
}
redoc {
display: block;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
</head>
<body>
<redoc spec-url="https://api.myjson.com/bins/json" ></redoc>
<script src="redoc.standalone.js"></script>
</body>
</html>
I want to load the json file without the spec-url . <redoc spec-url="https://api.myjson.com/bins/json" ></redoc>
Yes, this can be done. Just place the input source in a folder that is not served from webpack, this can be found in your webpack config file.
devServer: {
contentBase: "./public/", // this
watchContentBase: true,
historyApiFallback: true
}
And add path in spec-url accordingly.
So I have the following controller that maps to the same ThymeLeaf template:
#GetMapping(value="/nextStep/{id}")
public String nextStep(#PathVariable int id) {
return "nextStep";
}
#GetMapping(value="/xxx")
public String nextStep() {
return "nextStep";
}
If I navigate to /xxx, the page has my css applied. If I navigate to /nextStep/10 the template displays but there is no css applied.
The template is simple:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" href="my.css">
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
Hello world<br>
</body>
</html>
There are no exceptions thrown in this example.
I think i have the same problem, all pages load with css all right. but if i access localhost:8080/group/3 the page will come without css (even the pages was in the same directory).
#GetMapping(value = "/group/{id}")
I found a shortcut to avoid this issue:
#GetMapping(value = "/group-{id}")
In my case this works fine, i hope work on your too.
you need put CSS path like this
<link rel="stylesheet" type="text/css" th:href="#{/css/my.css}"/>
I am using node.js to run a local website and am having trouble linking the css to html.
The html is:
<!DOCTYPE html>
<html>
<head>
<title> Name </title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="background">
<h1> My Website </h1>
<span style="float:right">
Google
</span>
</body>
and css is:
#background {
background-color: #0099FF;
}
I have not been able to view the effects of the css on the website and am not able to change the background color.
I have checked online resources and it seems as if the syntax is correct. The css file style.css is in the same directory as the html. The html is working on the local website but not the css.
update: i am adding the app.js file
var http = require('http'),
fs = require('fs');
fs.readFile('./header.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(8080);
});
Your syntax looks correct. Definitely check the browser console to see if there is error with finding the css file. I would check to make sure that the css file is indeed named "style.css".
try doing class="background"
and then in css do .background instead of #background
Try putting this code at the line under your title tag
<base href="/">
This thread might help you more
I am new to thymeleaf and have to convert all my jsp files to thymeleaf.Well i have a external class file as given below:
Info.java
public class Info{
public String filePath="http://localhost:8080/myapp/cssfolder";
}
and now that i would like to include it in my thymeleaf css file such that
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<link href="${filePath}/StyleSheet.css" type="text/css" rel="stylesheet" />
</head>
<body> ... </body>
</html>
i have also sent the value as a model map in my controller.Still i dont get the value of filepath in the link.It only displays link as "{$filePath}/StyleSheet.css" while running the page.Please somebody help me with this
You should do:
<link th:href="${filePath}/stylesheet.css" href="static_url" type="text/css" rel="stylesheet" />
Where static_url is the path in your HTML mockups.
I need to set the HTML to iFrame. (iFrame src is null.)
e.g I get following string from web method call:
string s =
<html>
<head>
<style type="text/css"> <!-- .some dynamicaly generated css> </style>
<link id="css1" type="text/css" rel="stylesheet" href="1.css" /></head>
<body style="padding:0; margin:0;" tabIndex="-1">
--- some HTML elements ------
<script type="text/javascript">
---some script ---
</script>
</body>
</html>
I need to set this string into iFrame. But when I use iframe.innerHTML it strips out head and body tags.
Can you please help me in this? Do I need to add something to string or add some property to iframe.
Thanks in advance.
Why don't you you use jquery?, it will be more easer.
You just can var innerHtml = $( 'Your html' );
and then user function called $.html( innerHtml );