use css in django 1.4 development

Question

I'm looking for a way to use a css file in django. I tried many things and I searched in many forums but I can't find my mistake. This is my code:

Directory structure:

/projecte
    manage.py
    /projecte
         settings.py
         url.py
         wsgi.py
         /static
             /css
                  estil.css
         /templates
             inici.html

    /principal
         models.py
         views.py
         forms.py

URL.py

from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns 
urlpatterns = patterns('',
    url(r'^$','principal.views.inici'),
    ...
)
urlpatterns += staticfiles_urlpatterns()

SETTINGS.py

RUTA_PROJECTE = os.path.dirname(os.path.realpath(__file__))
STATIC_ROOT = os.path.join(RUTA_PROJECTE,'static')
STATIC_URL = '/static/'

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

TEMPLATE_CONTEXT_PROCESSORS = ( 
    ...
'django.core.context_processors.static',    
)

INSTALLED_APPS = (    
    'django.contrib.staticfiles',   
    ...
'principal',  
) 

VIEWS.py

def inici(request):
tracks = Track.objects.all()
#print(len(tracks))

return render_to_response('inici.html',
    {'tracks':tracks},
    context_instance = RequestContext(request))

INICI.html

<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/estil.css">

when I enter the style does not work. I have no error but nothing happends. Thanks you for your help

Answer 1

I think the load staticfiles does the same.

The problem is you are putting it in a .py file? It should be in a template. (or that seems to be a typing error)

Ah I see, you miss the path to the template:

return render_to_response('inici.html'

should be:

return render_to_response('/principal/inici.html'

make a path templates in principal dir

and a subpath in templates called principal again:

principal/templates/principal

and put your template (.html) there

/projecte
    manage.py
    /projecte
         settings.py
         url.py
         wsgi.py
         /templates (dir for your project templates)
               /projecte
               /admin (e.g. if you want to override your admin templates, do it here)
    /var ( a dir used operationaly for all variable things... logs, files, db)
       /static
          /css
                 estil.css
       /media
       /logs
       /sqlite (for testing only, unless you use sqlite operational as well)
    /principal
         models.py
         views.py
         forms.py
         /templates (a dir for your application templates)
                   /principal
                             inici.html
         /media

and make sure he finds the templates... one second:

use in settings.py:

import os

SETTINGS_DIR = os.path.dirname(os.path.realpath(__file__))
BUILDOUT_DIR = os.path.abspath(os.path.join(SETTINGS_DIR, '..'))
STATIC_ROOT = os.path.join(BUILDOUT_DIR, 'var', 'static')
STATIC_URL = '/static_media/'
MEDIA_ROOT = os.path.join(BUILDOUT_DIR, 'var', 'media')
MEDIA_URL = '/media/'

TEMPLATE_DIRS = (
    os.path.join(SETTINGS_DIR, "templates"),
)
TEMPLATE_CONTEXT_PROCESSORS = (
 .....
    # Extra for django-staticfiles.
    'staticfiles.context_processors.static_url'
......
)

INSTALLED_APPS (
.....
    'django.contrib.staticfiles',   
    'yourProjectName',
    'yourAppName',    
    'staticfiles',
.....

I would put something like this in your remplate (.html) file:

<link rel="stylesheet"
      href="{{ STATIC_URL }}iamapps/iamapps.css"
      type="text/css"
      media="screen, projection" />

By the way where you put your templates dir depends.... in your app path if it belongs to your app (principal i guess), in your site dir if it's use to the whole site (projecte)

and in your views .py there are 2 ways to do it, the classical way: (e.g.)

def home(request, template='principal/home.html'):

    logger.debug("Home view called by user %s" % request.user)
    return render_to_response(template,{},context_instance=RequestContext(request))

or the class based views:

class HomeView(TemplateView):
    template_name = "principal/home.html"

If you wanna do it really nice, make a base template in your app template dir and extend this one, using in your inici.html:

{% extends 'prinicpal/base.html' %}

well before writing a complete tutorial here... it all depends on what you define and where you put it. Your question does not contain all the info to point out exactly where the error in your code is.

EDIT With your information added, I rebuild your project, and it works for me with this settings: with the same project structure as you gave in your question.

import os

RUTA_PROJECTE = os.path.dirname(os.path.realpath(__file__))
STATIC_ROOT = os.path.join(RUTA_PROJECTE,'static')
STATIC_URL = '/static/'
BUILDOUT_DIR = os.path.abspath(os.path.join(RUTA_PROJECTE, '..'))
DEBUG = False


TEMPLATE_DIRS = (
    os.path.join(RUTA_PROJECTE, "templates"),
)


TEMPLATE_CONTEXT_PROCESSORS = ( 
    'django.core.context_processors.debug',
    'django.core.context_processors.i18n',
    'django.core.context_processors.media',
    # Extra for django-staticfiles.
    'staticfiles.context_processors.static_url',

)


INSTALLED_APPS = (    
    'django.contrib.staticfiles',   
    'principal',
    'projecte',    
    'staticfiles',
) 

ROOT_URLCONF = 'projecte.urls'

EDIT (31-12-2012)

and do not forget to add in your project urls:

if settings.DEBUG:
    urlpatterns += patterns('',
        (r'', include('staticfiles.urls')),
    )

Answer 2

In my opinion you should try to use the static template tag. On the top of your html add this:

{% load staticfiles %}

and then your link to the css should be like this:

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