I have a .jsp file
<!doctype html>
<html lang="en">
<head>
<title>Calendar</title>
<h1><div align="center">My Sunlife App</div></h1>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="cssFiles/BackgroundIMGE.css" media="screen">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
It is using a css file (BackgroundIMGE.css) which sets the background image. I have placed this css file in my Workspace\MySunlifeApp\cssFiles\BackgroundIMGE.css.
Name of application using this is MySunlifeApp.
The css file is:
body {
background-image: url(/asd.jpg); /*You will specify your image path here.*/
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: top center !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}
Here asd.jpg is also in the same folder as the CSS file.
When I am running the application, it is not loading the CSS file.
http://localhost:8090/MySunlifeApp/cssFiles/BackgroundIMGE.css Failed to load resource: the server responded with a status of 404 (Not Found)
Related
I am creating an email using Spring Boot and Apache FreeMarker. Is it possible to include CSS in the email without needing to have a huge tag in the header?
Here is an example .ftl file that I would like to link a .css file to:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="style-in-css-doc">
Some text to be styled
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You can simply include the css file into your template by putting css code in another ftl file and then include it to your main template with include directive
<#include path>
Previously I have worked just with JSP and Apache Tiles and now I'm trying to create Thymeleaf template for the first time. The problem I faced is that I have no idea how to insert custom header, footer and other sections into default.html. Here is the code example.
default.html:
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8"/>
<title>Default template</title>
<link rel="stylesheet" type="text/css" href="../static/css/app.css" th:href="#{/css/app.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css" th:href="#{/css/bootstrap.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/myCss.css" th:href="#{/css/myCss.css}"/>
</head>
<body>
<header id="header" layout:fragment="header">
HEADER
</header>
<section id="sidemenu" layout:fragment="sideMenu">
SIDE_MENU
</section>
<section id="site-content" layout:fragment="siteContent"></section>
<footer id="footer" layout:fragment="footerTemplate"></footer>
</body>
</html>
In default.html I have 'siteContent' which is provided for inserting all of application's html files, and 'header', 'sideMenu' and 'footer' sections that have to be implemented in separate corresponding html files (templates) and inserted into default.html.
index.html:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
<title>Index</title>
</head>
<body>
<div layout:fragment="siteContent">
<h1>Hello world!</h1>
</div>
</body>
</html>
footer.html:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{default}">
<head>
<title>Footer Template</title>
</head>
<body>
<div layout:fragment="footer">
Copyright © 2017
</div>
</body>
</html>
This is an example of footer.
SiteContent area works fine. Footer's 'Copyright © 2017' is supposed to be imported into default.html's footer area, but it doesn't.
The solution is found: I should have used
'footer id="footer" layout:include="footerTemplate"'
instead of
'footer id="footer" layout:fragment="footerTemplate"'
By the way, the examples, listed on thymeleaf's website never worked, but the correct decision wasn't there.
Here is the <head> tag of content.html:
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<script type="text/javascript" src="codemirror.js"></script>
<link rel="stylesheet" href="codemirror.css">
<script type="text/javascript" src="matchbrackets.js"></script>
<script type="text/javascript" src="closebrackets.js"></script>
<script type="text/javascript" src="expression.js"></script>
<style>
.right {
text-align: right;
}
</style>
</head>
File is loaded via:
view.getEngine().load(getClass().getResource("content.html").toExternalForm());
HTML file loads just fine, but none of the files referenced with src or href (css/js). All linked files are in the same package as HTML file. So is the class that loads it.
Ok, just tried to compile it with old 1.8_45 JDK and it works as intended, so it seems like some major fault on Orracle's side.
Update:
Bug fixed in Java 8u72 !
Netbeans HTML checking doesn't like my thymeleaf namespace.
Here is my HTML Thymleaf file:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<object th:include="fragments/meta :: meta" th:remove="tag" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'/>
<link href="/../../../webjars/Semantic-UI/2.0.6/semantic.min.css" rel="stylesheet" th:href="#{/webjars/Semantic-UI/2.0.6/semantic.min.css}"/>
<link href="../../../css/core.css" rel="stylesheet" th:href="#{/css/core.css}" />
<link href="../../../css/product.css" rel="stylesheet" th:href="#{/css/product.css}" />
</head>
<body>
</body>
</html>
This is the error displayed in Netbeans:
How can I get Netbeans to play nicely with Thymeleaf?
Try to fix it in this way you may ignore spring security thing.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="utf-8"/>
<title>Sample</title>
<link th:href="#{/resources/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
<link th:href="#{/resources/css/bootstrap-theme.css}" rel="stylesheet" type="text/css"/>
</head>
I found out how to disable these errors when I was taking this spring security tutorial
Simply by adding this to html tag:
xmlns="http://www.w3.org/1999/xhtml"
what's even cooler, netbeans now tracks if you closed every tag with slash "/" in document.
I'm using Dojo 1.6.1 on JSP pages.
<html>
<%#include file="includes/head.jsp" %>
<body class="tundra">
<div
id="appLayout"
class="demoLayout"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design: 'headline'"
style="width: 100%; height: 100%">
<div
class="edgePanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'top'">
<%#include file="includes/headline.jsp" %>
</div>
<div
class="edgePanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'center'">
.........
contents of head.jsp
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="<%=request.getContextPath()%>/dojo.1.6.1/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/dojo.1.6.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/main.css">
<style type="text/css">
</style>
<script src="<%=request.getContextPath()%>/dojo.1.6.1/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true">
</script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
When deployed, I get javascript error.
Could not load class 'dijit/layout/ContentPane'
when inspected with firebug.
Seems that dijit.layout.ContentPane is not in the classpath. Try to add it or try to change the require for a define to see if fix.
Here is the example.