I'm having a problem trying to access my static CSS resources from lower directories. If I am in the main directory it detects everything but if I go to other lower directories, it adds the path from that folder and does not detect them.
Error
(In that path "server" is a directory that should not appear, since css is in the main directory)
<link rel="stylesheet" href="/css/bootstrap.min.css">
<!-- Bootstrap CSS
============================================ -->
<link rel="stylesheet" href="/css/font-awesome.min.css">
I tried from putting ../, ./ searching the internet but I didn't find anything.
I am using Apache FreeMarker
Use .. to indicate the parent directory:
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
This will help you.
Related
I m trying to create a sidebar where I have a style.css for customize it. When I inspect my page, it seems it never loads and get 404 not found.
<head>
<h1>sidebar</h1>
<title>Responsive Sidebar Menu</title>
<link rel="stylesheet" type="text/css" href="style.css"></head>
My project is structured like in the following picture:
I can't figure out how to write the path so it can load properly.
Move your template folder right under resources:
src/main/resource/static/css (for CSS files);
src/main/resource/templates (for HTML templates).
Then correct the link tag as follows:
<link href="../static/css/style.css" th:href="#{/css/style.css}" rel="stylesheet" />
I want to connect my .html file (containing Bootstrap's elements) with Bootstrap's .css file. I saw a lot of variants like:
<link href="resources/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet">
...but none of them was correct. In my case, I mean.
How it looks when I include in my code some of these line
How it looks when I include following line instead of these above:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
The conclusion are such that the app can see .css from the Internet but there is some problem with local file.
Here I sent .html file code:
http://wklej.org/id/3272762
If someone want to check folder structure, there is screenshot of my project in IntelliJ:
http://s6.ifotos.pl/img/idescreen_qrwrweq.jpg
I read on Stack there could be some problem with configuration but their solutions didn't seem appropriate considering fact that I use Spring Boot, not pure Spring without auto-config. Maybe there should be something added in application.properties? I saw also tips to put all .htmls with .css in one folder but... well, I don't think it is a good way.
Does someone know what I do wrong and what can I do to correct it to work properly?
EDIT.
If you are looking for solution, please read comments directly under first post
Try this above the other links:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
Hope this works
As I see in file structure templates too is under the resources so the path should be href="../../static/css/bootstrap.min.css"
After receiving inputs of the Source HTML File and Bootstrap CSS file.
From the HTML file, ../ this will make it go one folder back which is resources, then go two folders forward static/css/ then there the bootstrap.min.css will be found!
HTML:
Propagander(main folder)/src/main/resources/templates
CSS:
Propagander/src/main/resources/static/css
The correct link should be.
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
Please let me know if this fixes your issue!
I saw an error in file path you added here:
<link href="resources/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
instead write:
href="../../resources/static/css/bootstrap.min.css"
EDIT:
href="../../static/css/bootstrap.min.css"
I have a project with such structure. CSS file is included like this
<link rel="stylesheet" type="text/css" href="../static/css/style.css"/>
When I open html file on it's own from my computer, css loads. But when i load it from GET request on localhost, css file is not found.
It is indeed a path mistake.
When you are using two dots before slash sign - browser searches for the file in two folders upper from the current place of index.html
The solution depends on where your index file is located, I think that when you put all the thing to localhost your index.html is in the root folder, so there is no need in dots before the slash sign, simply make your path like this:
<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
Or without "/static/", if you have also moved "css" folder to the root
If you are still calling index from the templates folder - try using this code
<link rel="stylesheet" type="text/css" href="./static/css/style.css"/>
Your path is incorrect. From the image the correct path seems to be
<link rel="stylesheet" type="text/css" href="../static.css/style.css"/>
I want to keep all CSS files in one folder and I want to access them. Below is the path of my CSS folder
css/sampl.css. Where css is the folder.
This is my code:
<link href="/CSS/sampl.css" rel="stylesheet" type="text/css" />
I can't access the sampl.css file. Could somebody help me out?
You are missing a context path in the URL. To prepend a context path you can use JSP EL
<link href="${pageContext.request.contextPath}/CSS/sampl.css" rel="stylesheet" type="text/css" />
The CSS folder is in the web application root.
So, we are using Jawr in our Spring project and all is working well, except that when I try to include a single css file like this:
<jwr:style src="/assets/css/style2.css" />
It includes all the files in the css directory
<link rel="stylesheet" type="text/css" media="screen" href="/assets/css/non-responsive.css?d=35303629" />
<script type="text/javascript">/* The resource '/assets/css/non-responsive.css' is already included in the page. */</script>
<link rel="stylesheet" type="text/css" media="screen" href="/assets/css/style1.css?d=48250928" />
<link rel="stylesheet" type="text/css" media="screen" href="/assets/css/style2.css?d=444574087" />
<link rel="stylesheet" type="text/css" media="screen" href="/assets/css/style3.css?d=68336060" />
<script type="text/javascript">/* The resource '/assets/css/style3.css' is already included in the page. */</script>
<script type="text/javascript">/* Finished adding members resolved by /assets/css/style2.css */</script>
<script type="text/javascript">/* Start adding members resolved by '/assets/js/summary.js'. Bundle id is: '/assets/js/summary.js' */</script>
<script type="text/javascript" src="/assets/js/summary.js?d=82086305" ></script>
<script type="text/javascript">/* Finished adding members resolved by /assets/js/summary.js */</script>
This works well for single JS file as shown in the last two lines, but not for the CSS file for some reason.
Am I missing something, or should I just be including the file the traditional way?
Because everything inside assets/css/ is considered a variant skin by Jawr, so it loads all files.
You'll need to have only that style in the folder in order to load the single file.
For more information, see https://jawr.java.net/tutorials/howToUseJawrCssSkin.html , but the following part is an excerpt for your problem:
To define CSS skins, Jawr uses a directory hierarchy convention.
The user needs to define the default CSS skin root directory. All the directory defined at the same level will be considered as a skin variant.
To define the default skin root directory, the user must set the property jawr.css.skin.default.root.dirs.
This property defines the list of default CSS root directories. So with Jawr, you can handle mutliple CSS skin root directories.
For instance, if you define the default skin root directory as : /css/skins/defaultSkin.
And you have a directory structure like this :
If you set the Jawr configuration as:
jawr.css.skin.default.root.dirs=/css/skins/defaultSkin
Jawr will treat blueSkin and greenSkin as variants of defaultSkin.