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>" />
Related
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.
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">
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 am new to spring MVC coming with experience using PHP MVC frameworks and ROR. I am having a hard time finding the appropriate way to organize and include front end assets into the view templates.
Here is the default code Roo produces for the default style sheet:
<spring:theme code="styleSheet" var="roo_css"/>
<spring:url value="/${roo_css}" var="roo_css_url"/>
<spring:url value="/static/images/favicon.ico" var="favicon" />
<link rel="stylesheet" type="text/css" media="screen" href="${roo_css_url}"></link>
This seems totally unnecessary to me. We are calling a variable from the spring:theme code list. Assigning it to a variable in the view scope/ and then calling that view variable for the
Ideally I would like to have some path tokens like: ${imagePage}, ${stylePath}, etc. That we could drop in and use for soft linking.
Hopefully somebody can point me to some quality SpringMVC documentation or give some examples. Thanks
Update:
I have seen a few examples and engfer has posted one below that suggest using the spring tags within the html to ouput the href like so
About
This would be acceptable however I am getting the following error from jetty
Caused by: org.apache.jasper.JasperException: /WEB-INF/views/footer.jspx(6,22) The value of attribute "href" associated with an element type "null" must not contain the '<' character.
Am I missing something with the encoding? or DTD?
Update:
So apparently the in-line href style only works with .jsp files as .jspx (What im using) is strict xml. What are the benefits of .jspx over .jsp and
The code you have provided from Roo is a little unnecessary. If you look at the Spring MVC documentation as tkeE2036 pointed out... you will see the themes section http://static.springsource.org/spring/docs/3.0.x/spring-framework-reference/html/mvc.html#mvc-themeresolver
<link rel="stylesheet" href="<spring:theme code='styleSheet'/>" type="text/css"/>
The Spring theme tag gives you the ability to internationalize your CSS/images/js (imagine an image that has the word 'Hello' which needs to be changed for English/Spanish/etc) into separate internationalized theme files that follow the http://java.sun.com/javase/6/docs/api/java/util/ResourceBundle.html convention and Spring will automatically resolve the correct resource bundled theme.
If you still want your ${imagePath} or whatever, you can use the <spring:url/> tag to get your job done.
<spring:url value="/images" var="imagePath"/>
<link rel="stylesheet" href="${imagePath}/foo.png" type="text/css"/>
<link href="http://www.../default.css" rel="stylesheet" type="text/css" />
Could not edit 'http://...' because it is not in the Web site.
I get this error box every five minutes, how do I get it to stop telling me this?
<link runat="server" id="defaultCss" rel="stylesheet" type="text/css"/>
and on your code behind
defaultCss.attributes.add("href","http://www..../default.css");
if your css is in your website then you can use
ResolveUrl("~/default.css")
to get the url
or probably best practice is to add it to your app theme folder http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx and then not only will it be automatically added but you'll get intellisense
Well, seems like it's because you're including an href that points to a URL, instead of a relative web path.
Instead of
<link href="http://www.mysite.com/styles/default.css" rel="stylesheet" type="text/css"/>
use
<link href="/styles/default.css" rel="stylesheet" type="text/css"/>
Also, make sure your closing
/>
is valid in terms of your Doctype.