I have spent the last few days figuring out how to include an css file into a Django template. I still did not succeed so am hoping someone can help me out.
I have the following settings:
--settings.py--
MEDIA_ROOT = ''
MEDIA_URL = ''
STATIC_ROOT = ''
STATIC_URL = '/static/'
I have not set anything in STATICFILES_DIRS() either.
--urls.py--
urlpatterns = patterns('', (r'^$', 'reviewsite.views.my_homepage_view'),)
urlpatterns += staticfiles_urlpatterns()
--views.py--
def my_homepage_view(request):
return render_to_response('test.html', context_instance=RequestContext(request))
--test.html template--
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style.css"/>
--source code localhost--
<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
According to the Django documentation it seems that I have set everything correctly, but the css style is still not applied. The static folder is in the correct place (C:reviews/reviewsite/static) where the rest of my apps also reside. Even if I hardcode the style.css location (C:reviews/reviewsite/static/css/style.css) in the test.html template the css style is not applied. I have checked the style.css and it works without Django.
Any idea of what I am doing wrong?
This is how you call the files in the static
{% static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
settings.py
import os
import sys
PROJECT_ROOT = os.path.join(os.path.dirname(__file__), '..')
SITE_ROOT = PROJECT_ROOT
MEDIA_ROOT = os.path.join(SITE_ROOT, 'media')
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(SITE_ROOT, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
//create staticfiles folder
os.path.join(SITE_ROOT, 'staticfiles'),
)
Everyone, thanks for your help and sorry for the late reply. I tried your suggestions but it didn't work unfortunately. However, after some more time trying I got it working now. This is what worked for me:
--settings.py--
MEDIA_ROOT = ''
MEDIA_ROOT = ''
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')
STATIC_URL = 'http://localhost:8000/static/'
--urls.py--
urlpatterns = patterns('', (r'^$', 'reviewsite.views.my_homepage_view'),)
urlpatterns += patterns('',
url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT }), )
I now have placed the css file in the static folder in my apps directory. In the template I am using {{ STATIC_URL }}/style.css.
Related
Need to access static files from common directory as suggested in
https://docs.djangoproject.com/en/3.2/ref/contrib/staticfiles/
command, python manage.py collectstatic
copies to STATIC_ROOT but when referring to it in html, it throws error
Not Found: /static/teststatic/images/product-5.jpg
How to make it work with files from the STATIC_ROOT location ?
I have tried this and has worked
<img src="{% static 'teststatic/static/teststatic/images/product-5.jpg' %}" alt="Trulli" width="500" height="333">
urls.py
from django.urls import path
from . import views
app_name = 'teststatic'
urlpatterns = [
path('tstatic/', views.tstatic, name='tstatic'),
]
views.py
from django.shortcuts import render
# Create your views here.
def tstatic(request):
return render(request, 'tstatic.html', {})
settings.py
DEBUG = True
.
.
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
STATICFILES_DIRS = (
('testcss', os.path.join(BASE_DIR, 'testcss', 'static', 'testcss')),
('helpdesk', os.path.join(BASE_DIR, 'helpdesk', 'static', 'helpdesk')),
('teststatic', os.path.join(BASE_DIR, 'teststatic', 'static', 'teststatic')),
(os.path.join(BASE_DIR, 'staticfiles'))
)
STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.StaticFilesStorage'
tstatic.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="{% static 'teststatic/images/product-5.jpg' %}" alt="Trulli" width="500" height="333">
</body>
</html>
Error :
2021-04-27 12:42:47,744: Not Found: /static/teststatic/images/product-5.jpg
I am trying to access static files in browser but unable to access them. My static settings insettings.py are below
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
My urls.py
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', FrontPage.as_view()),
# url('', include(router.urls))
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
My folder structure
projectname
projectname
settings.py
urls.py
app1_name
static
bs4
css
cover.css
admin
templates
My template.html
<link href="/static/bs4/css/cover.css" rel="stylesheet">
The above link isn't loading the static file. I'm getting 404 on hitting above url. Please let me know where am I going wrong.
All you need is an update of your settings:
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [STATIC_DIR, ]
Use: <link href="{% static 'bootstrap/css/cover.css' %}" rel="stylesheet">
Make sure to use {% load static %} at the top of your template.html and you are all set.
I've created django project and in settings.py configured all the necessary assets
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
STATICFILES_DIRS = [
"~/<project_name>/static",
]
I have all of my static files based in the folder static in the project directory. Inside this folder I have css, js, images folders accordingly. In my base template (that is inherited by others) called base.html I have template tag {% load staticfiles %}. I can't figure out why the page still loads without any static attached, because everything seems to be made properly.
Change to this (more in STATICFILES_DIRS setting):
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
And inside your templates fetch static files like this (Django 1.10):
{% load static %}
<link rel="stylesheet" href="{% static 'css/css-file.css' %}">
I know this is a repeated question, but I am unable to find any answers that would make the static files run for me. I am using Django version: 1.10.5 and python version: 3.4.3...
I have read the official documentation too, no luck in solving my problem...
The following is my project structure:
myproject4
/myapp/
/__pycache__/
/migrations/
__init__.py
admin.py
apps.py
models.py
tests.py
views.py
/myproject/
/__pycache__/
__init__.py
settings.py
urls.py
wsgi.py
/static/
/css/
hpage.css
robot.css
/images/
-- Images --
/js/
-- JavaScript Files --
/template/
hello.html
manage.py
Here's what all I have tried:
{% load staticfiles %}
for my hello.html page, right at the top,
<link href="{%static 'css/hpage.css' %}" rel="stylesheet" />
<link href="{%static 'css/robot.css' %}" rel="stylesheet" />
for linking my CSS files in hello.html (it makes use of 2 CSS files).
I have tried {{ STATIC_URL }} way of doing the same and the necessary stuffs I am supposed to do too, but found no luck there.
When I use the <style> </style> tags, the css works perfectly, but that's not what I am looking for.
settings.py:
DEBUG = False
ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp',
]
#Other stuffs go here
STATIC_ROOT = 'staticfiles'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
'/static/',
)
urls.py:
from django.conf.urls import url,include
from django.contrib import admin
from myapp.views import hello,user_profile
from myapp import views
admin.autodiscover()
urlpatterns = [
url(r'^admin/$', admin.site.urls, name='admin'),
url(r'^hello/$', views.hello, name='hello'),
url(r'^hello/user_profile/', views.user_profile, name='user_profile'),
]
views.py:
from django.shortcuts import render, render_to_response
from django.template.context import RequestContext
def hello(request):
return render_to_response('hello.html')
def user_profile(request):
return render_to_response('user_profile.html')
Kindly guide me where I am going wrong...
Thank You in advance :)
EDIT: In my settings.py file, DEBUG = False because I have a file called 404.html that gives out the error page for me as default.
These are the steps I have followed to include CSS to my Django Project:
First, I have added in the settings.py:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static")
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
Second in the urls.py (app folder)"
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Copied all CSS files in the Project folder (same level with manage.py)
Include/Declare CSS in a template (I included mine in base.html)
<head>
{% load static %}
<link rel="stylesheet" href="{% static 'assets/css/bootstrap-theme.css' %}" media="screen" >
<link rel="stylesheet" href="{% static 'assets/css/main.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
</head>
Run:
python manage.py collectstatic
and reload/restart the browser or delete cache.
Make changes to urls.py like bellow. and look at documentation for your ref.
from django.conf.urls.static import static
urlpatterns = [
rl(r'^admin/$', admin.site.urls, name='admin'),
url(r'^hello/$', views.hello, name='hello'),
url(r'^hello/user_profile/', views.user_profile, name='user_profile'),
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Django is not loading my static files. However it is loading my templates which are in the static folder. Also chrome is not seeing the static files either I'm not even getting a 404 error and yes they are linked in the html...but they are not showing up in the network panel
Heres my settings.py file
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS =(
os.path.join(BASE_DIR, 'static'),
)
Here's my html
<head>
<title>MySite | Home</title>
<meta charset="UTF-8">
<link rel="stylesheet" type='text/css' src='css/normalize.css'>
<link href='http://fonts.googleapis.com/css?family=Questrial|Josefin+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" src='css/main.css'>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
Sorry I know this question has been asked multiple times and i've tried all those solutions with no luck. I've spent 2 days trying to figure this out
The approach I take with static files is basically what's outlined in the docs.
In local development, Django will serve static files automatically from the directory specified in STATIC_ROOT as long as django.contrib.staticfiles is in your INSTALLED_APPS and DEBUG = True
My project structure typically looks like this:
my_project/
some_app/
lib/
static/ <------- STATIC_ROOT - used in production. `collectstatic` collects here
static_assets/ <- STATICFILES_DIRS - used in local dev
css/
less/
js/
images/
templates/ <---- TEMPLATE_DIRS
manage.py
settings.py is typically:
INSTALLED_APPS = (
. . .
'django.contrib.staticfiles',
. . .
)
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static_assets'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates'),
)
Then in templates, you can again use the staticfiles app's template tags to build out paths to static files:
{% load static from staticfiles %}
<link rel="stylesheet" href="{% static 'css/normalize.css' %}" />
Also note that with <link> tags, you need to use the href property for the url instead of src.
In your setting.py file add this
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
create a folder in your app named static and in your template file add this {% load static %}