last day (15 days later) » 

2:01 PM
0
Q: Using custom css for login page

HosseinI am using spring boot for making a website. I'd like to use my own login page and style it using CSS. However, the CSS does not get linked to the HTML page (powered by thymleaf) property. Base on the defined CSS, I expect to get a red background colour for the login page, but this does not hap...

 
Maybe because your css file is called style.css but you include login.css in your login.html?
 
Thank you for pointing that out. It was my typo in the question and I edited that. The erroneous behaviour was not because of that.
 
Did you include the line spring.resources.add-mappings=true in your application.properties file?
 
Yes, I did include that.
 
Can you show us the generated html file (e.g. from your browser console) and maybe a screenshot of the file structure?
 
2:01 PM
This is the git repo of this question (github.com/SMHosseinM/thymleaf-css-matching). You can see the code if you want here as well.
Is that good enough or you want me to post the image as well?
 
I think the generated html file that your browser displays would be helpful.
 
How can I post an image here?
 
Just post the html code
Add it to your question
 
This is the generated html code after login:
body{
background-color: red;
}
It is basically a CSS code rather than being html
 
No, when you test your site, what is the source code of the html page being displayed in your browser?
You can access it by right clicking on the page
 
2:08 PM
Give me one minute please.
This the html code when I run the program and see the login page: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Please Login</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" media="all" href="/css/login.css"/>
</head>
<body>
<div>
<div class="container">
<form name="f" action="/login" method="post"><input type="hidden" name="_csrf" value="54264146-9077-40e0-b
When I insert the username and password and clink enter, the html page I get is:
body{
background-color: red;
}
 
Okay, can you also open the developer tools of your browser and show me the log output and source file structure?
 
The reason is that it redirects me to "localhost:8443/css/login.css" rather than "//localhost:8443/"
Is it possible to tell me how I can get the log out and source file structure from the developer tools ,please?
 
Have you opened the developer tools?
Which browser are you using?
 
I am using firefox developer edition
 
press F12 and search for the tab named Console
and then upload a screenshot here using the button on the right
 
2:25 PM
Using which button? There is no button on the right hand side
I will upload the image in the question page
 
Okay
On my screen there is a button right next to "send" that says "upload..."
 
I do not know why I don't have that button. Anyway, you should be able to see the images on the question page
 
Yes, can you also post the content of the "Debugger" tab with all source folders expanded?
 
Sure
You should see the debugger images know
now*
 
2:50 PM
Yeah but you have to expand the source folders
resource://gre is important
 
source folder contains js files.
How did you see the gre one?
Is there anything you are particularly interested to see under the source file?
Did you manage to find the cause of error?
 
3:06 PM
No, sorry. Something's really wrong but I don't know that framework so I can't help you any further.
 
thank you very much for your time
 

last day (15 days later) »