I'm using Django and the static media app, along with Nginx. For some reason the external stylesheet doesn't apply itself. However, when I click on it in the source file, it does indeed load the style.css file.
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" media="screen" href="{% static "css/style.css" %}" />
<!-- EVEN THIS DOESN'T LOAD HERE
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/style.css" />
-->
</head>
<body>
<!-- some stuff -->
</body>
</html>
Check the error log of Nginx (error.log). Sometimes it is on the path '/usr/local/nginx/logs/error.log'.
Load the page and then make in command line: "tail -n 20 /usr/local/nginx/logs/error.log". You can see the path on which Nginx tries to load your css file and error message if there is no such file on the path.
The pass and the name of file are both case-sensetive.
If your css file loads normally (you can see it, for example, by using firebug) then it is not a problem of Django. Definitely there is a mistake in HTML and/or in CSS.
Related
I just deployed a new blog using Hexo and it is failing when it tries to load the style sheet. The generated declaration in the index.html file looks like:
<link rel="stylesheet" href="/css/style.css">
I can solve the issue editing this file manually as follows:
<link rel="stylesheet" href="css/style.css">
Note how the / is removed. Is this a bug that hexo has or is this happening just to me. Here is my repo for reference:
https://github.com/enriquezrene/quarkus
develop branch has the code
master branch has the deployed website
I kinda solved the issue forcing to load the css file editing the head.ejs file as follows:
...
<% if (config.highlight.enable){ %>
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<----- code added ----->
<link rel="stylesheet" href="css/style.css">
<----- code added ----->
<% } %>
<%- css('css/style') %>
</head>
However, this does not solve the issue completely since the generated index.html file now looks like:
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/css/style.css">
So it will try to load the other file as well.
I have a view called homePage.blade.php which is my master page which resides in res/views/ in that file I have this.
<link rel="stylesheet" href="css/coreStyleSheet.css">
<link rel="stylesheet" href="css/animate.css">
<script src="js/coreScripting.js"></script>
<script src="js/moments.js"></script>
<link rel="stylesheet" href="icons/fontAwesome/css/font-awesome.css"> </head>
all is fine?
Now I create a folder called AppCreate who's path is res/views/AppCreate I have a blade file there called something.blade.php now when I use #extends('homePage') I am not able to access the css,js.
my tree looks like this.
-res
-views
homePage.blade.php
-AppCreate
-something.blade.php
I redirect something.blade.php tp public/admin/appcreate
I redirect homePage.blade.php to public/dashBoard.
I hope I have explained it well.
when I access the public /admin/appcreate laravel is not able to find the css and the js because it says this.
GET http://localhost/laravel/public/admin/css/coreStyleSheet.css
appcreate:12 GET http://localhost/laravel/public/admin/js/moments.js
appcreate:11 GET http://localhost/laravel/public/admin/js/coreScripting.js
appcreate:13 GET http://localhost/laravel/public/admin/icons/fontAwesome/css/font-awesome.css
Try using the Helper Functions like this:
<link rel="stylesheet" href="{{ asset('css/animate.css') }}">
<script src="{{ asset('js/coreScripting.js') }}"></script>
assuming you have your css and js folders inside public/assets
I am having issue with loading static files in spring mvc. I have in my java config something like this:
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
}
When I deploy my app and visit it in browser
http://localhost:8080/MyApp/
No CSS is loaded. When I go to source I see that path is something like this:
http://localhost:8080/resources/css/style.css
Which is incorrect. If I change it to:
http://localhost:8080/MyApp/resources/css/style.css
Then I can see my css file. What am I doing wrong?
In my css I am linking to resources like this:
<link href="/resources/css/style.css" rel="stylesheet" type="text/css" />
Thanks for help.
When specifying a path like
<link href="/resources/css/style.css" rel="stylesheet" type="text/css" />
where the path is prefixed with /, the browser appends that path to the your host, not to your application context. For example, say you made your first request to
http://localhost:8080/MyApp/
then your browser would try to get the css at
http://localhost:8080/resources/css/style.css
as you've noticed. If you don't put a / at the front of the path like
<link href="resources/css/style.css" rel="stylesheet" type="text/css" />
then the browser will use the current location URL as the base.
http://localhost:8080/MyApp/resources/css/style.css
But if the current URL was
http://localhost:8080/MyApp/some/other/path
then the same path css <link> would be resolved to
http://localhost:8080/MyApp/some/other/path/resources/css/style.css
which is not what you want.
You want to css link to always be resolved on your application's context path. You can do this with the JSTL core taglib like so
<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css" />
or with EL as
<link href="${pageContext.request.contextPath}/resources/css/style.css" rel="stylesheet" type="text/css" />
A leading slash in a URL makes it relative to the Host, in your case http://localhost:8080/. So to be relative to the current URL leave it out.
You can also use <c:url > which makes the address relative to the servlet address, no matter what the current URL is.
<link href="<c:url value="/resources/css/style.css"/>" rel="stylesheet" type="text/css" />
This way, even if you have opened the page http://localhost:8080/MyApp/whatever/, the stylesheet will have the correct URL.
Currently I am using CodeIgniter_2.1.3 and my problem is my css file is not work, but i think it load well because when I view the source code and click the following href link it help me to view the css file.
<link rel="stylesheet" type="text/css"
href="http://localhost/CodeIgniter/_css/style.css"
media="screan" charset="UTF-8" title="no title" />
I keep my css file in CodeIgniter/_css directory and I use the following code ::
<link rel="stylesheet" type="text/css"
href="<?php echo base_url('_css/style.css');?>"
media="screan" charset="UTF-8" title="no title" />
I also use the following but no effect.
<link rel="stylesheet" type="text/css"
href="<?php echo base_url();?>_css/style.css"
media="screan" charset="UTF-8" title="no title" />
Make sure you have loaded URL helper :
$this->load->helper('url');
Inspect using firebug or other web development tools for browsers if valid link has been printed on your link href.
If everything seems fine, then refresh the page. Ctrl + F5 which fetches the file from server again.
URL Helper: Codeigniter Guide
Is that localhost address what you're using? That's only going to work if you're running the browser on your server . . . spelling screen correctly would help as well.
In my application I have next problem. I created master page and some content pages, some of which are located in the nested folders. In the master page I added the link to .css file
<link href="default.css" rel="stylesheet" type="text/css" />
But pages are located in the nested folders can't use this .css file. How can I fix this? I want to have one .css file for all pages (:
Thanks!
<link href="~/default.css" rel="stylesheet" type="text/css" />
This problem can be resolved by adding next code in master page
<style type="text/css" runat="server">
#import '<%= ResolveUrl("~/default.css")%>';
</style>
But designer of VS can't process this and you couldn't view your styles in it.
The css shouldnt be relative to the master page but rather it should be relative to the location of the Page instance using the master page. In most cases this will be the same thing but I would always try to use either a fully qualified path or a site relative path
Fully qualified path
<link href="http://some.site.com/mysite/styles/default.css" rel="stylesheet" type="text/css" />
or a relative path (note this might not work if you have a version which can only host one site but many apps such as WinXP)
<link href="/default.css" rel="stylesheet" type="text/css" />
Win xp relative path
<link href="/path/to/application/default.css" rel="stylesheet" type="text/css" />
If you using website under website, change in subfolder masterpage CSS link
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
change with below
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
The way you defined you style sheet means: the style sheet is in the same folder as the page which uses it.
If you want to have one style sheet for all pages you should put in in one place (I prefer /assets/css folder in the application root) and define the path using this folder:
<link href="/assets/css/default.css" rel="stylesheet" type="text/css" />
The other way to archieve this is to use Themes, in this case styles will be added automatically.