Thymleaf Spring MVC Application Not able to include .css in HTML - html

I am new to Thymleaf. The following is my folder structure. Here I am not able to include my css file into ".html" file.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Hello Spring MVC</title>
<link rel="stylesheet" media="all" href="../resources/css/bootstrap.min.css" th:href="#{../resources/css/bootstrap.min.css}" />
<link rel="stylesheet" media="all" href="../resources/css/style.css" th:href="#{../resources/css/style.css}" />
<style>
body {
background-color: lightblue;
}
</style>
</head>
Thanks.

The code is working. It is not including CSS because of ""(double-quotes) are not in compatible.(Copied code from a Blog).
Thanks.

Related

Prelaod fetches multiple times

In the example below im calling the preload tag mechanism to fetch some resources ahead of time. Doing so, preload fetched the css resource multiple times? Why is this happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="preload" onload="console.log('script')" as="script" href='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'>
<link rel="preload" onload="this.rel = 'stylesheet'; console.log('css')" as="style" href='https://s3-eu-west-1.amazonaws.com/welcome.b2b.test/form/bundle.css'>
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
</head>
<body>
<script>
window.onload = function() {
console.log("window");
};
</script>
</body>
</html>

Utility to include css and js

I have a repository of some web files I'm building. There are a few stylesheets that I maintain separately so they're included with <link> tags. To deploy the HTML I need to replace the <link> tags with <style> tags containing the content of the file. Sort of like using #include <style.css>
Is there a good Linux utility that I can use in a Makefile? Do any of the HTML preprocessors do this sort of thing? (This is different from CSS inlining.)
To be more specific:
I'm writing a custom brew sheet for BeerSmith - which is just an HTML page.
I'm using a couple of stylesheets for a grid layout, print layout, cleanup some unwanted auto-generated HTML, etc.
I would rather maintain each sheet separately instead of stuffing it all into one page.
BeerSmith does not include the separate CSS when exporting recipes, so I need to build in in to the final brew sheet.
I have a deploy script to copy the sheets into my .beersmith3 directory which I'd like to use to assemble the sheet.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith-cleanup.css" />
etc ....
this is very specific to your case
sed -e 's/<link\(.*\)>/<style\1>/' -e 's/<\/link\(.*\)>/<\/style\1>/' <filename>
here is sample output
Note I have added two line to handle <link> and </link> cases
cat x
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith-cleanup.css" />
<link>
</link>
output is
sed -e 's/<link\(.*\)>/<style\1>/' -e 's/<\/link\(.*\)>/<\/style\1>/' x
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style rel="stylesheet" href="base.css" />
<style rel="stylesheet" href="grid.css" />
<style rel="stylesheet" href="beersmith-cleanup.css" />
<style>
</style>
I should have known there was a perl utility.... The Template Toolkit solves this problem handily.
HTML
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style>
[% INCLUDE base.css %]
[% INCLUDE grid.css %]
[% INCLUDE beersmith_cleanup.css %]
</style>
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith_cleanup.css" />
</head>
Command line
0 fatty:0.0 .beersmith3/Reports % tpage test.html > llama.html
Output
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style>
#media screen {
html {
font-size: 1em;
}
}
....

'title' tag on the header is missing in TYPO3 template

I set up a website using TYPO3 v9.5.9 and I can't find the <title> tag on the HTML source.
How can I insert the current page <title> automatically into the header?
Here is how my header is currently displayed:
<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="TYPO3 CMS" />
<link rel="stylesheet" type="text/css" href="typo3conf/ext/frontend_editing/Resources/Public/Css/frontend_editing.css?1562352305" media="all" />
<link rel="stylesheet" type="text/css" href="typo3/sysext/backend/Resources/Public/Css/backend.css?1566293615" media="all" />
This solution solved my problem. It was necessary to remove the line :
config.noPageTitle = 2
Thanks to #Riccardo De Contardi for this solution.

Polish specific characters in ejs

I have set up a node js based server. I need to display specific polish characters in one of my pages. I have tried to add few lines I found in internet but there was no success, I'm still getting "?" instead of getting polish character. For views I use ejs.
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta charset = "UTF-8">
<meta http-equiv="refresh" content="10" >
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id = "NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
My actual result is "Niepubliczny Zak?ad medycyny rodzinnej" instead of "Niepubliczny Zakład medycyny rodzinnej". (you can find it in div).
You could try this:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id="NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
For me, this code works OK :
http://next.plnkr.co/edit/DKvMsvAwoxMPu36J?open=lib%2Fscript.js&preview

Why won't my viewport tag properly use device width on most mobile devices?

I am using following meta tag.
<!DOCTYPE html>
<html class="no-js" data-placeholder-focus="false">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0" />
<meta name="mobileoptimized" content="0" />
<title>index</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/custom.css">
</head>
when I open website from mobile, it is not responsive at all. I have not changed my css code.
Please, help me! Thank you!