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

You have HTML inside INICI.py? Where does INCI.py came from? How are you running the development server? Where are your templates located in the structure? — César, Dec 17 '12 at 16:51
I editted it into .html, probably typing error. But where did you put your templates dir? (and the .html file) — michel.iamit, Dec 17 '12 at 17:49
if he doesn't find the css the browser does not give an error (at least if you don't look at debug messages). You can also look at the source of your page and see what he made of the path and see if that's correct. If it's not correct: adjust the settings, see my answer for an example of where to put things ... (but many flavours available...) — michel.iamit, Dec 18 '12 at 13:45
I've already put the templates dir and de locate of the inici.html. Sorry for the mistake and thanks for your time! — user1781245, Dec 19 '12 at 14:38
See my edit, I used your dir structure and got it working with the settings.py file, added after the ** EDIT ** — michel.iamit, Dec 22 '12 at 16:05

score 1 · Answer 1 · answered Dec 17 '12 at 16:51

1

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" %}" />

answered Dec 17 '12 at 16:51

dastergon

517
5
9

I've fixed it! I did not know I had to run this in the terminal: python manage.py collectstatic. Thank you all for your help! – user1781245 Jan 15 '13 at 13:12

michel.iamit · Answer 2 · 2012-12-31T12:07:19.267

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')),
    )

Thanks for your help michel but Django cant found de module 'django_extensions' and de context processor 'staticfiles.context_processors.static_url' — user1781245, Dec 20 '12 at 15:17
I put all my code like you say and I don't know what more I need to do! I seems a really simple things but it doesn't work. All the path to the file look good... — user1781245, Dec 20 '12 at 15:32
Sorry, forget about django_extensions... i meant this package: django-staticfiles to be found here: http://pypi.python.org/pypi/django-staticfiles/ — michel.iamit, Dec 22 '12 at 15:58

use css in django 1.4 development

2 Answers2

Linked