Search code examples
cssdjangostatic-filesdjango-staticfiles

Using static files with the django virtual server

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,
            }),
    )
Solution

  • 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",
)