Using static files with the django virtual server

Question

Questions exactly like this have been asked before, i've read them all and tried to make sense of the official django documentation on the subject but i'm still struggling to use static files on the virtual server. More specifically i'm just trying to get my template, Base.html, to use base.css.

My folder structure looks like this:

manage.py
static/CSS/base.css
VergeGreenITEvent_Website/settings.py
VergeGreenITEvent_Website/views.py ect
VergeGreenITEvent_Website/Webpage_Templates/Base.html

(no app folder at the moment, as I was following "The django book" to learn and hadn't gotten to that bit!)

The complete settings.py can be viewed here: http://pastebin.com/JB3mKRcJ

In my Base.html template I now have the code:

<head>
    <title>Verge Green IT</title>
    {% load static %}

    <link rel="stylesheet" href="{% static "CSS/base.css" %}" type="text/css" />
</head>

CSS still isn't being applied. enter image description here Could you help me figure out what i'm doing wrong? I'd be incredibly grateful.

I'm using the latest version of Django. (1.4)

urls.py :

from django.conf.urls import patterns, include, url
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
import views

urlpatterns = patterns('',

    url(r'^$', views.Home),

)

if settings.DEBUG:
    urlpatterns += staticfiles_urlpatterns() #this serves static files and media files.
    #in case media is not served correctly
    urlpatterns += patterns('',
        url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
            'document_root': settings.MEDIA_ROOT,
            }),
    )

STATIC_URL should be "/static/" I would avoid using caps in your directory naming, and please post your urls — Hedde van der Heide
– Hedde van der Heide, Commented Jun 14, 2012 at 13:01
@ArgsKwargs , thanks ive changed it to /static/. You mean the file urls.py? okay! but i'm not sure it will tell you much? The correct view is loaded fine and the html is all there, its just got no styling. — Holly
– Holly, Commented Jun 14, 2012 at 13:07
In your settings after STATICFILES_DIRS = ( ... ) add print STATICFILES_DIRS, what does it show when you run the project. In your template what is the link that {% static "CSS/base.css" %} generates? — Hedde van der Heide
– Hedde van der Heide, Commented Jun 14, 2012 at 13:55
If you're using the new django project layout where settings is in a sub directory of the project, you need to use @noirbizarre his PROJECT_ROOT definition (using '..' to go up one dir) — Hedde van der Heide
– Hedde van der Heide, Commented Jun 14, 2012 at 13:58
You cant use django filters in style sheets like that, you'll have to use hard coded paths or browse stackoverflow for dynamic style sheet solutions — Hedde van der Heide
– Hedde van der Heide, Commented Jun 14, 2012 at 16:12

Hedde van der Heide · Accepted Answer · 2012-06-14 13:12:36Z

3

If you're using Django 1.4 then I would use the static tag:

{% load static %}

<link rel="stylesheet" href="{% static "CSS/base.css" %}" type="text/css" />

You probably need this in your urls too, in development files are served via django

if settings.DEBUG:
    urlpatterns += staticfiles_urlpatterns() #this serves static files and media files.
    #in case media is not served correctly
    urlpatterns += patterns('',
        url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
            'document_root': settings.MEDIA_ROOT,
            }),
    )

Also in your settings it's common practice to avoid hardcoding locations, here's an example (by the way do you have the static filefinders in your settings?

PROJECT_ROOT = path.dirname(path.abspath(__file__)) #gets directory settings is in

STATIC_ROOT = path.join(PROJECT_ROOT,'static-root')
# this folder is used to collect static files in production. not used in development

STATIC_URL =  "/static/"

STATICFILES_DIRS = (
    ('', path.join(PROJECT_ROOT,'static')), #store site-specific media here.
)

# List of finder classes that know how to find static files in
# various locations.
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

TEMPLATE_CONTEXT_PROCESSORS = (
    # other processors...
    "django.core.context_processors.static",
)

edited Jun 14, 2012 at 13:12

answered Jun 14, 2012 at 13:07

Hedde van der Heide

22.5k14 gold badges74 silver badges101 bronze badges

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

8 Comments

Holly Over a year ago

Thanks you for answering! first question- is that bit of url.py you posted intended to replace the definition of urlpatterns i already have (now posted above)? Also i get the error "name 'settings' is not defined for that bit of code you posted.. I don't think i have filefinders in my settings, you can see the complete settings.py file here: pastebin.com/R8bKXkGB . I thought for testing purposed it might be easier to hardcode locations and then change once i know i had the folder structure right but i will try going through the settings you posted now..

Holly Over a year ago

Oh actually i do have both of those finders.

Hedde van der Heide Over a year ago

No those urlpatterns can be appended at the bottom of your urls file. At the top of the urls file add from django.conf import settings

Holly Over a year ago

Thanks so much for helping. I made all the changes to settings that you had in your example code and it seems to be allright but i'm still getting an error in urls.py, after importing settings - "name 'staticfiles_urlpatterns' is not defined"

Hedde van der Heide Over a year ago

You need to import functions before you can use them, so add from django.contrib.staticfiles.urls import staticfiles_urlpatterns at the top

|

noirbizarre · Accepted Answer · 2012-06-16 08:11:30Z

0

You should write your settings.py like that:

import os
PROJECT_ROOT = os.path.abspath(os.path.join(os.path.dirname(__file__), '..'))

STATIC_URL = '/static/'  # Should be root relative or absolute

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

# Where your static files will be collected with colletstatic command
# I use it only in deployed configuration with DEBUG=False
# Need to be outside STATICFILES_DIR
STATIC_ROOT = '/var/www/your.site'

Just to be sure, check with Firebug or webkit debugger that CSS is loaded.

Remember that Django won't serve your static files if settings.DEBUG == False.

edited Jun 16, 2012 at 8:11

answered Jun 14, 2012 at 13:12

noirbizarre

3,4291 gold badge32 silver badges21 bronze badges

6 Comments

Chris Pratt Over a year ago

Don't add STATIC_ROOT to STATICFILES_DIRS. That's not correct, and you shouldn't be recommending it. STATIC_ROOT is only for the output of collectstatic in production. It shouldn't even exist in development.

Chris Pratt Over a year ago

I'm using STATIC_ROOT as generic name for "the directory that you set STATIC_ROOT to", which pretty much always "static". Don't add the same directory to STATICFILES_DIRS. That's my point.

noirbizarre Over a year ago

I don't understand: I don't do that anywhere. It's just an exemple showing howto to declare STATICFILES_DIRS and STATIC_URL. You read STATIC_ROOT instead of PROJECT_ROOT: I use it to have easy absolute paths declaration.

Hedde van der Heide Over a year ago

You are doing that because in your staticfiles_dirs tuple PROJECT_ROOT, 'static' results in the same location

noirbizarre Over a year ago

I never set STATIC_ROOT to the same directory. I edited my response to reflect that.

|

Collectives™ on Stack Overflow

Using static files with the django virtual server

2 Answers 2

8 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related