In spring-boot application, pointed all css, js, images are in below structure:
JSP page is loading with all css/js/images when the URL is like this http://localhost:8080/request/
But when the URL is like this http://localhost:8080/request/rt/home
(css/image/js are not loading).
When I click the url of bootstrap.min.css from view source page, it is showing like below:
http://localhost:8080/request/rt/public/css/bootstrap.min.css
"rt" is adding in between the url.
How to omit the "rt" from path.
so that will get path like http://localhost:8080/request/public/css/bootstrap.min.css
It will load css/js/images
Please suggest
Without seeing your jsp, according to your statements of how it behaves, I would say that you are declaring your stylesheet and resources reference this way, without starting by a /:
<link href="public/css/bootstrap.min.css" rel="stylesheet">
<script src="public/css/bootstrap.min.js"></script>
This means that the resources are relative to the virtual directory of the url bar of the browser.
You should declare your references this way:
<link href="/request/public/css/bootstrap.min.css" rel="stylesheet">
<script src="/request/public/css/bootstrap.min.js"></script>
To avoid hardcoding the contextpath, you could use:
<link href="${pageContext.request.contextPath}/public/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/public/css/bootstrap.min.js"></script>
Whicho would resolve your context name
Try this way
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
or
<link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
Related
LARAVEL 9: I am using a template in Laravel 9 and I cannot reach my CSS file code anytime I have a double URL like this : /user/profile. However, It only works when I have a single URL like this: /profile. But I want to be able to reach my CSS files when I have double URLs. How can I solve this? Any suggestions?
Did you put the files correctly in the public folder?
Do you invoke it correctly within the blade as the following example:
<link href="{{URL::asset('assets/plugins/fontawesome-free/css/all.min.css')}}" rel="stylesheet">
Have you checked the error by inspecting your browser?
You can check this link contains many useful examples for your case
Put a slash "/" at the beginning of the css address. For example if you have somethin like this:
<link rel="stylesheet" type="text/css" href="css/style.css">
Change it to this:
<link rel="stylesheet" type="text/css" href="/css/style.css">
I've been developing a site with bootstrap 4 and linking externally to:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
However, I need to load the site locally as the network connection isn't stable. So I downloaded the full stack bootstrap-4.0.0 Source file and added it to my WebServer directory thinking all I need to do is change the link to to point to bootstrap.min.css, like this:
<link rel='stylesheet' href="http://localhost/webfiles/wp-content/themes/Cussons/bootstrap-4.0.0/dist/style.css?ver=4.9.4">
The site works, but I'm getting a 404 not found for style.css?ver=4.9.4
All permissions at set to allow full access and I cleared caches and all of the links href's appear correct, but I cant seem to get my head around why the site wont pick up the color changes I've added to files like /assests/scss/_navbar.ccss
If anyone can see whats wrong, I'll be very grateful :)
Just download the precompiled files here, place them in an accessible folder and then link them like :
<link rel="stylesheet" href="relative_path_to_css_parent_folder/css/bootstrap.min.css">
same for the js at the bottom of the body :
<script src="relative_path_to_js_parent_folder/js/bootstrap.min.js">
or
<script src="relative_path_to_js_parent_folder/js/bootstrap.bundle.min.js">
Take a look at this : How do I link to my css stylesheet for local file?
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="UI.css"> <!-- made up name-->
<script src="jquery.js"></script><!-- made up name-->
<script src="jquery.ui.js"></script><!-- made up name-->
<script src="script.js"></script>
But what if the js files are all in the projects/js/ folder? Point
your page to this location:
Assuming our HTML is in the blackjack folder, which is a sibling
folder to 'projects/js', then your script tags will look something
like this:
<script src="../js/script.js"></script>
Notice the ../? This references the parent folder of the one the
document is in. We go up one level to where the js folder is.
I've been making a simple site using thymeleaf for my html pages, and typically my css is linked a little something like this.
<link href="../static/css/bootstrap.css"
th:href="#{css/bootstrap.css}" rel="stylesheet" media="screen"/>
and I was under the impression that the th:href tags used the normal href to find the correct path for the CSS.
My custom 404 is in a different directory so its css link is a little different, and when I test it in browser it works, but when the server is actually started it doesn't.
<link href="../../static/css/bootstrap.css"
th:href="#{css/bootstrap.css}" rel="stylesheet" media="screen"/>
What am I missing that keeps it from working when the server is started?
When you're using:
<link href="../static/css/bootstrap.css"
th:href="#{css/bootstrap.css}" rel="stylesheet" media="screen"/>
The th:href tag will eventually have some final value which will replace the original href value.
For example:
Let's say that th:href="#{css/bootstrap.css}" will end up to be
href=/css/bootstrap.css
that value of: /css/bootstrap.css will replace the ../static/css/bootstrap.css value of the original href.
with that being said, the page source code to figure out what value does your href is getting from the th:href tag
I would suggest taking a look in your spring context file and check whether resources are mapped to a folder.
<mvc:resources mapping="/resources/**" location="<path to resources>" />
I'm porting an old site to a new template and am having problems with the Windows 2008 rewrite module. The link I'm trying to rewrite looks like this:
http://ltweb2008.serveronline.net/product.php?pID=75
and brings up the page just fine. Then I apply the new URL and it loads the proper content, but doesn't load the template's style.css file anymore.
http://ltweb2008.serveronline.net/product/75/any-text-here
The problem seems to be that the company who made the template (canvas) put the main .css file in the root directory, but loaded all the rest in /css. Now I can't get the main .css file to load using the rewrite and when I move it down to /css it only displays a blank page, though when I check out the page source it's all there.
With this the page shows but is not using style.css (with rewrite):
<link rel="stylesheet" href="style.css" type="text/css" />
With any of these the page is completely blank (with rewrite):
<link rel="stylesheet" href="/style.css" type="text/css" /> OR
<link rel="stylesheet" href="/css/style.css" type="text/css" /> OR
<link rel="stylesheet" href="http://ltweb2008.serveronline.net/style.css" type="text/css" />
I'm using this for the Pattern:
^product/([0-9]+)/([^/]+)$
And the Rewrite URL:
/product.php?pID={R:1}
Does anyone know what I'm missing?
one solution is that use absolute path (ex /css, or /js rather than just css/, /js but this is not looks a reliable solution since we've to change it on all files,
This is because your relative URIs have their base changed. Originally, the base is / when the page is /product.php?id=75, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /product/75/any-text-here the base suddenly becomes /product/ and it tries to append that in front of all relative URLs and thus none of them load.
You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):
<base href="/">
Maybe you need one thing, maybe both, I didn't test, but this solved it for me:
1.) ADD THIS in page_load :
Page.Header.DataBind() ' Needed because we have <%# %> codeblocks in the HEADER (seems header only causing this) WITH the AjaxControlToolkit running on the page. That's what broke it until we put in this and put in the pound instead of = sign in the html.
2.) Add this in ASPX:
<%# MasterType VirtualPath="~/dir1/dir2whateverdir/MasterPage.master" %>
I have been searching for an answer to this question with no luck. This is my second day using laravel and I'm trying to create a custom 404 error page. I don't know where/how to include my .css file. Can someone please help me with this?
Place your css files inside public folder and use link tag in html document (or 404 template)
Example
<link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" />
The best way is using blade syntax with the laravel helper for what you need
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
this folder css or whatever you named it, must be placed inside your public folder.
Search for Public folder in Laravel.
Create css folder (that contains stylesheet files of your project), javascript and Images folder (contains images that you will use in your project).
Go to layouts in app.blade.php file update html code using blade syntax:
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
and JS:
<script src="{{ asset('pickadate/lib/picker.js')}}"></script>
1. put your CSS file in directory [PUBLIC/CSS]
2. in your FileName.blade.php in file just write :
<head> <link rel="stylesheet" href={{ asset('css/article.css')}}> </head>
Note Again : Don't Write asset('public/css/article.css') this wrong
put it in your public file and the html tags in view then to connect them with the css use
<link rel="stylesheet" href="{{ URL.asset('css/style.css') }}">
<link rel="stylesheet" href="css/app.css">
simply add this your blade.php file