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}"/>
Related
Is there any reason why bootstrap slider is not being recognised as a function even though the correct dependencies are there?
The jquery ui files downloaded that are present in the web app folder are customised to not contain slider widget conflict functions.
<!doctype html>
<html lang="en">
<head>
<script src="bootstrap-slider.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-slider.css">
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery-ui.js"></script>
<title>Bootstrap Slider</title>
<style>
</style>
<script>
$("#ex1").bootstrapSlider({
formatter: function(value) {
return "Current value: " + value;
}
});
</script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
</body>
</html>
Please provide a jsfiddle or a screenshot of your console. If you say that you got all the dependencies (as I think your code is correct), I'm guessing you may have a problem with your paths.
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.
I'm working on a project for an exam and I need to change the stylesheet's name in the page. How can I do this with Dart?
I've seen that I can edit every attribute of my css from Dart but I've already made others css that I would like to use in my page.
For example, I have this in my html page:
<link href="stile.css" rel="stylesheet" type="text/css">
I need to edit the page to make this
<link href="stile-blu.css" rel="stylesheet" type="text/css">
How can I do this?
Assuming your <link ...> element is in the <head> element
document.querySelector('#button').onClick.listen((_) {
var stile = document.head.querySelector('link[href="stile.css"]');
stile.attributes['href'] = 'stile-blu.css';
});
If you add an id attribute to your link element the selector can be simplified
<link id="mystyle" href="stile.css" rel="stylesheet" type="text/css">
document.querySelector('#button').onClick.listen((_) {
var stile = document.head.querySelector('#mystyle');
stile.attributes['href'] = 'stile-blu.css';
});
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'm building an ASP.NET app using themes, and I've assigned a theme to the app using the web config.
I have a bookmark icon that I want to use for my page and it is located in the themes directory, but I am having trouble referencing the themes location from a link tag in my header.
First I tried putting a code block inside the link tags href element, which did not work. Instead all it did was HTML encode the <% characters and output it directly to the browser:
<link rel="shortcut icon" href="/App_Themes/<%=Page.Theme %>/images/bookmark.ico" type="image/x-icon" runat="server"/>
I am able to put a code block inside an element in an hr tag though, so I don't know why it won't work in a link tag:
<hr test="<%=Page.Theme %>"/>
Then I tried doing a Response.Write inside the head tag, but I got an error saying the Controls collection cannot be modified because the control contains code blocks:
<% Response.Write("<link rel=\"shortcut icon\" href=\"/App_Themes/" + Page.Theme + "/images/bookmark.ico\" type=\"image/x-icon\"/>"); %>
I also tried it just with a string literal, and got the same error:
<%= "<link rel=\"shortcut icon\" href=\"/App_Themes/" + Page.StyleSheetTheme + "/images/bookmark.ico\" type=\"image/x-icon\"/>" %>
Is there any way to reference something from the themes directory inside the link tag?
I'm trying to do this in both an ASP.NET 2 and an ASP.NET 2 MVC app.
This wouldn't work because you marked it as runat="server"
try this instead
<link rel="shortcut icon" href="<%=ResolveUrl(string.Format("~/App_Themes/{0}/images/bookmark.ico", Page.Theme)) %>" type="image/x-icon"/>
You can get rid of the inline code by wrapping your script with some server element:
<head runat="server">
<title>My Test App <title>
<div runat="server">
<link rel="shortcut icon" href="/App_Themes/<%=Page.Theme %>/images/bookmark.ico" type="image/x-icon" runat="server"/>
</div>
</head>
I use this way. (Add dummy space into block):
<link href="<%=""+RootUrl%>_ui/css/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" href="<%=""+RootUrl%>_ui/favicon.ico" />
Try creating an HTML helper such as:
public static string SetThemeIcon(this HtmlHelper html, string themename)
{
var filePath = VirtualPathUtility.ToAbsolute("~/App_Themes/" + themename + "/images/bookmark.ico");
return "<link rel=\"shortcut icon\" href=\"" + filePath + "\" type=\"image/x-icon\"/>";
}
then, in your view or master page, simply reference it as so:
<%= Html.SetThemeIcon("test") %>
or as in your case above (in mvc):
<%= Html.SetThemeIcon(String.IsNullOrEmpty(Page.Theme) ? Page.StyleSheetTheme : Page.Theme) %>
Ok I got it working by using some inline code. Inline code is not my my first choice but I wanted a solution that worked in mvc as well. Here's what I came up with:
<head runat="server">
<title>My Test App <title>
<script language="CS" runat="server">
void Page_Load(object sender, System.EventArgs e)
{
string sTheme = String.IsNullOrEmpty(Page.Theme) ? Page.StyleSheetTheme : Page.Theme;
litFacIcon.Text = "<link rel=\"shortcut icon\" href=\"/App_Themes/" + sTheme + "/images/bookmark.ico\" type=\"image/x-icon\"/>";
}
</script>
<asp:Literal ID="litFacIcon" runat="server"></asp:Literal>
</head>
You could also do this:
<head>
<style type="text/css">
#import "<%= ResolveUrl("~/content/styles.css") %>";
#import "<%= ResolveUrl("~/content/print.css") %>" print;
</style>
</head>