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' %}">
Related
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.
Hi guys I'm new to django, now I'm facing problem that the already loaded bootstrap css template gave no effect on the page. I have read several post of this problem in this site, but none of it work. I use python 3.6.4 and django 2.0.
Here is my settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"), ]
settings.installed_apps :
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rango'
]
my index.html :
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<title>Rango</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.css" %}" />
the command prompt said :
[17/Feb/2018 20:06:14] "GET /static/css/bootstrap.css HTTP/1.1" 200 178152
When I copy paste all the bootastrap css style to the head it work
When I call an image from same static folder, it also can show the picture
<img src="{% static "images/alif.jpg" %}" width="500px" height="800px" alt="foto alif">
My debug set True and i use virtual environment
I also check on chrome developer tools>network>css. It said the css run
My folder structure:
tango
|
static
|
css
|
bootstrap.css
Can anyone help me to solve this?
i've figure out the problem, it was the False mimetype, so i add
import mimetypes
mimetypes.add_type("text/css", ".css", True)
and the problem is solved
Replace the static files loader in your index.html
your code:
{% load staticfiles %}
Replace with:
{% load static %}
Django static precompiler does not seem to be working with scss files for me. I already checked if i had the compiler installed and my settings for django are are follows
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'static_precompiler',
'cms',
]
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'static_precompiler.finders.StaticPrecompilerFinder',
)
STATIC_URL = '/static/'
STATIC_ROOT = "static"
and i am calling the same from django template as follows
{% load compile_static %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spacemailer</title>
{% block seo %}
{% endblock %}
<link rel="stylesheet" href="{% static 'style/main.scss' | compile %}" type="text/css" media="all" />
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
There are no errors whatsoever. The output is the same scss file with no compilations being made. Can someone point out what am i doing wrong with the same ? or some alternatives that will support compiling scss as well as coffee scripts
By default the compilation should be done at run time serving the template with
compilefilter.
{% static "js/alert.es6"|compile %}
Renders
<script type="application/javascript" src="/static/COMPILED/js/alert.js"></script>
If your using a different storage and STATIC_PRECOMPILER_DISABLE_AUTO_COMPILE is True compile using compilestatic before collectstatic
Verify the Compiler configuration
STATIC_PRECOMPILER_COMPILERS = (
('static_precompiler.compilers.SCSS', {
"executable": "/usr/bin/sass",
"sourcemap_enabled": True,
"compass_enabled": True,
"load_paths": ["/path"],
"precision": 8,
"output_style": "compressed",
}),
)
I'm having trouble sorting my static directory and linking css files through templates in html pages with django. I keep getting the error "Not Found: /CSS/bootstrap.min.css"
I know this is a problem with how my directory is set up in settings.py but I can't seem to fix the issue. Below is my code for settings.py and layout.html (the page i'm using the call the css file).
layout.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Testing {% block title %}{% endblock %}</title>
<link href="{% static 'css/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.10/howto/static-files/
STATIC_URL = 'C:/Users/Luke/Desktop/Capstone/CapstoneNotespool/capstonenotespool/capstonenotespool/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
You are almost there! You just need to add the correct static file directory to your STATICFILES_DIRS.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# STATIC_URL tells django the url path to use for all static files. It
# doesn't really have anything to do with your file locations on your
# computer.
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
# Add this line here.
os.path.join(BASE_DIR, "capstonenotespool", "static"),
]
I think You must check again your static url, I think you config be wrong.
Here is answer you looking for.
Example of tree file
And this is my config for this
STATIC_URL = '/static/'
if DEBUG:
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static", >"static-only")
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static", >"media")
STATICFILES_DIRS = (
os.path.join(os.path.dirname(BASE_DIR), "static", "static"),
)
I have read many posts about the topic and tried to follow all the suggestions (new to python here) but I am unable to get bootstrap to work in Django.
I have a project "myoffice" and an app "proposals" in it.
I have downloaded a css file and put it in following folder
django\bin\myoffice\proposals\static\bootstrap\bootstrap.min.css
I have made following changes to the settings.py
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')
STATICFILES_DIRS = (
os.path.join(
os.path.dirname(__file__),
'static',
)
STATIC_URL = 'proposals/static/'
and included static files in my template like this.
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
</head>
<body>
But it is still showing view without any formatting.
I figured it out. It was actually a stupid error. I discovered, I have to restart the webserver after adding css file to the static directory and making changes to the settings.py