I have created a simple Dynamic Web Project in Eclipse Mars, using Spring. My JSP is referring to a CSS file but css file is not getting pickup.
Eclipse Project Folder Structure:
enter image description here
Here is how, I referring it in my JSP:
My project structure is same as yours and I refer css file via:
href="css/anotherStylesheet.css"
Use this to add the css file
<link href="folder/styleFile.css" rel="stylesheet" type="text/css" />
It may also work when you drag and drop the CSS file directly to your page.
Configure the spring.xml and add the css folder in the configuration.Also check the eclipse deployment assembly (include the your webcontent floder)
Related
I am working on ASP.NET core 3.1. I want to do a simple application. I have a very basic problem but I cannot find a good way to solve it.
I have the menu of the application in a Shared view _Layout.cshtml. In this view i am loading .js and .css libs with:
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
Everything is working fine, the menu is correctly displayed, and I can display my Index.cshtml with the #RenderBody().
The problem is that when I want to go to another page using:
<a asp-area="" asp-controller="Home" asp-action="Privacy" aria-expanded="false"><span>Privacy</span></a>
or
<span>Privacy</span>
the page will be loaded trying to fetch the libs from :
<script src="Home/assets/libs/jquery/dist/jquery.min.js"></script>
And it won't find them.
I would like to know what is the best practice to avoid this issue.
Thank you for your help.
In asp .net core static files should be placed inside wwwroot folder. Thats why put static files inside wwwroot folder and give reference to _Layout.cshtml like this,
<script src="~/JavaScript/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/CSS/styles.css"/>
My web application is inside of a folder called application and inside my index.html I am providing the project path to the css file, but it gives me a 404 not found. Any ideas?
<link rel="stylesheet" type="text/css" href="application/css/style.css">
css folder and file style.css both exist and the css folder is located inside of application. This happens to all my files.
Simple as title says, how do I include a css file that is found two parent folders up from the actual web application itself?
I have tried adding the file as a link to the web project and then referencing it like that and it dose not work
<link rel="stylesheet" href="../../mystyle.css" /> would literally move up two folders on your server. You may be better off with using the full path: <linke rel="stylesheet" href="/folder1/folder2/mystyle.css" /> - which all assumes that the path you need to get to is accessible to the web server.
Since the page comes from the server I would read the physical file and stuff that onto the page as part of the server script such as:
<style>
<?= css_file_content ?>
</style>
If in a parent folder, it may be outside the hosted path making it inaccessible to the client. But it is not inaccessible to the server-side script.
Visit: http://www.w3schools.com/css/css_howto.asp
You can add inline css if external doesn't work
i'm working on a bootstrap template locally on my dev server.. the template loads some resources via CDN..
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!--font-awesome-->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
Problem is this slows me down because everytime I hit refresh to check the changes on my page (localhost) the darn thing has to load the resources online again and again..
So i tried to open the resources via the link and save em locally. but this breaks because i guess there are more things to it than just the CSS code.
Is there an easy way to "localize" these things?
Thanks guys
This are the steps I followed to use CDN CSS resource locally:
Download and extract the font pack from here
Copy the ionicons.css to your project
Copy the fonts folder to your project
Ensure the font urls within ionicons.css properly reference the fonts path within your project.
Include a reference to the ionicons.css file from every webpage you need to use it.
In my case I include this in main.html
<link href="css/ionicons.css" rel="stylesheet" type="text/css" />
then simply add the icon and icon's classname to an HTML element.
<i class="icon ion-home"></i>
and folders are in this way:
- project_name
* css --> ionicons.css
* fonts --> ionicons.eot, ionicons.svg, ionicons.ttf, ionicons.woff
To preface this answer, I'm not sure that this solution is considered 'easy' but it will get you the ability to host locally vs. being dependent on the CDNs. The easy solution is using the CDNs. That being said:
The bootstrap.min.css file is easy to localize, you can go to getbootstrap.com and get it out of the Download Bootstrap option.
Localizing Font Awesome is a bit more work. Here you need to copy the entire font-awesome directory into your project. You can download it from this URL: http://fortawesome.github.io/Font-Awesome/ . You'll end up with a directory folder named something like font-awesome-4.2.0, which will contain a series of sub-folders: css, fonts, less and scss. You'll also need to call the local font-awesome.min.css file in the head section of your HTML. See the following GitHub link for more information on setting up Font Awesome locally: http://fortawesome.github.io/Font-Awesome/get-started/
Ionicons is similar to Font Awesome setup. From the following Ionicons web page, you'll need to Download the directory and include it in your project: http://ionicons.com/ . You'll need to call the local ionicons.min.css file in the head section of your HTML after you have the directory setup.
old question, but I think there's an easy solution now:
you can install the node package by using npm install ionicons
https://www.npmjs.com/package/ionicons
Save the css/js files locally from url and change path.
eg:- css/ionicons.min.css
http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css
http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css
http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css
Well i have a working spring-boot app that is running on a local computer just fine. However I noticed that when i do mvn package then none of my css or java scripts, locates in
/src/main/wepapp/css
are being copied into the jar file (package) created in the target directory.
spring boot reference guide says
65.3 Convert an existing application to Spring Boot "Static resources can be moved to /public (or /static or /resources or
/META-INF/resources) in the classpath root."
24.1.4 Static Content "Do not use the src/main/webapp folder if your application will be packaged as a jar. Although this folder is a
common standard, it will only work with war packaging and it will be
silently ignored by most build tools if you generate a jar."
So that means that i can put all my js and css folders into the folder
/src/main/resources/static
i.e. now my structure looks like that
/src/main/resources/static/css/
/src/main/resources/static/js/
all of my thymeleaf templates however are still located in
/src/main/resources/templates/
I did that, and as far as i understand know i need to add the ResourceHandler to my ResourceHandlerRegistry. Previously when all of my ccs were in "/src/main/wepapp/css/" my ResourceHandlers looked like that and it worked very well for me.
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/pdfs/**").addResourceLocations("/pdfs/").setCachePeriod(0);
registry.addResourceHandler("/img/**").addResourceLocations("/img/").setCachePeriod(0);
registry.addResourceHandler("/js/**").addResourceLocations("/js/").setCachePeriod(0);
registry.addResourceHandler("/css/**").addResourceLocations("/css/").setCachePeriod(0);
}
I have tried adding multiple handlers like
registry.addResourceHandler("/css/**").addResourceLocations("/css/").setCachePeriod(0);
or
registry.addResourceHandler("/css/**").addResourceLocations("/static/css/").setCachePeriod(0);
or
registry.addResourceHandler("/css/**").addResourceLocations("/").setCachePeriod(0);
etc.
but none of them worked for me.
The html templates are displayed but the web browser console is reporing 404 when trying to locate /css/corresponing.css or /js/corresponing.js
I have deliberately disabled Spring security in my test project, in order to simplify debugging of this problem.
One more thing thing that i do not completely understand is the deployment assembly. I have read an article that said that when i do want to have particular folders into my target package jar file generated by maven, i do need to include those folder into my deployment assembly, well i did however "mvn package" is still not copping all of the content(inlcuding subfolders) of my /src/main/static folder into the target jar file. I see however the "templates" folder copied into the jar file. So there is some other magic happening behind the scene.
Here is how do i declare the css in my thymeleaf layout i.e.
/src/main/resources/templates/layout.html
<!DOCTYPE html>
<html>
<head>
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/syncServer.css}" href="../css/syncServer.css" />
...
</head>
<body>
...
</body>
</html>
My question is: Is the configuration i done so far correct and if so what other options/settings i need to be aware of in order to make the app find the css files locates in /src/main/static/css/
Addition one
test project
git#github.com:TheDictator/sArchitecture.git
If you move you the whole static directory into the resources and totally remove the addResourceHandlers configuration, then everything works fine.
That means that resources structure would look like the following image: