I have a django project that structure is like this:
>vira
>vira
-__init.py
-settings.py
-urls.py
-wsgi.py
>vira_app
>migrations
>template
-index.html
>static
>vira_app
>assets
>css
>js
>vendor
>aos
>bootstrap
>bootstrap-icons
>isotope-layout
>swiper
-__init__.py
-admin.py
-apps.py
-models.py
-tests.py
-urls.py
-views.py
-db.sqlite3
-manage.py
I have used bootstrap. index.html is like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% load static %}
<link href="{% static 'vira_app/assets/vendor/aos/aos.css' %}" rel="stylesheet">
<link href="{% static 'vira_app/assets/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vira_app/assets/vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
<link href="{% static 'vira_app/assets/vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
{% load static %}
<link href="{% static 'vira_app/assets/css/style.css' %}" rel="stylesheet">
</head>
<body>
<main id="main">
<div id="portfolio-grid" class="row no-gutter" data-aos="fade-up" data-aos-delay="200">
{% if catalogue_list %}
{% for Catalogue in catalogue_list %}
<div class="item web col-sm-6 col-md-4 col-lg-4 mb-4">
<a href="{{ Catalogue.link }}" class="item-wrap fancybox">
<div class="work-info">
<h3>{{ Catalogue.title }}</h3>
<span>{{ Catalogue.source }}</span>
</div>
<img class="img-fluid" src="{{ Catalogue.image }}">
</a>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</main>
<i class="bi bi-arrow-up-short"></i>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
settings.py:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'vira_app', 'template')
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATIC_ROOT = '/vira_app/template'
When I run the server and go to index.html, data retrieved from db and show well, but without any style!
I have tried some solution, check every static url, but not working
In fact, css, js and vendors not applied. What's the problem?
Some of settings are misused:
STATIC_URL = '/static/' - this is fine
STATIC_ROOT = '/vira_app/template' - nope, this is supposed to be some folder not really related to the project structure. In the end, on prod it can be a CDN URL or a folder on different server. So try changing it to something like STATIC_ROOT = os.path.join(BASE_DIR, 'static') for the start.
As mentioned in comments you might need to define STATICFILES_DIRS - a list of folders where from static files must be collected to STATIC_ROOT by collectstatic command. This means you can have many subfolders containing static files in different places. However you'll need to collect those files all together to deploy somewhere. STATICFILES_DIRS + collectstatic will collect all of those files for you into given STATIC_ROOT (and contents of this folder should be deployed somewhere, to CDN for example).
Note, default set of STATICFILES_FINDERS already contains AppDirectoriesFinder which will automatically find all the static subfolders in any of the project apps. This means if you move static subfolder from templates to the vira_app root - you won't have to mention it in the STATICFILES_DIRS.
So:
STATIC_ROOT should not point to any templates subfolders, change it to something more "global"
STATICFILES_DIRS should link to the folder(s) where you keep your static files now or this folder should be moved to the root of vira_app to let collectstatic find it
collectstatic must be run before checking your styles and scripts in rendered page
after running collectstatic all the static files must persist in STATIC_ROOT so django will be able to map relative urls after STATIC_URL to relative paths after STATIC_ROOT and those files will be loaded
PS
Note, some of your static files are linked in wrong way in the shown template:
<script src="assets/vendor/aos/aos.js"></script>
this should be changed to {% static... as well.
Related
This question already has answers here:
Django CSS not updating
(11 answers)
Closed 2 years ago.
my first question here. I'm still new to both Django and CSS.
I'm trying to use CSS from Static folder in my Django project. It's all at a pretty basic stage.
In the 'static' subfolder 'css' I have one main.css file with example code:
body{
font-size: 20px;
background-color: black;
}
h1{
color: #008000;
}
In my settings.py file I have:
import os
(...)
DEBUG = True
(...)
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
And in my base.html template:
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shopping List</title>
<link rel="stylesheet" type="text/css" href="{% static '/css/main.css' %}">
</head>
<body>
<h1>TEST</h1>
{% block content %}
{% endblock %}
</body>
</html>
I've tried moving the css file, changing the view/url, and adding/deleting bootstrap (which alone works).
In the end my page just turns light blue-ish.
Thanks in advance.
So I checked your code and for me it works fine check if you have
'django.contrib.staticfiles' in your INSTALLED_APPS
If this didn't work I'm going to leave my code here, hope it helps.
-DjangoProject
-static
-css
-testing.css
template.html
{% load static %}
<link rel="stylesheet" href ="{% static 'css/testing.css' %}" type="text/css">
settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',]
...
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
I just noticed that my STATICFILES_DIRS is a tuple and not a list like in your example, I don't think it makes any difference but you could try it.
Not sure if this will work, but try removing the "/" before css in your html file:
... href="{% static 'css/main.css' %}">
I am studying Django. In my settings.py :
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
and when I try to add an image in a template,
<img src="{% static "img/person.png" %}"/>
<img src="{{ STATIC_URL }}img/person.png" />
<img src="/static/img/person.png" />
All three are shown in the browser as:
<img src="/static/img/person.png" />
Then, What is the different between them?
If there is no problem, can I use
<img src="/static/img/person.png" />
in the template code?
The problem with hardcoded URLs <img src="/static/img/person.png" /> is that if in future you want to change static URL you have to go through all files to replace it with newer one, and usually in production sometimes we want to use CDN to serve static content and that is not served via /static/.
For the other difference between {% static %} and {{ STATIC_URL }} check this answer.
Since I started using the Django framework I noticed that the CSS style did not appear when I entered the admin site and others templates and I thought it was normal but with the passage of time I have seen that the applications of my partners did have the style, so I copied their projects on my laptop and I ran them and I could see the CSS style of their applications.
I'm getting data from a database from a server, that's the only difference in how my partners and I have been working.
Does anyone know how I can fix this?
PD: I'm working with version 1.8 of Django and version 3.4.4 of python
This is my base of my HTML's code
{% load staticfiles %}
<html>
<head>
<title>DENUE INEGI</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 href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/crm.css' %}">
</head>
<body>
<div class="page-header">
{% if user.is_authenticated %}
{% else %}
<span class="glyphicon glyphiconlock"></span>
{% endif %}
<h1>Directorio EstadÃstico Nacional de Unidades Económicas INEGI</h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
Here is my setting.py file
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
LOGIN_REDIRECT_URL = '/'
I appreciate your answers, thank you :)
Try to change Debug = True in your application settings and then check the admin panel.
According to this documentation to serve static files during development you have to:
1) define STATIC_URL in settings file - you have it. So you have to create static folder in the root of your project.
2) STATIC_ROOT = os.path.join(BASE_DIR, 'static')
3) In urls.py of you project you have to have this snippet:
from django.conf.urls import include, url
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
...
]
+ static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
If your project under deployment, then you can serve static files by the web server. Then you don't need snippet in urls.py
Hope it helps you
Check your urls.py with urls.py of your friends project. I had the same problem with CSS files. and found answer in the docs https://docs.djangoproject.com/en/1.8/howto/static-files/#serving-static-files-during-development
Try as I might, and after trying to read through and follow these (and others):
How do I serve CSS to Django in development?
Django not loading CSS?
I still can't get any staticfiles served by django. at this point, I have a project called limbo, with a yet-to-be-dev'd app called limbo (that was a bad idea, I no realize...name confusion), and a separate app called polls, where I followed well-known django tutorial to build out the app, then added a little session variable passing to pass the name to a stupid output on the target of the form. It's all served on EC2 linux AMI, with django v1.10, I'm viewing it with chrome v53.
some code excertps are below, but the repos are public (one for the bulk of the django, the other for the html templates)
~/limbo/limbo/settings.py:
ROOT_URLCONF = 'limbo.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
'/var/www/html/',
'/var/www/html/polls/',
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
...
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.10/howto/static-files/
#STATIC_URL = '/static/'
#STATIC_ROOT = os.path.join(BASE_DIR, "/var/www/html/static/")
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS = [
# "/home/ec2-user/limbo/limbo/static/",
]
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
~/limbo/limbo/urls.py:
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^polls/', include('polls.urls')),
url(r'^admin/', admin.site.urls),
]
entire ~/limbo/polls/urls.py
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^index.html$', views.index, name='index'),
url(r'^formTest$', views.testForm, name='testForm'),
url(r'^name-test.html$', views.get_name, name='getName'),
url(r'^testFormResults/',
# <string>[\w\-]+)/$',
views.testFormResults,
name='showFormResults'),
]
excerpt from /var/www/html/polls/name.html (which shows fine, but without any css nor img), it does show both when viewing local on my win8.1 surface, but not remotely from the server (note I now have {% load static %} instead and it didn't change anything that I can see):
<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
<!--this group for local use w/o django-->
<link rel="stylesheet" type="text/css" href="../static/polls/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../static/polls/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="../static/polls/css/limbo.css">
<!--this group for use w/ django-->
<link rel="stylesheet" type="text/css" href="{% static 'polls/css/bootstrap.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'polls/css/bootstrap-theme.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'polls/css/limbo.css' %}" />
</head>
<div class="navbar navbar-default navbar-fixed-top">
<div class=container>
<img class="top-bar" src="static/polls/limbo-clipart-1.jpg" alt="limbo graphic"/>
<img src="{% static 'polls/static/limbo-clipart-1.jpg' %}" alt="limbo graphic"/>
<h1>This is a heading</h1>
</div>
</div>
Try as I might, I just can't get past this. I'm excited about getting django up and running as I think it'll be a fantastic way to build the api I need and the little bit of browser-based UI the project needs, but I need a little css to make the browser-UI.
I am using django 1.5.2 and I am having a hard time understanding the purpose of the media directory vs. the static directory and how to include stylesheets in my django project.
This is my directory structure:
django_books
beer
__init__.py
admin.py
models.py
views.py
random_book
(same as beer above)
django_books (the actual django project; beer and random_book above are my apps)
templates
base.html
beersall.html
__init__.py
settings.py
urls.py
views.py
wsgi.py
static
css
beers.css
media
css
beers.css
static
css
beers.css
manage.py
My beersall.html template (the beer output is correct, so just linking the stylesheet is wrong):
{% extends 'base.html' %}
{% block content %}
<div id="beer_list">
{% for beer in beers %}
{{ beer }},
{% endfor %}
</div>
{% endblock %}
My base.html file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/media/css/beers.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/beers.css" />
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/beers.css" />
<link rel="stylesheet" type="text/css" href="/static/css/beers.css" />
<link rel="stylesheet" type="text/css" href="/Users/username/Projects/django_books/media/beers.css" />
<link rel="stylesheet" type="text/css" href="/Users/username/Projects/django_books/static/beers.css" />
<link rel="stylesheet" type="text/css" href="/Users/username/Projects/django_books/django_books/static/beers.css" />
{% block extrahead %}{% endblock %}
</head>
<body>
<div id="page_container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
My settings.py file:
MEDIA_ROOT = '/Users/username/Projects/django_books/media/'
MEDIA_URL = '/Users/username/Projects/django_books/media/'
STATIC_ROOT = ''
STATIC_URL = '/static/'
I should note that I am using the django development server, not apache.
The error in my browser (developer console) says beers.css is 404.
The url is localhost:8000/beers/ and my urls.py file correctly points to this and the views.py correctly serves the beersall.html template. How can I properly link my media?
EDIT
When I change the css link href value to /Users/username/Projects/django_books/media/ it still doesn't work.
EDIT 2
I've updated the href values to show things I've tried. Still not working...
User-uploaded files (by admins or site users) go to media directory.
Static files are files provided by developers (or from third-party apps).
Set something like this:
# Local disk paths
MEDIA_ROOT = '/Users/username/Projects/django_books/media/'
STATIC_ROOT = '/Users/username/Projects/django_books/static/'
# URLs visible in the browser's address bar
MEDIA_URL = '/media/'
STATIC_URL = '/static/'
And in Your template use the STATIC_URL variable:
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/beers.css" />
And move your styles to the django_books/static/ directory.
in my project:django_learn, in template: check_uncheck_all.html, part pf the code:
{% load staticfiles %}
<html>
<head>
<script type=text/javascript src="{% static 'js/jquery-1.9.1.js' %}"></script>
</head>
you can also have a look at my settings.py
The static files were being found, but the permissions were not set up correctly. (i.e. a 403 not a 404 server error)
<VirtualHost *:80>
WSGIScriptAlias / /Users/username/Projects/django_books/django_books/django.wsgi
#the directory tag before was /Users/username/Projects/django_books/django_books/>
#this was one directory too deep
#from my structure above, you can see I needed to change my directory tag to this:
<Directory /Users/username/Projects/django_books/>
Order Allow,Deny
Allow from All
</Directory>
<Directory /Users/username/.virtualenvs/django_books/lib/python2.7/site-packages/django/contrib/admin/static/admin/>
Order Allow,Deny
Allow from All
</Directory>
Alias /static/admin/ /Users/username/.virtualenvs/django_books/lib/python2.7/site-packages/d$
Alias /static/ /Users/username/Projects/django_books/static/
</VirtualHost>