So I am working on a django datascience project tutorial from this guy's youtube channel: https://github.com/pyplane/django_with_data_science and I'm stuck at getting my static CSS file to apply to my html view.
here is my file structure:
So far, I've been able to get static_project/main.js to work fine but I cannot get the style.css file to work.
style.css
.test_blue_2 {
color:blue;
}
css_test.html
{% load static %}
<link rel='stylesheet' type='text/css' href={% static 'style.css' %}>
<style type = 'text/css'>
.test_blue_1 {
color:blue;
}
</style>
{% block content %}
<div class ='test_blue_1'>Blue text 1</div>
<div class ='test_blue_2'>Blue text 2</div>
{% endblock %}
This outputs Blue text 1 in blue and Blue text 2 remains black
Settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static_project'),
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn", "static_root")
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn", "media_root")
http://127.0.0.1:8000/static/style.css yields
.test_blue_2 {
color:blue;
}
here is my file structure:
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.
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'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"),
)
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
My 404.html page does not reference my finale.css file.
My directory structure
musicworld/
musicworld/
__pycache__
__int__.py
settings.py
urls.py
wsgi.py
feature/
__pycache__
migrations
static/
feature/
finale.css
templates/
feature/
about.html
detail.html
404.html
500.html
index.html
template.html
__init__.py
admin.py
models.py
tests
This is where in index.html I'm referencing the css
<link rel="stylesheet" type="text/css" href="{% static 'feature/finale.css' %}" />
But 404.html that extends index.htmlis not referencing the css
{% extends "index.html" %}
{% load staticfiles %}
{% block 404page %}
<div class="box">
<p class="box-message" data-dead-message="AAAAAHHHHHH!">Oh No! Something went wrong.Punish the developer by clicking here.</p>
</div>
<div class="robot">
<img src="" alt="Robot" />
</div>
{% endblock %}
static reference in settings.py
STATIC_URL = '/static/'
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
ALLOWED_HOSTS = ['*']
STATIC_ROOT = 'staticfiles'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
Both the index.htmland template.html are placed in the same folder and are properly referencing the css.Plus all the html pages in feature that are extending index.html are also referencing the css.But both 404.html and 500.htmlare not.