12

I'm having difficulty referencing static files in my templates. I am using Twitter Bootstrap and have the bootstrap files (css, img, js) sitting at mysite/static.

I have set the STATIC_URL, STATIC_ROOT and TEMPLATE_CONTEXT_PROCESSORS according to this tutorial. I have run ./manage.py collectstatic which copied 72 files over. I have also added the below template tag to my template (index.html) file but this hasn't worked.

{% load staticfiles %}
<link rel="stylesheet" href="{% static user_stylesheet %}" type="text/css" media="screen"/>

Any help on how to reference the files so that the bootstrap styling returns to the templates would be much appreciated!

Paolo
  • 20,112
  • 21
  • 72
  • 113
Jess
  • 1,749
  • 4
  • 16
  • 17

3 Answers3

20

It should be

{% load static %}

And then something like

<!-- path -->
<link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet" type="text/css">
<!--->

Update for Completeness

Folder Structure

  • proj
  • app1
  • app2
  • myproj_public
  • static
    • css
      • bootstrap.css
    • js
      • xyz.js

Settings File

STATIC_ROOT = os.path.join(os.path.abspath(
    os.path.join(PROJECT_ROOT, 'myproj_public', 'static')), '')

STATIC_URL = '/static/'
markwalker_
  • 12,078
  • 7
  • 62
  • 99
super9
  • 29,181
  • 39
  • 119
  • 172
  • Thanks. I have added this to the top of my index.html file but this hasn't worked. Is there something else I could have missed? – Jess Dec 24 '12 at 10:13
  • What does it say when you inspect your page in firebug (firefox) or developer tools (chrome). Do you have the css files in the right directory? – super9 Dec 25 '12 at 07:30
  • Thank you for your answer, I finally got it working after fixing the path to the static files. – Jess Dec 27 '12 at 22:09
  • Is this solution still current? I am using Django 1.8.6 and this is not working for me. My directory structure is very similar. – MadPhysicist Jan 23 '17 at 01:58
  • No, it seems out of date. https://docs.djangoproject.com/en/1.11/howto/static-files/ – Thismatters Jun 21 '17 at 00:54
5

Are you setting the user_stylesheet context variable in your view? You need to set that before you can pass it onto templates.

I usually just use the {{ static_url }} tag for doing this stuff, so my code for including bootstrap components would be like.

<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="{{ STATIC_URL }}bootstrap/js/jquery.js"></script>

Assuming that bootstrap folder is present inside static.

EDIT

For your case, to set user_stylesheet context variable, you'll need to do something like

dict["user_stylesheet"]= <path to your file>
#add other context variables you might have to
render_to_response(<your template name>, dict, context_instance=RequestContext(request))
ersran9
  • 968
  • 1
  • 8
  • 13
  • Thanks @ersran9. I haven't set the user_stylesheet context variable in views.py. This is all new territory at the moment so I'm not quite sure what to set it as. What would your user_stylesheet context variable read? – Jess Dec 23 '12 at 21:34
  • @Jess Edited the answer. Btw, if you are using static_url as I've shown, there is no need to set the user_stylesheet, setting the proper static_root and static_url in settings.py is enough – ersran9 Dec 23 '12 at 22:08
  • OK, thank you. I have set the static_root and static_url in settings.py and added the code as recommended by super9 below to the top of index.html but this hasn't worked. Is there anything else I could be doing wrong? – Jess Dec 24 '12 at 10:12
  • @Jess Try printing the `{{ STATIC_URL }}` in your template - check if it set to the right url. Once you confirm that, try requesting a file directly through the browser,ie: 127.0.0.1:8000//bootstrap/css/bootstrap.css to check whether `{{ STATIC_ROOT }}` is set properly – ersran9 Dec 24 '12 at 12:29
0

When you set static_root, for example:

STATIC_ROOT = os.path.join(BASE_DIR, "static_root/")

, all files are copied there, instead of in project_root/static. It is a new mechanism introduced in Django 1.3, to easy the static file processing: it will collect all files in each STATICFILES_DIR and all static dir under each installed app, so you copy them once in all.

Refer the css/js files with static_root path.

WesternGun
  • 11,303
  • 6
  • 88
  • 157