Importing Static files to template with Django

Question

I'm having trouble loading my CSS file into my HTML template. Below are the invovled files I'm working with. Can anyone see why the CSS wouldn't be loading?

settings.py

BASE_DIR = os.path.dirname(os.path.abspath(__file__))

STATIC_ROOT = 'staticfiles'

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

words.html

{% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'hello/words.css' %}" />

urls.py

urlpatterns = patterns('',
    url(r'^
    url(r'^Words', hello.views.index, name='index'),
    url(r'^db', hello.views.db, name='db'),
    url(r'^Add', hello.views.create, name='create'),
    url(r'^admin/', include(admin.site.urls)),
)

urlpatterns += staticfiles_urlpatterns()

words.css

 .pri {
     color: blue;
 }, hello.views.index, name='index'),

Project Structure

murmurwall/
├── Procfile
├── README.md
├── hello
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── __pycache__
│   │   ├── __init__.cpython-34.pyc
│   │   ├── admin.cpython-34.pyc
│   │   ├── forms.cpython-34.pyc
│   │   ├── models.cpython-34.pyc
│   │   └── views.cpython-34.pyc
│   ├── admin.py
│   ├── admin.pyc
│   ├── forms.py
│   ├── forms.pyc
│   ├── management
│   │   └── commands
│   │       ├── CSV
│   │       │   └── Pretty\ Little\ Liars.csv
│   │       ├── __pycache__
│   │       │   └── update_words.cpython-34.pyc
│   │       └── update_words.py
│   ├── models.py
│   ├── models.pyc
│   ├── static
│   │   └── hello
│   │       └── words.css
│   ├── templates
│   │   ├── add_word.html
│   │   ├── base.html
│   │   ├── db.html
│   │   └── words.html
│   ├── tests.py
│   ├── views.py
│   └── views.pyc
├── manage.py
├── murmurwall
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── __pycache__
│   │   ├── __init__.cpython-34.pyc
│   │   ├── settings.cpython-34.pyc
│   │   ├── urls.cpython-34.pyc
│   │   └── wsgi.cpython-34.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── static
│   │   └── humans.txt
│   ├── urls.py
│   ├── urls.pyc
│   ├── wsgi.py
│   └── wsgi.pyc
├── requirements.txt
├── runtime.txt
└── staticfiles
    ├── admin
    │   ├── css
    │   │   ├── base.css
    │   │   ├── changelists.css
    │   │   ├── dashboard.css
    │   │   ├── forms.css
    │   │   ├── ie.css
    │   │   ├── login.css
    │   │   ├── rtl.css
    │   │   └── widgets.css
    │   ├── img
    │   │   ├── changelist-bg.gif
    │   │   ├── changelist-bg_rtl.gif
    │   │   ├── default-bg-reverse.gif
    │   │   ├── default-bg.gif
    │   │   ├── deleted-overlay.gif
    │   │   ├── gis
    │   │   │   ├── move_vertex_off.png
    │   │   │   └── move_vertex_on.png
    │   │   ├── icon-no.gif
    │   │   ├── icon-unknown.gif
    │   │   ├── icon-yes.gif
    │   │   ├── icon_addlink.gif
    │   │   ├── icon_alert.gif
    │   │   ├── icon_calendar.gif
    │   │   ├── icon_changelink.gif
    │   │   ├── icon_clock.gif
    │   │   ├── icon_deletelink.gif
    │   │   ├── icon_error.gif
    │   │   ├── icon_searchbox.png
    │   │   ├── icon_success.gif
    │   │   ├── inline-delete-8bit.png
    │   │   ├── inline-delete.png
    │   │   ├── inline-restore-8bit.png
    │   │   ├── inline-restore.png
    │   │   ├── inline-splitter-bg.gif
    │   │   ├── nav-bg-grabber.gif
    │   │   ├── nav-bg-reverse.gif
    │   │   ├── nav-bg-selected.gif
    │   │   ├── nav-bg.gif
    │   │   ├── selector-icons.gif
    │   │   ├── selector-search.gif
    │   │   ├── sorting-icons.gif
    │   │   ├── tooltag-add.png
    │   │   └── tooltag-arrowright.png
    │   └── js
    │       ├── LICENSE-JQUERY.txt
    │       ├── SelectBox.js
    │       ├── SelectFilter2.js
    │       ├── actions.js
    │       ├── actions.min.js
    │       ├── admin
    │       │   ├── DateTimeShortcuts.js
    │       │   └── RelatedObjectLookups.js
    │       ├── calendar.js
    │       ├── collapse.js
    │       ├── collapse.min.js
    │       ├── core.js
    │       ├── inlines.js
    │       ├── inlines.min.js
    │       ├── jquery.init.js
    │       ├── jquery.js
    │       ├── jquery.min.js
    │       ├── prepopulate.js
    │       ├── prepopulate.min.js
    │       ├── timeparse.js
    │       └── urlify.js
    ├── hello
    │   └── words.css
    └── humans.txt

`href="{% static 'hello/words.css' %}"`, hello should be a folder where your words.css is. And also, show us your file structure. — Sachi Tekina, Mar 27 '15 at 01:43
did u checked css in your html page itself. whether it is working fine there — the-run, Mar 27 '15 at 10:16

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

Your STATIC_ROOT = 'staticfiles' need to be the absolute path to the static files. For example STATIC_ROOT = os.path.join(PROJECT_ROOT, STATIC_URL.strip("/")). This might have to be changed for deployment. An example i use for openshift: if 'OPENSHIFT_REPO_DIR' in os.environ: STATIC_ROOT = os.path.join(os.environ.get('OPENSHIFT_REPO_DIR'), 'wsgi', 'static') else: STATIC_ROOT = os.path.join(PROJECT_ROOT, STATIC_URL.strip("/"))

See also django static static url static root

edited May 23 '17 at 11:50

Community

1
1

answered Mar 26 '15 at 23:50

Sebastian Schmidt

11
2

I changed my STATIC_ROOT to os.path.join(BASE_DIR, STATIC_URL.strip("/")), didn't seem to do the trick. :( – Mar 27 '15 at 01:20
can you post the full folder structure off your app? – Sebastian Schmidt Mar 27 '15 at 10:12
posted the project structure – Mar 27 '15 at 16:55
look in the rendered html source where the css link goes to see where it is looking for it. It should also give a 404 output on the manage.py runserver. – Sebastian Schmidt Mar 28 '15 at 23:04
nothing css related gets added to the rendered HTML when I view it in browser. it also doesn't throw a 404........ – Mar 30 '15 at 17:21

Importing Static files to template with Django

1 Answers1