Hi so I am using Spring boot with thymeleaf and I wanted to use a header that is located in my layout.html file to decorate all of my pages.
I added the dependencies
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
And in my layout.html I have this element
<header >
<div layout:fragment="header">
// My header code
</div>
</header>
And the element I'm trying to replace is in my home.html
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="layout">
And the element I'm trying to replace
<header>
<div layout:fragment="header">
</div>
</header>
What happens is when I load my home.html the page is empty and on inspection the body consists only of the header element with 970x0 size or smt. I have never used the layout dialect and I'm not sure if I have to make some configurations. Also I'm not sure if the home.html is also getting the style imports that are in the layout.html
I solved it like this:
common_head.html: Header to be imported in other files:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no" />
<title th:text="#{title.head}" />
<link rel="stylesheet" th:href="#{/css/main.css}" />
<script type="text/javascript" th:src="#{/js/main.js}"></script>
</head>
item-create.html Thymeleaf template, which includes previous head-tag:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="~{common_head :: head}"> />
<body>...
The full example can be found in my German blog here:
https://agile-coding.blogspot.com/2020/11/thymeleaf-2.html
Related
Building a Flask project for a simple login screen project I plan to expand on, but here I am stuck on what I would have guessed would have been simple.
Why is my html below not updating to be styled by my login.css?
Here is a snippet up until the link relation:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=devilce-width, intial-scale=1">
<link rel="stylesheet" type="text/css" href="/webapp/templates/login.css">
</head>
It is inside of the same folder, but to make it what I believe to be fool-proof I specifically ran it through the full folder directory.
I have the .scss, the .cssmap from the compiler, and the output login.css in the same folder as the .html as well.
I've downloaded SASS, ran a Live Sass Compiler through VSCode, and now it's compiled to a .css
"What do"?
Not sure exactly the specifics, but from my understanding using {{ url_for--}} worked.
(If someone can follow up with an explanation that would be beautiful.)
Noticed when scanning examples from PythonHow
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, intial-scale=1">
<title>Flask App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}">
</head>
I have a simple HTML page with some <sub> elements in it. For some reason, Google Translate offers to translate the subscripts from Arabic to English (despite being English to begin with), only moving them down a little when translated. The HTML page language is set to en-US. Is this just my computer being weird, or is there a code-related reason?
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--<meta name="google" content="notranslate"> (this successfully gets rid of the translate popup, commented out for testing purposes)-->
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<title>test</title>
<link rel="icon" href="favicon.svg" type="image/svg"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="functions.js"></script>
<script src="main.js" defer></script>
</head>
<body style="min-width: 0">
<div id="test"></div>
</body>
</html>
Added to #test by JS:
<div class="letter">A<sub>1</sub></div>
Website: https://test.edgeloop.repl.co
Screenshot: screenshot
Are you sure that this is the correct code? You seem to have a <html...>-tag inside your <head>-tag. Remove the duplicate html-tag inside your head, and instead add the lang="en"-attribute to your outer-most html-tag.
Your code should thus look as follows:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>test</title>
....
</head>
<body style="min-width: 0">
<div id="test"></div>
</body>
</html>
If this does not immediately solve your problem, try clearing the google chrome cache as follows:
Press F12 to open the dev tools menu
Right-click your refreh-button
Select the option empty cache and hard refresh:
If your webpage uses HTML and XML interchangably, you might need to add the following to your opening <html>-tag (see this link):
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
...
</html>
If your Google Translate does still pop up, you have the following options:
add translate="no" to your root html-tag
add the class notranslate to your root html-tag
add <meta name="google" content="notranslate"> to your head-tag
Your code should look as follows:
<html lang="en" translate="no" class="notranslate">
<head>
<meta name="google" content="notranslate"/>
....
</head>
....
</html>
#Lawrence Cherone's comment about adding more text seems to fix the problem, as does #unknown6656's suggestion of adding <meta name="google" content="notranslate">. I still don't know why subscripts are considered Arabic text, but adding English text seems to fix the problem. Thanks for all the answers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
</head>
<body>
<div id="wb_Text1" style="position:absolute;left:458px;top:19px;width:156px;height:16px;z-index:1;">
<span style="color:#000000;font-family:Arial;font-size:13px;">This is My First Post</span></div>
<div id="wb_Text2" style="position:absolute;left:338px;top:60px;width:509px;height:32px;z-index:2;">
<span style="color:#000000;font-family:Arial;font-size:13px;">If i am looking at it<br>that means i
am able to create the theme correctly using webbuilder</span></div>
</body>
</html>
it runs perfectly
but fails to run on Blogger
What should i do?
Yes your code is perfect but, in blogger theme design with html you need to add "b:skin and b:section" inside that code.
And this is the sample code for blogger from your code :
Sorry if i wrong but thats all i know :)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<b:skin>
<!-- Your CSS Code Here -->
</b:skin>
</head>
<body>
<b:section id='Unique-Id'>
<!-- Your section content -->
</b:section>
I was trying to add css in my blogger's blog but for some reason blogger theme designer is not working so i decided to add css directly in the code using tags, but I can't find the tag in the html file. It is my first time when I am unable to understand where is. Anyone know where tag is in this file to add css?
I did not Code it completely! And the person who did is no longer in contact with me!
Click Here to see Code
To use an external style sheet, add a link to it in the section of the HTML page:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Search for this ]]></b:skin> and place your CSS code before it without using <style>
Or if you want to use a style tag, place it after </b:skin>
The <style> element is used to add CSS style rules to an HTML document. The element is expected to appear in the document <head>, but will also render acceptably when used in the <body> of the document.
Your program should look like this
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
you should add the head tag yourself to the top of the document if you do not have one already. for the href change that to the name of your css file.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang='en'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1' name='viewport'/>
<!--[if ie]><meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/> <![endif]-->
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='https://justpaste.it/redirect/3qnyk/http://www.blogger.com/openid-server.g' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
</head>
my html file structure:
main
-resources
-static
-css
-email.css
-templates
-base.html
-registration.html
base.html is a common fragment holder including links, header, footer.
<head th:fragment="common_head(title)">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../static/css/email.css" th:href="#{css/email.css}" type="text/css"/>
<title th:replace="${title}">Email</title>
</head>
In my registration.html, I tried to re-use the setting in base.html
...
<head th:replace="base :: common_head(~{::title})">
<title>Welcome Email</title>
</head>
...
The email sending function is working fine, I can receive a non-css email message in my mailbox. The css link in base.html is correct, I can see the css style if I open directly base.html in the browser.
So why css does not work in registration.html?
Update:
I added an additional style placeholder in base.html.
<head th:fragment="common_head(title, styles)">
...
<th:block th:replace="${styles}"/>
</head>
I updated registration.html with additional style block.
<head th:replace="base :: common_head(~{::title},~{::style})">
...
<style type="text/css" media="screen">
...
</style>
</head>
But the style in the registration seems not working. What's the problem here?