I created a simple project in Django but static files(CSS) not working.
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.portfolio),
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
HTML file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="{% static 'portfolio.css' %}">
</head>
<body>
<h1>hello world</h1>
</body>
</html>
picture of the project directory
blog is app and my_site is a project.
try adding
os.path.join(BASE_DIR, "my_site/static")
to STATICFILES_DIRS
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
os.path.join(BASE_DIR, "my_site/static")
]
OR
place the static folder in the root my_site folder
Related
I have tried everything suggested on the entire internet and stuck here for over 5 days
Here are my settings.py
STATIC_URL = '/static/'
# Add these new lines
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
I have a staticfile directory, i created with
python manage.py collectstatic
and I have all my css in that file
here are my urls
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('accounts.urls')),
]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Here are my app urls
from django.urls import path
from accounts.views import *
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('', SignUpView.as_view(), name='signup'),
path('otp/', OTPView.as_view(), name='otp'),
path('login/', LoginView.as_view(), name='login'),
path('home/<int:id>', HomeView.as_view(), name="home"),
path('logout/', UserLogout.as_view(), name="logout"),
]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
and here is my template base.html that I am inheriting in every other template
{% csrf_token %}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/User_Authentication/staticfiles/admin/css/responsive.css">
</head>
I am getting this error
Not Found: /User_Authentication/staticfiles/admin/css/responsive.css
[11/Jul/2022 12:05:51] "GET /User_Authentication/staticfiles/admin/css/responsive.css HTTP/1.1" 404 4211
Not Found: /User_Authentication/staticfiles/admin/css/responsive.css
[11/Jul/2022 12:05:51] "GET /User_Authentication/staticfiles/admin/css/responsive.css HTTP/1.1" 404 4211
Not Found: /User_Authentication/staticfiles/admin/css/responsive.css
[11/Jul/2022 12:06:31] "GET /User_Authentication/staticfiles/admin/css/responsive.css HTTP/1.1" 404 4211
Why am i still not able to use staticfiles
From the docs, static-files
{% load static %}
{% csrf_token %}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'admin/css/responsive.css' %}">
</head>
You need to load it first, the order of loading these three might have to be altered.
You can run the app, go to the page, inspect and find out exactly what url django translates this into.
You are basically asking django/jinja to dynamically convert this static path to the corresponding static url instead of hardcoding it.
Note: {% load static %} needs to be added in every template file that uses "{% static '...' %}". Just adding it in base.html or an equivalent file that other templates extend from is not going to work.
<meta charset="utf-8">
<title>Exam Page</title>
<link rel="stylesheet" href="../../../static/css/teststyle.css">
</head>
Im using this code in exam folder and i wanted to go to parent directory so i used ../../ but it is showing the below error
Not Found: /exam/static/css/teststyle.css
At the top of your template add {% load static %} and to add your css you can use {% static 'css/teststyle.css' %}.
{% load static %}
<meta charset="utf-8">
<title>Exam Page</title>
<link rel="stylesheet" href="{% static 'css/teststyle.css' %}">
</head>
In your main urls.py add
from django.conf import settings
from django.conf.urls.static import static
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
and in your settings.py add
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
I'm starting learn Django and I stop on one thing - static files.
I tried like its below make changes in seetings and html but it doesnt load on the website. Please help me !
**settings.py:**
STATIC_ROOT = '/PycharmProjects/django_kurs/filmyweb/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = ['django_kurs/filmyweb/static/',]
**filmy.html:**
{% load static %}
<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<title>Document</title>
<link rel="stylesheet" href="{% static 'moj.css' %}">
</head>
Thank You in advance !
The changes to the settings is not sufficient, you need to add the handler for static files to the urls.py:
# urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# …
]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Here we thus add views for the static and the media files (last line).
Note that Django does not serve static/media files on production. On production you typically configure nginx/apache/… to do this.
I am learning Django and while I was trying to load static CSS files, it did not show any output. When I run server I only get HTML as my output.
Here is my code
settings.py code
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
'bloodnepal/bloodnepal/static',
]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
{% load static %}
<meta charset="utf-8">
<title>Bloodnepal</title>
<link rel="stylesheet" href="{% static 'css_files/style.css' %}">
<link rel="stylesheet" href='{% static "css_files/link.css" %}'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fira Sans Extra Condensed' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Nanum Myeongjo' rel='stylesheet' type='text/css'>
</head>
</html>
url.py
from django.contrib import admin
from django.urls import path
from . import views #imported the views.py files here for our pipeline
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
path('admin/', admin.site.urls),
path('home/',views.home,name="Homepage"),
path('donate/',views.donate,name="Donatepage"),
path('organization/',views.organization,name="Organizationpage"),
path('getinvolved/',views.getinvolved,name="Getinvolvedpage"),
path('about/',views.about,name="AboutUspage"),
]
urlpatterns += staticfiles_urlpatterns()
If you store your CSS inside your project folder under "static" directory then the following code for settings.py should work:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_PATH = os.path.realpath(os.path.dirname(__file__))
....
STATIC_URL = '/static/'
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder'
]
I can load my HTML templates but can't load css. When I view the source code in my browser and access the css file from there it shows the error "Page not found (404)" 'css\index.css' could not be found
I have tried all the things from doc but I don't know what I'm missing. Does anyone know what changes I need to make so that the css loads properly?
Here are relevant files:
settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATES_DIR = os.path.join(BASE_DIR, "templates")
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'parking',
'DIRS': [TEMPLATES_DIR, ],
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
app urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index)
]
urls.py
from django.contrib import admin
from django.urls import path, include
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('parking.urls'))
]
urlpatterns +=staticfiles_urlpatterns()
this is my HTML file
<!DOCTYPE html>
{% load staticfiles %}
<html class="nojs html css_verticalspacer" lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'css/site_global.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/master_a-master.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" id="pagesheet"/>
<!-- IE-only CSS -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="{% static 'css/nomq_preview_master_a-master.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/nomq_index.css' %}" id="nomq_pagesheet"/>
<![endif]-->
<!-- Other scripts -->
<script type="text/javascript">
var __adobewebfontsappname__ = "muse";
</script>