Trouble accessing .css file with Django

Question

I'm just starting out with Django, using PyDev in AptanaStudio3. I used the helpful Django tutorials to build the backbone of my simple project. Now I am trying to use css for some basic formatting and coloring, but have spent quite a while struggling.

The html page is still showing up fine. It just isn't grabbing the css (404). I know this from the console:

[20/Mar/2013 12:41:51] "GET /signup/ HTTP/1.1" 200 306
[20/Mar/2013 12:41:51] "GET /signup/static/signup.css HTTP/1.1" 404 2750

My file structure:

Learning
- Learning
--- templates
----- 404.html
----- 500.html
--- _init.py
--- settings.py
--- urls.py
--- wsgi.py
- signup
--- static
----- signup.css
--- templates
----- signup
------- detail.html
------- index.html
------- results.html
----- __init__.py
----- admin.py
----- models.py
----- tests.py
----- urls.py
----- view.py
--- manage.py
--- sqlite.db
--- python

In settings:

STATIC_ROOT = ''
STATIC_URL = 'static/'
STATICFILES_DIRS = ('')
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

In my html template:

<html>
    <head>
        <title>User List</title>
        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}signup.css" />
...

In views.py:

def ip_address_processor(request):
    return {'ip_address': request.META['REMOTE_ADDR']}
def index(request):
    user_list = User.objects.order_by('name')[:5]
    template = loader.get_template('signup/index.html')
    context = RequestContext(
                             request,
                             {'user_list': user_list,},
                             [ip_address_processor])
    return HttpResponse(template.render(context))

Any insights?

Did you run ./manage.py collectstatic ? Django needs all static files to be collected in a directory to serve them using the test server. Also, be sure to set your STATIC_ROOT setting to an absolute and writable path, so that the files can effectively be collected. For more information, see the Django documentation on static files. Also, remember that in production environment, static files should be served directly by the HTTP server. — pistache
– pistache, Commented Mar 20, 2013 at 8:36
Also, your CSS file is retrived at the path /signup/static/signup.css, while your STATIC_URL is /static/. You need to make that path absolute, and not relative to your page. Either change to href="/{{ STATIC_URL }}signup.css", or use the {% static 'signup.css' %} template tag provided by the staticfiles library (better !). — pistache
– pistache, Commented Mar 20, 2013 at 8:43
@pistache (post1), No, I hadn't run that. I just did what you suggested, didn't fix it. I'll update the file structure in a second. — bhekman
– bhekman, Commented Mar 20, 2013 at 8:44
@pistache (post2) Brilliant! The STATIC_URL path was the problem. I made it absolute, and magic happened. Many thanks! (Also, if you make that comment a formal answer, I will happily accept it) — bhekman
– bhekman, Commented Mar 20, 2013 at 8:47
@pistache that is not correct, collectstatic is only for deployment, not development. — Burhan Khalid
– Burhan Khalid, Commented Mar 20, 2013 at 8:48

pistache · Accepted Answer · 2013-03-20 12:13:55Z

1

Your STATIC_URL is a relative path (static/), which means that all static files will be searched relative to the current page. Django's test server does not expect this behaviour, and so static URLs will not be matched, triggering the 404 error. You need to make that path absolute, and not relative to your page (/static/, for example)
When using Django's staticfiles system with the testserver, you need to collect your static files using ./manage.py collectstatic
I also strongly recommend using the {% static 'signup.css' %} syntax rather than {{ STATIC_URL }}signup.css . Note that if you use this alternate format, you need to include {% load static %} somewhere earlier in the file.

edited Mar 20, 2013 at 12:13

answered Mar 20, 2013 at 8:54

pistache

6,3211 gold badge32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pistache Over a year ago

This was a bit exaggerate from me. The Django documentation recommends using the staticfiles module, and in my humble opinion, as this is the standard way of doing it, you should do it this way. Of course it's the same result, but I like conventions and clarity.

pistache Over a year ago

By the way, your edit was a very good idea (especially because the error caused by the missing {% load staticfiles %} is not explicit at all). It got rejected by other users before I could accept it, which shows how many SO users are reviewing edits without looking. I'll add it myself, thanks.

Collectives™ on Stack Overflow

Trouble accessing .css file with Django

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related