Import css in Django - html

I use django1.10
i reference the official doc
https://docs.djangoproject.com/en/1.10/intro/tutorial06/
my project name:mysite
structure:
mysite-
- mysite - urls.py
-views.py
...
- templates - index.html
- images
- static - mysite - assets - css - main.css
- js
...
In my index.html
add
{% load staticfiles % }
<link rel="stylesheet" text = 'html/css' href="{% static 'mysite/static/main.css' %}" />
it said i have a Invalid block tag about TemplateSyntaxError
<link rel="stylesheet" type = 'text/css' href="{% static 'mysite/static/assets/css/main.css' %}" />
views.py (about static files part)
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/mysite/static/',
]
STATIC_URL = '/static/'
STATIC_ROOT='/mysite/static/'
what's part should i notice?

Hi dear try to make python manage.py collectstatic...
hope it solves your problem 😊

Related

Django: CSS is not getting applied

I have placed all my CSS files in static/css folder. My settings are:
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
MEDIA_URL='/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
While the media files are working properly, and the images kept in static/images folder are also appearing, the CSS styling are not appearing. For each page, I am creating a CSS file, placing that in static/css folder, and calling it like this:
{% load static %}
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/getting-started.css' %}"> <--this
</head>
The getting-started.css file:
h3{
text-align: left;
}
p {
font-family: verdana;
font-size: 20px;
}
Though the bootstrap.min.css is working, the CSS are not working.
Try giving full path in STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
For example STATICFILES_DIRS = [os.path.join(BASE_DIR, 'accounts/static')]
In my case my app name was accounts and then static folder inside it.
You have to collect all staticfiles before loading them in your template:
manage.py collectstatic
If you are developing turning DEBUG=False , try to check out this: https://docs.djangoproject.com/en/2.2/howto/static-files/#deployment.
If you are developing turning DEBUG=True , and still having trouble , follow below methods .
Create a folder inside static folder withyour app name . Move folder css to this location and update the href such that new href = "{% static 'appname/css/getting-started.css' %}"
After that update the settings to
STATIC_URL = '/static/'
Below code is only needed your project will probably also have static assets that aren’t tied to a particular app.
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
You can refer : https://docs.djangoproject.com/en/2.2/howto/static-files/#configuring-static-files
Check whether the css file is loaded by inspecting the rendered element using the inspect element so that you can verify whether it is loaded . The css styling you used might be not matching with elements in the html . If it is loaded you can view your below code
h3{
text-align: left;
}
p {
font-family: verdana;
font-size: 20px;
}

CSS Link Static Page

Before you mark this as a duplicate, I have indeed already looked at the django forums, tutorials, etc.
I have a blog I made with Django, the blog's index page template needs to have a css stylesheet that I have linked in my static folder. (Folder Tree attached
attached).
In the html for the template I have the following code:
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'blog/style.css' %}" />
Why is this not working! Thanks!
EDIT: I found this in my sitename/base.py file:
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
STATICFILES_DIRS = [
os.path.join(PROJECT_DIR, 'static'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
Could it be a problem with the directories? manage.py collectstatic -l says:
196 static files symlinked to
'/home/myusername/webapps/mysite/static'.
Check the console while opening the view accessing this CSS file. The cmd console will print the absolute URL they will use to find CSS file. From the url, you can identify what is the problem. See how the URL is built.
comment the STATICFILES_URL [..], STATICFILE_FINDERS [..] and add the staticfiles_url like this:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)

Django: Using static, hard time with paths to render css

This is a bit embarrassing, but I don't know how to solve this problem:
First off, my project directory looks like this (there are more directories, but we aren't concerned with them):
projectfolder/
wsgi/
openshift/
templates/
home/
simple-sidebar.html
static/
css/
fonts/
js/
And the file we are concerned with is simple-sidebar.html which looks like the following :
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href= "{% static "css/bootstrap.css" %}" rel="stylesheet">
<!-- Add custom CSS here -->
<link href="{% static "css/simple-sidebar.css" %}" rel="stylesheet">
<link href="{% static "font-awesome/css/font-awesome.min.css" %}" rel="stylesheet">
</head>
Now for some reason my static template tags are not working, but that's probably because I don't know how to set up my static template stuff in my settings.py:
STATIC_ROOT = os.path.join(PROJECT_DIR, '..', 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = () <--- dont know if I need this one?
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
#'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
PS: Also how would you do this without the {% static %} tag? I am not sure how my style sheets href would look like.
Try removing the dots from your STATIC_ROOT, for example
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
STATICFILES_DIRS are there for you if you'd like to map additional folders to your application that can be anywhere on your machine. When you run ./manage.py collectstatic you're essentially asking python to find all the files within said directories and drop them into the static folder defined in STATIC_ROOT
If you would like to map your files manually (without the static tag) you'd have to write out the full path of your file, for example /some/directory/path/css/style.css.
Lastly if you're running with DEBUG = True you are required to add your static and media urls to urls.py so there is an actual path in place. For example
from django.conf import settings
# ... your normal urlpatterns here
if settings.DEBUG:
urlpatterns += patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.MEDIA_ROOT}),
(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.STATIC_ROOT}))

Bootstrap files 404 Django

On FireBug I get these errors
GET http://localhost:8000/static/bootstrap/css/bootstrap.min.css 404 (NOT FOUND) localhost/:7
GET http://localhost:8000/static/bootstrap/js/bootstrap.min.js 404 (NOT FOUND) localhost/:8
GET http://localhost:8000/static/bootstrap/css/bootstrap.min.css 404 (NOT FOUND)
My STATIC_ROOT is :
STATIC_ROOT = '/home/bradford/Development/Django/public_pictures/static'
I placed my bootstrap files in a 'static' directory. This 'static' directory is located in my project named 'public_pictures'. I'm not sure why these files can't be located
Here is my HTML file:
<!DOCTYPE html>
{% load staticfiles %}
<head>
<link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}" type="text/css" media="screen" />
<script type="text/javascript" src="{% static "bootstrap/js/bootstrap.min.js" %}" ></script>
</head>
<html>
<body>
<span class="badge badge-success" >HI!</span>
<span class="badge">1</span>
<span class="badge badge-warning">4</span>
<span class="badge badge-important">6</span>
<span class="badge badge-info">8</span>
<span class="badge badge-inverse">10</span>
</body>
</html>
As a result, only regular text is displayed for these bootstrap badges.
Any input is appreciated thank you!!
******EDIT*************
So as of right now my STATICFILES_DIRS in settings.py is
STATICFILES_DIR = ('/home/bradford/Development/Django/public_pictures/static',)
STATIC_ROOT = '', # blank
STATIC_URL = '/static/'
DEBUG = True
urls.py:
from django.conf.urls import include, url, patterns
urlpatterns = patterns('',
url(r'homepage/',include('homepage.urls', namespace = "homepage")),
)
index.html (template)
<!DOCTYPE html>
{% load staticfiles %}
<head>
<link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}" type="text/css" media="screen" />
<script type="text/javascript" src="{% static "bootstrap/js/bootstrap.min.js" %}" ></script>
</head>
<html>
<body>
<span class="badge badge-success" >HI!</span>
<span class="badge">1</span>
<span class="badge badge-warning">4</span>
<span class="badge badge-important">6</span>
<span class="badge badge-info">8</span>
<span class="badge badge-inverse">10</span>
</body>
</html>
All these changes lead me a bit closer to my goal. However the badges of the bootstrap is displayed but there is no color being displayed. Everything is grey with white text =[ I'm not sure if the other features work as well. I shall try them. Thank you again for all the help! much appreciated!
It seems that you have forgot to include your static url in urls.py. If you are using development server you can use the following code in urls.py:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = patterns('',
# ... the rest of your URLconf goes here ...
) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
More reference on deploying static files for development or for production.
Development Server:
Leave STATIC_ROOT empty.
Make a change to STATICFILES_DIRS
STATICFILES_DIRS = (
'/home/bradford/Development/Django/public_pictures/static',
)
Run ./manage.py collectstatic
Should work.

Render CSS in Django

I am trying to get the CSS sheet to load on my development computer. It is in the media directory as media/base.css. In my base/base.html template, I have:
<link href="media/base.css" rel="stylesheet" type="text/css" />
I found this page, but that didn't fix it. Any ideas?
if media/ is your project media directory, then in the template use
<link href="{{ MEDIA_URL }}base.css" rel="stylesheet" type="text/css" />
this is considering you have passed RequestContext to your template,
ex:
def some_view(request):
# ...
return render_to_response('my_template.html',
my_data_dictionary,
context_instance=RequestContext(request))
You will also need to have static urls served when running on the localdev server.
Include this in your urls.py:
from django.conf import settings
if settings.DEBUG:
urlpatterns += patterns('',
url(r'^%s(?P<path>.*)$' % settings.MEDIA_URL[1:],
'django.views.static.serve',
{'document_root': settings.MEDIA_ROOT, 'show_indexes': True})
)