I'm new to Django but have been tasked with doing the front-end work for the project. I've been researching how exactly to load the css files and the methods I've found just aren't working. Here is the .html file layout:
{% load static %}
<html>
<head>
<title class="title"> NHSEE Homepage </title>
<!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> -->
<link rel="stylesheet" href="{% static 'css/homepage.css' %}">
</head>
<body>
<div class="container">
<h1> NHSEE </h1>
<a class="btn btn-1" href="/judges">Judges</a>
<br>
Students
<br>
<a class="btn btn-1" href={% url 'scoring-sheet' %}>Scoring Sheet</a>
<br>
Students
<br>
Projects
</div>
Here is the layout of the files (not sure if its where I'm putting the files that causing the issue)
Any help is greatly appreciated. Its very frustrating as I've done frontend work professionally before and can't get a stupid css file to show up.
EDIT: The settings.py file
So, first you need to have STATICFILES_DIRS in your settings.py:
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'assets')]
Then go ahead and move all your assets (css, js, fonts, ...) to a directory called assets beside manage.py (not inside your apps)
as an example, let's say you have assets/css/home_page.css; you should use {% static 'css/home_page.css' %} in your templates to access that (omitting the assets directory).
That was the basic idea, you can name those directory as you need.
Related
I am trying to create a Datetime picker for birthdays, as you can see here, the solution requires the use of many links and script sources.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/es.js"></script>
<br>
<div class="form-group">
<div class='input-group date datepicker' name="datepicker" >
<input type='text' class="form-control placementT" id="fecha">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
I want to use mvc bundles, with links to those scripts and stylesheets. But the solution I found: How to setup bundles using CDN in ASP.NET MVC?
does not explain how to include many links in a bundle. Instead, uses one link per bundle:
bundles.Add(new ScriptBundle("~/bundles/jquery", "http://code.jquery.com/jquery-2.0.3.min.js")
.Include("~/Scripts/jquery-{version}.js"));
bundles.Add(new StyleBundle("~/bundles/bootstrap", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")
.Include("~/Content/bootstrap.css"));
As you can see, I would have to 6 different bundles.Add. I want to be able to do something like this:
bundles.Add(....,"https://maxcdn","https link","another link")
How can I do it ? I want to include that bundle in my view like this:
#Scripts.Render("~/bundles/myCustomBundle")
This an example you can change parameters according to your need.
Example
The cdnHost parameter refers to alternate URL for the bundle when it is stored in a content delivery network. The cdn bundle is supposed to be loaded as one file and should contain a combined content of all files uploaded on cdn for example server path is https://ajax.googleapis.com/ in your case
then you can load multiple script file as one bundle you just need to provide relative path of other files in include method.
var cdnHost = "https://ajax.googleapis.com/";
bundles.Add(new ScriptBundle("~/bundles/angularCDN", cdnHost).Include(
"~/ajax/libs/angularjs/1.3.0-beta.17/angular.js",
"~/ajax/libs/angularjs/1.3.0-beta.17/angular-cookies.js",
"~/ajax/libs/angularjs/1.3.0-beta.17/angular-route.js"));
i hope it'll work for you.
This is the link to github for the theme which I'm working on: https://github.com/PrashantYadav/xosjapps
On the localhost, its working properly.
I have set the baseurl but still its rendering css correctly as you can see it here - https://prashantyadav.github.io/xosjapps/
This is the url for original theme: https://github.com/jeromelachaud/freelancer-theme
Please help.
The console said that it's failed to load ressources. Are you sure you put the correct path to the files ?
CSS files aren't being loaded properly.
Move your css files that are located in /_includes/css to /css and load them from your layout file (or include) as:
<link rel="stylesheet" href="{{ '/css/main.css' | absolute_url }}" type="text/css" />
<link rel="stylesheet" href="{{ '/css/bootstrap.min.css' | absolute_url }}" type="text/css" />
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
Current structure:
MySite
|--MySite
| |--static
| |--MySite
| |-- site_wide.css
|--MyApp
|--static
|--MyApp
|-- app_specific.js
|-- app_specific.css
settings.py:
STATIC_URL = "/static/"
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "/MySite/static/"),
)
With the following code I am able to successfully link to app_specific.js and app_specific.css, but am unable to link site_wide.css
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'MyApp/app_specific.css %}" />
<link rel="stylesheet" type="text/css" href="{% static 'MySite/site_wide.css' %}" />
... site body ...
<script type="text/javascript" src="{% static 'MyApp/app_specific.js' %}" ></script>
Upon inspecting the generated html, the href for the 2nd link is:
href="/static/MySite/site_wide.css"
which does not exist.
My current understanding is that django would search for my linked file in the path defined by STATIC_URL and then (if not found) progress through the paths listed in SATICFILES_DIRS, however it is apparently never looking at the path specified in STATICFILES_DIRS.
I am brand new to django and want to understand how it works. Some other similar questions mention things like collectstaticfiles or something like that but are all very unclear.
Any help would be greatly appreciated!
P.S. Everything I know is from the official Django 1.8 tutorial/docs, so please do not post deprecated answers. 1.8 only.
Try to change os.path.join(BASE_DIR, '/MySite/static/') to os.path.join(BASE_DIR, 'MySite/static'), i. e. remove forwarding /. I guess the reason is how os.path.join works
>>> os.path.join('/foo', '/bar')
'/bar'
>>> os.path.join('/foo', 'bar')
'/foo/bar'
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.