stylesheet not loading from relative path in django

Question

Currently have a folder structure set up in django:

{appname}\templates\

{appname}\templates\assets\css\

but when I try to include something like <link rel="stylesheet" href="assets/css/bootstrap.css" /> in my templates in {appname}\templates\, it's not loading for whatever reason; I can load directly from twitter, but I'd prefer to keep relative paths if possible.

Why might this not work? If it's any clue, the subfolders in PyCharm are appearing as light grey, not sure why that is happening either.

edit: okay so I read up here on how to set up static files, and have set up a static directory under my main project folder, with a css folder underneath that.

I updated settings.py to include:

# Absolute path to the directory static files should be collected to.
# Don't put anything in this directory yourself; store your static files
# in apps' "static/" subdirectories and in STATICFILES_DIRS.
# Example: "/home/media/media.lawrence.com/static/"
STATIC_ROOT = ''

# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'

# Additional locations of static files
import os.path

STATICFILES_DIRS = (
    os.path.dirname(__file__).replace('\\','/'),
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
)

and then attempted to add

<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.css" />

to my html file, but it's not loading -- what am I doing wrong here?

Aidan Ewen · Answer 1 · 2013-02-14T07:27:11.237

1

You want to keep your css in a folder called static in the root of you app. Then makes sure you have django.contrib.staticfiles incluced included in INSTALLED_APPS (within your settings.py). Now when you run python manage.py runserver, you're static files will be available at localhost:8000/static/ (this is defined by the STATIC_URL setting - which defaults to static/).

You'll need to make sure that you're using a RequestContext object in your view. This ensures that variables from settings.py (such as STATIC_URL) are available in the template -

def your_view(request):
    #...
    return render_to_response('page.html', context_data, context_instance=RequestContext(request))

(this is handled for you if you use the new render() shortcut instead of render_to_response)

If you're serving files in a production environment then you use the python manage.py collectstatic command to move all your static files (that's anything in a folder called static/ in the root of your app, plus anything in your STATICFILES_DIR), to the folder defined by STATIC_ROOT. Then have your webserver serve these files at STATIC_URL (this isn't handled by django, and in fact the django docs seem to reccomend that you don't even use the same webserver that's serving the django app).

You can put your static files anywhere you want, and have django manage them, simply include the location of the directory in the STATICFILES_DIR tuple.

Have a look at the docs on serving static files. (I've assumed you're using django 1.4)

edited Feb 14 '13 at 07:27

answered Feb 14 '13 at 06:39

Aidan Ewen

13,049
8
63
88

Per the [Django directory structure](http://stackoverflow.com/questions/11216829/django-directory-structure/11222631) link above, I was trying to use one centralized static directory that was app-agnostic -- will `STATIC_URL` not work in that context? – fox Feb 14 '13 at 06:42
STATIC_URL is where the files are served from, it's not where you put them. You put them in a directory called static (or else one of the directories defined in your STATICFILES_DIRS), then (in a production environment only), you move them all to one place (STATIC_ROOT) using the collectstatic command. – Aidan Ewen Feb 14 '13 at 06:45
how would I link to these from template pages? According to the [djangoproject page](https://docs.djangoproject.com/en/dev/howto/static-files/), I should be doing something like ``, but when I try this it doesn't work. – fox Feb 14 '13 at 06:47
Your settings.py looks right. Have you created a directory called images? hi.jpg should be at /path/to/yourapp/static/images/hi.jpg – Aidan Ewen Feb 14 '13 at 06:52
in this case I'm trying to load `bootstrap.css` -- I have a folder under my project titled `static\css\` with that file inside. And then when I try to load it, it doesn't work. – fox Feb 14 '13 at 06:55
In PyCharm, I added a watch for `STATIC_URL` and when it gets to loading the html page associated with the CSS load, it tells me that the variable is undefined... – fox Feb 14 '13 at 06:56
You need your static directory in to be in the root of your app - that's the same level as your `__init__.py` file. (It sounds like you might have it a level up from that). – Aidan Ewen Feb 14 '13 at 06:57
Hmm, I tried moving it, but no dice -- for some reason it is looking for the file off of the url in my `urls.py` file: `[14/Feb/2013 01:02:13] "GET /accounts/login/css/bootstrap.css HTTP/1.1" 404 2205` – fox Feb 14 '13 at 07:03
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/24494/discussion-between-aidan-ewen-and-fox) – Aidan Ewen Feb 14 '13 at 07:06

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

You should not put media files in a template directory. Use a media directory (in this case static) per app so your settings file can find it, see Django directory structure?

See also Confusion in Django admin, static and media files

edited May 23 '17 at 11:49

Community

1
1

answered Feb 14 '13 at 06:05

Hedde van der Heide

21,841
13
71
100

okay, I've set up a media directory per that link, how should I have django pick up these `.css` files? – fox Feb 14 '13 at 06:12
I also added a static directory if they're supposed to go in there instead. – fox Feb 14 '13 at 06:13

stylesheet not loading from relative path in django

2 Answers2