I have a springboot application which has an endpoint which would load a freemarker template(abc.ftlh). It looks like this
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;500&display=swap" rel="stylesheet">
<style type="text/css">
.topRight {
position:absolute;
top:0;
right:0;
}
.data-body {
font-family: 'Roboto', sans-serif;
background-color: #f7f7f7
}
.option, .span {
font-size: 14px;
}
.p {
font-weight: 300;
font-size: 16px;
color: #333333;
line-height: 1.22;
}
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
</style>
</head>
<body class="data-body">
<br /><br />
<div class="topRight">
</div>
<div>
${databody}
</div>
</body>
</html>
the variable databody is being set from the backend. It has content like
<h1>Something</h1>
<h2>foo bar</h2>
css is applied to elements which are present in the template for example data-body and topRight is applied. But css is not applied for the elements which are rendered from backend. For example <h1>, <h2> are not applied.
How can I get this working.
It's simply because in your css you have .h1 instead of just h1, etc. The .h2 selector matches <... class="h1">, not <h1> itself.
Also, in CSS issues it never matters if something was generated by FreeMarker or not, as the browser can't tell the difference.
.h1 means that you want to select all class="h1" elements.
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
You can select the <h1> directly and apply css to it via h1{...}
It would be easier if you place these css files under resouce/static folder, and reference in the HTML head.
There are couple of issues here.
The css for html tags should be named without the preceding dot.
For example .h1 should be h1
Most important thing here is to tell freemarker to not not escape the value. By default auto escaping is enabled.
If the string value to print deliberately contains markup, auto-escaping must be prevented like ${value?no_esc}.
So the solution here is ${databody} should be ${databody?no_esc}
More on this topic here https://freemarker.apache.org/docs/dgui_quickstart_template.html#dgui_quickstart_template_autoescaping
Related
Im a beginner in Visual Studio and my html file/code work fine but my css file doesn't work. My problem is not detected in the workspace.
I also try to do this, nothing happen :
<link href= "CSS\index.css" rel="stylesheet" type="text/css">
CSS code :
style
h1 {
background-color: blue;
}
I am also new but I think I can help. You have two options, that I am aware of.
The first and ideal option would be to reference to a separate style.css file to go along side your maim html page (ex: index.html & style.css).
(index.html)
<!DOCTYPE html>
<html>
<head>
<title>yourwebsite.com</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<img src="your.jpg" alt="Handsome Man" width="100"
height="100">
<h1><b>your name</b></h1>
<p>your tag line</p>
<a href="https://twitter.com/yourtwitter"</a>
</body>
</html>
(styles.css)
body{
background-color: #f4f4f4;
color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
/* Same as above */
/* font: normal 12px Arial, Helvetica, sans-serif; */
line-height: 1.6em;
}
h1{
color: #00ff00;
}
p{
color: rgb(0,0,255);
}
The second and worst option is to include your css within your main html file.
(Copied from https://ryanstutorials.net/css-tutorial/css-
including.php)
<!doctype html>
<html>
<head>
<title>Embedded CSS example</title>
<meta name="description" content="A page with embedded css">
<meta name="keywords" content="html css embedded">
<style>
h1 {
text-decoration: underline;
color: #4583c2;
}
p {
padding-left: 20px;
font-size: 18px;
}
</style>
</head>
<body>
...
</body>
</html>
Make sure the index.css file is inside the CSS folder, then add the below link tag.
<link rel="stylesheet" href="./CSS/index.css">
i'm using vs code
i tried :
-removing all other styles but one
-checking all semicolons and tags
-using another browser
none of these worked.
please reply if you have a plausible answer :) thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>
<a class = "one" href = "/index.html">MAIN</a>
</head>
<body>
<p id="p1">Websites by Froggy Sites!</p>
<p id="p2">Nelson Mandela - The Promotion</p>
<style>
html {
background-color: #0096FF;
}
#font-face {
font-family: neonclubmusic_bold;
src: url(NEON\ CLUB\ MUSIC_bold.otf);
}
#font-face {
font-family: neonclubmusic;
src: url(NEON\ CLUB\ MUSIC.otf);
}
a.one:link, a.one:visited, a.one:active {
font-family: "neonclubmusic_bold";
font-size: 20px;
color: black;
text-decoration: none;
}
a.one:hover {
color: black;
font-size: 25px;
text-decoration: underline brown 5px;
}
.p1 {
font-family: "neonclubmusic_bold";
font-size: 30px;
text-align: center;
}
.p2 {
font-family: "neonclubmuic";
font-size: 20px;
text-align: left;
}
</style>
</body>
</html>
Your are probably using your CSS without including it or in wrong place.
Try using in style tag in head section above your body or create a new file named for example index.css and connect this file to your code.
If you use external version. For example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
<title>My site</title>
</head>
<body>
Other HTML STUFF HERE
</body>
</html>
Or if you use style tag
<!DOCTYPE html>
<html lang="en">
<head>
<style>
all styling here
body {
margin: 0;
}
</style>
<title>My site</title>
</head>
<body>
All HTML HERE
</body>
</html>
You are trying to access a class name while using: .p1, however it looks like your html is set up with p1 as an id. To access IDs in css you will need to change the "." to a "#".
ex. #p1{ ... } instead of .p1{ ... }
As stated above first you should make sure to reference the elements
in the proper way, either if you need to do it by class (".") or by
Id ("#") in the CSS code.
I have give some standard order to your code within the HTML
structure for improving readability.
Also there are some typos and invalid spaces.
Check the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>
<style>
html {
background-color: #0096FF;
}
#font-face {
font-family: neonclubmusic_bold;
src: url(NEON/CLUB/MUSIC_bold.otf);
}
#font-face {
font-family: neonclubmusic;
src: url(NEON/CLUB/MUSIC.otf);
}
a.one:link, a.one:visited, a.one:active {
font-family: "neonclubmusic_bold";
font-size: 20px;
color: black;
text-decoration: none;
}
a.one:hover {
color: black;
font-size: 25px;
text-decoration: underline brown 5px;
}
.p1 {
font-family: "neonclubmusic_bold";
font-size: 30px;
text-align: center;
}
.p2 {
font-family: "neonclubmuic";
font-size: 20px;
text-align: left;
}
</style>
<title>Main</title>
</head>
<body>
<a class="one" href="index.html">MAIN</a>
<p class="p1">Websites by Froggy Sites!</p>
<p class="p2">Nelson Mandela - The Promotion</p>
</body>
</html>
I left the HTML and CSS in one single file as it is in your initial example.
I'm new to HTML and CSS. The following lines I wrote in the Atom text editor are not properly shown in the preview. The font is not changing from the default Times New Roman. Even after adding extra font-packages. However, I did not use any fancy kind of fonts. Is their something wrong with my code instead?
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Text</title>
</head>
<body>
<p> This is a paragraph. All of the text on this page has a font size of 16 pixels.
This paragraph, like most of the text on this page is black and uses Tahoma font.</p>
<ul>
<li id="point1">This list item uses the Verdana font and color orange.</li>
<li id="point2">This list item uses the Impact font and the color red.</li>
<li id="point3">This list item uses the Georgia font and the color pink.</li>
<li id="point4">This list item is black and uses the Tahoma font. It also contains a link to
<link href="http://www.spiced-academy.com"></link>
</ul>
<p>This is another paragraph. Each item in the list above has a top and bottom
margin of 10 pixels.</p>
</body>
</html>
I'm not sure that is the problem but try to add the attribute type on the link css stylesheet:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Well, in the code preview window I see it works (Chrome, Mac). Try to clear your browser cache or write font-family: Tahoma !Important;
Make sure that your CSS page is saved as stylesheet.css because this is what is referenced in your code.
Check that your HTML file and CSS file are saved in the same directory.
For testing, you could have the CSS in a <style> tag, before even trying to link to a stylesheet. You can place this in the <head> tag. Then tackle the external stylesheet once you can successfully see the styles here.
<head>
<style>
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
I have two headers, one with class="mainHeader", and another with class="subHeader". I'm trying to contain both of those in another class by using <div class="header"> beforehand (and a </div> after of course). However in my CSS file that I linked, when I try to do .header { /* styling */ }, no matter what I put in there nothing changes when I open the HTML file.
Here are my files:
<!DOCTYPE css>
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
As you can see when you run it, no styling made in the ".header" is used. I'm still pretty new to this so please understand if it's an easy fix!
You don't define a doctype for CSS files, remove <!DOCTYPE css>.
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
DOCTYPE declarations are for HTML based documents.So remove <!DOCTYPE css> from your css file.
Make sure file path for css file is correct.
Remove <!DOCTYPE css> from your css file. DOCTYPE declarations are for HTML based documents.
im just beginner at CSS, so i have a problem i wrote a simple code, IE shows correctly, but Firefox didint, how can i solve this problem? whats wrong with the code? Thank you. As i say, im beginner so sorry for stupid questions. :)
here is the code
h3 {
color: "blue";
font-size: "20px";
font-family: "verdana"
}
p {
color: "white";
background: "blue";
font-family: "helvetica";
text-indent: "1 cm"
}
<html>
<head>
<title>Pakopinių stilių (CSS) naudojimo pavyzdys</title>
<link rel="stylesheet" href="stiliai.css" type="text/css">
</head>
<body>
<h3>Trečiojo lygio antraštė</h3>
<p>Naujas pastraipų stilius.</p>
</body>
</html>
First is CSS I called it stiliai.css, secon is html called index.html
Remove the quotes wrapping your colors. Quotes are not required while specifying colors.
Change
h3 {color:"blue"; font-size:"20px"; font-family: "verdana"}
to
h3 {color:blue; font-size:"20px"; font-family: "verdana"}
Your issue is with your use of " within your css. These are not needed:
h3 {
color: blue;
font-size:20px;
font-family: verdana
}
p {
color: white;
background: blue;
font-family: helvetica;
text-indent: 10px; /*cm are not commonly used in css*/
}
<html>
<head>
<title>Pakopinių stilių (CSS) naudojimo pavyzdys</title>
<link rel="stylesheet" href="stiliai.css" type="text/css">
</head>
<body>
<h3>Trečiojo lygio antraštė</h3>
<p>Naujas pastraipų stilius.</p>
</body>
</html>
Your use of " would only be necessary when you're using the likes of html.
They are not used in css files.