Good morning, good evening, good night,
A noob question here, i'm using Thymeleaf as a template engine, and linking Bootstrap CSS sheet doesn't seem to work, here is my strucuture
resources
-static
--css
---bootstrap.min.css
-templates
--view.html
and line of code
< link rel="stylsheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="#{../css/bootstrap.min.css}"/>
Edited: I do get the plaintext .css file when i open the link in the href,
And the .table-striped attribute i'm using in my table class does exist in the CSS file.
<table class="table table-striped">
Thank you for your feedback
Here's a fun way to check if your paths are right! I'll use Chrome as my example, but maybe your browser of choice does it slightly differently.
Open the developer tools
Find your link
Right click on the URL in the href and click "Open in new tab"
You'll either see a plaintext .css file, or you'll get a 404. If it's a 404, your path is wrong!
Don't forget to add scripts to the head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Got it finally .. it was the URLs, this is what worked for me,
/static is handled by default i guess so removed it from the url and its "twerkin".
Structure
-static
--css
---bootstrap.min.css
-templates
--view.html
CSS Link
th:href="#{/css/bootstrap.min.css}
Related
I am new to Spring and I am trying to make a beautiful Web Application, and so far I set up everything, and if I run my page on the browser it shows as it is supposed. But if I run it with tomcat on port 8080 (I am using Intelijj) it doesn't load css and js files not even pictures.
I have literally searched this problem and open all the StackOverflow similar questions, I tried to write a configuration file, but it doesn't do anything, and I am uncertain about this approach because I have seen examples of people that did not write any configuration, but still they managed to make all their static resources load, and so on. Is it some secret application properties that need to write? Or there is a config code that has to write?
My resources folder looks like this:
-resources
-static
-CSS
-things.css
-JS
-datepicker.js
-Images
-many pictures
-templates
-Home.html and other pages
And the code that I used to refer to static-CSS-things.css is like this:
link href="../static/CSS/things.css" th:href="#{/CSS/things.css}" rel="stylesheet" media="all" type="text/css"
I thought this would make my css file to load, but it doesn't. Same for the js and the pictures. Thank you!
Ensure your css and js files are in the following structure:
src/main/resources/static/css/things.css
src/main/resources/static/js/things.js
Ensure you are calling your static resources from pages that are under the spring boot template folder, which is in src/main/resources/templates
Always refer to your resources using the thymeleaf tag, because this way no matter the port you are running your application, it will always load properly.
src/main/resources/templates/example.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- CSS -->
<link th:href="#{/css/things.css}" rel="stylesheet"></link>
<!-- JS -->
<script th:src="#{/js/things.js}" type="text/javascript"></script>
</head>
<body>
</body>
</html>
If still not working, try to use the inspect from Google Chrome, go to Network tab and check what error is returning from your css and js files, then comment here.
Assuming you have css and js folder under static folder then use it like this -
<link href="css/custom.css" rel="stylesheet">
<script src="js/custom.js"></script>
you might wanna take a look at these too -
https://www.springboottutorial.com/spring-boot-with-static-content-css-and-javascript-js
https://www.baeldung.com/spring-mvc-static-resources
Worth noting, make sure you have thymeleaf dependency(ies) and tags appropriately.
I just need some clarification about linking a css file. I am looking at a html widget that has been created by someone and they seem to have a html with a query string to get the required css..
<link href="https://cdnres.willyweather.com.au/widget/cssView.1-12-8.html?id=36723" rel="stylesheet">
And this works if you click on this link
http://cdnres.willyweather.com.au/widget/loadView.html?id=36723
But when i downloaded these files onto my own web server and tried it, it didn't work
http://www.mccdepot.com.au/Test1/loadView.html
but when I update the link styles to a css and updated the file name it worked.
http://www.mccdepot.com.au/Test2/loadView.html
For the query string html do I need to enable something on the server side?
Thanks in advance
i copied that link css add it to your code its coming same as given link i have added the screen shot check it.
try this->
<link rel="stylesheet" type="text/css" href="path of the css file"/>
This is how normally we include a css file in our html page. If still getting error, please check the file path properly.
your linked css file is minified, check it once. When you minify some
css files actually it replaces some variables. Try again to download
again and link it. And js files also not included properly, when it
check it in viewsource file was not found there
What is the quickest/smartest way to include a JS file into code ?
I tried to drag and drop a JS file to source code, but it opens a new tab with the JS file.
(Same question for CSS link including)
This functionality is available since version 2016.2, it's just not working in your case as you work in a PHP file.
Open a HTML file and drag'n'drop a JS or CSS file to see it working.
PhpStorm will add in case of a JS file automatically:
<script src="main.js"></script>
In case of a CSS file:
<link rel="stylesheet" href="main.css">
For the case of an empty document it will just be inserted in the current line.
If you have an <html> tag it will be included within and before a <body> tag and if available even directly in the <head> tag - no matter where you leave your mouse button.
To your actual case: In order to make it work you could theoretically handle *.php files like *.html files. You can do that in Settings -> Editor -> File Types. But of course that's not useful as you will loose all the PHP features like auto-completion for the language etc. I guess you would need to write a feature request so that they maybe implement this for PHP files too.
BTW: drag'n'drop of images to a wished position in a <body> tag of a html document does also work.
EDIT: Here the link to the JetBrains blog where they explain this feature:
https://blog.jetbrains.com/webstorm/2016/07/webstorm-2016-2-drag-files-into-html-and-quotes-style/
Thanks to LazyOne for sharing!
I am building my first website and I'm trying to attach an external css file...
Both my index.html and test.css are in the exact same folder/directory, but for some reason my test.css file isn't being linked...
Question: Does anyone know why my test.css isn't being linked?
//HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="test.css">
<title>Page Title</title>
</head>
<body>
<h1>header of type 1</h1>
<p>standard paragraph</p>
<hr>
<p>HTML stands for Hyper Text Markup Language</p>
</body>
</html>
No need to worry, there's nothing wrong with your css code.
You just have to make sure that the 'href' part of your stylesheet link contains the name of the file your want to include, which in your case would be:
href="CSS Test.css"
Windows will hide the file extensions by default though, so make sure your file isn't actually called "CSS Test.css.css" after you added the extension a second time. To show all file extensions, do the following:
Open Folder Options by clicking the Start button Picture of the Start button, clicking Control Panel, clicking Appearance and Personalization, and then clicking Folder Options.
Click the View tab, and then, under Advanced settings, clear the Hide extensions for known file types check box, and then click OK.
Ok, thank you for all the quick responses, I have cleaned up my style thanks to both replies and I have kind of found the solution. I think "user5375312" was on the right track with the .css.css idea, that by adding .css I was somehow adding it twice. I don't think that's "exactly" what happened, but by creating a new css file, when I made it .css I also unchecked the "hide extension" box, which revealed a .txt, making my final file "Test.css.txt"
I removed the .txt keeping only the .css, saved the file to the same location, updated my page and the css file loaded in fine.
I'm still not sure what exactly went wrong or where, but I know it was either when I created the file the .txt was somehow still present when with previous files it was overridden or removed (something unique to creating css files maybe) or it was after I made the file, that some other setting caused it, but unchecking the hide extension box and making sure it saved correctly solved the problem, and I hope if anyone else encounters the issue that this helps.
Thanks again for the responses, it probably would have been days before I thought figured this out on my own, it was the mention of the .css.css possibility that drew that checkbox to my attention on my4th attempt at making a css file :D
Im using livereload and using Espresso as my editor, ive linked livereload to my html file, however when i edit my less file it wont load of the functions or styles, but the livereload itself works. When i also try to edit anything on a less file it wont be editable like a css file. everything is in plain text, so i know something is not right in that end.
<link rel="stylesheet/less" href="styles.less">
<script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js"></script>
Everytime i put stylesheet/less the file just works with html, so its with no style.
You are linking to http://lesscss.googlecode.com/files/less-1.1.3.min.js
But perhaps you should check to which recourses you are linking before doing so ;)
It's a page that doesn't exist (and if it would exist, it would be very outdated.)
Instead; link to
http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js and get more info here http://lesscss.org
Have you tried changing stylesheet/less to stylesheet/css?
<link rel="stylesheet/css" href="styles.less">
<script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js"></script>