Thymeleaf functionality on Meta tag - html

I'm not sure if this could be a known scenario. But I'm confused since I couldn't find any discussions on this.
Raising my clarification. Does thymeleaf based html page allow meta tags within its head?
I've this code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Data Services Platform Support</title>
<div th:replace="fragments/header :: header-css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}"
href="../../css/main.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
which displays the page I'm looking for.
But when I tried adding the meta tag to upgrade my page with few functionalities(which require a meta tag), Whitelabel Error Page is all what I get.
My modified code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Data Services Platform Support</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div th:replace="fragments/header :: header-css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}"
href="../../css/main.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
Is there something I need to consider? Please help.


Yes, Thymeleaf supports all tags. If you are using an old version of thymeleaf, it may be likely that it needs to be valid xhtml. So your meta tags should looks like this:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
(with the ending slash). The server log error message will contain the details of the error.

Related

CSS not linking in html

I am trying to change background color of a web page.
To do so I am linking style.css externally to index.html using href:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<!-- <link rel="stylesheet" href="css/style.css" media=”screen”/> -->
</head>
<body>
<!-- body of...body -->
</body>
</html>
My CSS is simply:
body
{
background-color: aqua;
}
My project structure is:
Note index.html resides by itself on the project folder (freebookz), whereas style.css resides in a dedicated folder (css). Hence the reason for
href="css/style.css"
The problem is that the CSS is not linking.
I'm using Vscode and I've also tried replicating this project in Notepad++ and CSS still does not work.
I've tried force-reloading the page with SHIFT+CTRL+R to no avail.
Can someone point me to the error?
I've exhausted all attempts to make this work.

In your tag check your media attribute, instead of double quotation mark, you have used this Unicode character “”” (U+201D) .
Here is my code, paste it in your code, it would work.
<link rel="stylesheet" href="css/style.css" media="screen"/>
Let me know whether it is working or not ?

That's right, have you tried uncommenting it?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media=”screen”/>
</head>
<body>
<!-- body of...body -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello this is paragraph</p>
</body>
</html>

How do I add line breaks when using the Thymeleaf template layout?

How do I add line breaks when using the Thymeleaf template layout?
Here is my html base code.
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">Layout title</title>
<!-- Common -->
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/
awesomeapp.css}">
<link rel="shortcut icon" th:href="#{/images/favicon.ico}">
<script type="text/javascript" th:src="#{/sh/scripts/codebase.js}"></
script>
<!-- Add -->
<th:block th:replace="${links}" />
</head>
And this is the html main code.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
<title>Main title</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui.css}">
</head>
<body>
main content
</body>
</html>
Here is the result rendered by <th:block th:replace="${links}" />.
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"><link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui .css}">
But what I want is:
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui.css}">
Making the line break like this is what I want.
How can I solve this problem?

My Page.ss wont load css and script SilverStripe v4.2.1

I have WAMP as my local server. I followed instructions carefully and i cant get my css and script loaded on my Page.ss. I flushed the cache and refresh the page and update the hrefs but none of them seem to have worked.
Page.ss
<html>
<head>
<title></title>
<meta charset = "UTF-8">
<meta name="description" content= "">
<meta name="author" content= "Lisandro">
<meta name="keywords" content= "">
<meta name="viewport" content="width=device-width" initial-scale="1">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="themes/u-mart/css/slick.css">
<link rel="stylesheet" type="text/css" href="themes/u-mart/css/slick-
theme.css">
<link rel="stylesheet" type="text/css" href="themes/u-mart/css/style.css">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
"TONS OF HTML CODES"
</body>
</html>

Found the answer. All you have to do is add these lines in your .SS file.
<% require css("<my-module-dir>/css/some_file.css") %>
<% require themedCSS("some_themed_file") %>
<% require javascript("<my-module-dir>/javascript/some_file.js") %>
These were not mentioned on the lessons in their website neither on the videos. You will have to dig on your own.

My stylesheet isn't linking to my HTML

Really new to HTML & CSS but have created sites in the past and linked the CSS to the HTML quite easily. I can't understand where I'm going wrong (although I am sure it's massively obvious!) Any help would be great, thank you in advance!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Katgrog</title>
<meta name="description" content="My first try at my own website">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>

<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
Copy and paste it in your html, it will work. It seems you are forgetted to add slash(/) at the end before >.

you need to specify the type, so do something along these lines: (The type is not required)
<link rel="stylesheet" type="text/css" href="theme.css">

Internet explorer9 is opening my website in quirks mode automatically? How to fix it?

Here I am using html 5 doctype but IE9 rendering it into quirks mode automatically. I used a meta tag to fix it but it is not working.
Here is the my head section code and URl please fix it.
URL: http://www.dual-amps.com/SeeHearDemo3/hukf7vh4i/default.aspx
if full code is required please let me know..
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Dual Amplifiers</title>
<link rel="stylesheet" href="https://revenewonline.net/web/dual/dual_amplifier/LP/css/style1.css" />
<script type="text/javascript" src="https://revenewonline.net/web/dual/dual_amplifier/LP/js/jquery.js"></script>
<script type="text/javascript" src="https://revenewonline.net/web/dual/dual_amplifier/LP/js/tabcontent.js"></script>
<link rel="stylesheet" href="https://revenewonline.net/web/dual/dual_amplifier/LP/css/jquery.fancybox-1.3.4.css" />
<script src="https://revenewonline.net/web/dual/dual_amplifier/LP/js/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="https://revenewonline.net/web/dual/dual_amplifier/LP/js/common1.js"></script>
<link href="https://revenewonline.net/web/dual/dual_amplifier/LP/images/favicon.ico" rel="Shortcut Icon" />
<meta name="Keywords" content="Powerful Amps for Powerful Sound" />
<meta name="Description" content="Powerful Amps for Powerful Sound" />
</head>

Use below line in <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >