A simple example of Django and CSS
The recommended approach has changed again (from at least Django 1.5 I think).
At the top of your template put:
{% load staticfiles %}
Then, using the same directory structure (myapp/static/myapp/style.css
):
<link rel="stylesheet" href="{% static 'myapp/style.css' %}" />
Source
For the examples you pointed at to work, your static files need to be in a location accessible to Django's built-in staticfiles
app.
There are a couple steps to make this happen:
First, within your project directory (ie beside your manage.py
file), you'll need to create a directory to hold your static files. Call it "static_files".
Next, you'll need to let Django know to look in that directory, by specifying it in the list of STATICFILES_DIRS
within your settings.py
file.
Something like this:
STATICFILES_DIRS = [
'/full/path/to/your/project/static_files/',
]
Within that static_files
directory, you can create whatever structure you want, so that is where your css
and js
directories could go.
After that, you should be able to use the {{ STATIC_URL }}
tag in your templates to get access to the base URL of your static files.
So, say, for example, you create project/static_files/css/base.css
, you would use it in your template like so:
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}/css/base.css" />
Hope that helps!
Edit
With the default settings for STATICFILES_FINDERS
, Django should automatically serve up any files from directories listed in your STATICFILES_DIRS -- see the docs for details.
If this doesn't work, some things to check:
- Have you edited your
STATICFILES_FINDERS
setting to something other than the default? - Is
django.contrib.staticfiles
in your list ofINSTALLED_APPS
insettings.py
? - Are you using Django's built-in server (
python manage.py runserver
)? - Do you have
DEBUG = True
in yoursettings.py
? If not, you'll need to either set it toTrue
or use theinsecure
option (python manage.py runserver --insecure
). When going to production, check out thecollectstatic
command.
If you follow django's guidelines, you can simplify your life greatly.
In your sample code, inside your application directory, create a folder called static. Inside this folder, place your css files.
Example:
$ django-admin.py startproject myproject
$ cd myproject
myproject$ python manage.py startapp myapp
myproject$ mkdir myapp/static
myproject$ cd myapp/static
myproject/myapp/static$ nano style.css
In your templates:
<link rel="stylesheet" href="{{ STATIC_URL }}style.css" />
Make sure you add myapp
to the INSTALLED_APPS
list in settings.py
. Now when you use the built-in development server, your style sheet will be rendered correctly.
Django searches for a static
directory inside installed applications by default, and with current versions of django, static files are enabled by default.
The Django example has the path
my_app/static/my_app/myimage.jpg
which is a little confusing if your app and project have the same name.
This is recommended because when you run collectstatic
to gather all your static files, files with the same name will be overwritten. If you have a file called myimage.jpg
in another application, it will be overwritten. Giving the application name inside the static directory will prevent this, because the exact directory structure will be replicated inside your STATIC_ROOT
directory.
A simple example to illustrate the point. If you have a django project with two apps, like this:
.
├── assets
├── manage.py
├── myapp
│ ├── __init__.py
│ ├── models.py
│ ├── static
│ │ └── myapp
│ │ └── test.txt
│ ├── tests.py
│ └── views.py
├── myproj
│ ├── __init__.py
│ ├── __init__.pyc
│ ├── settings.py
│ ├── settings.pyc
│ ├── urls.py
│ └── wsgi.py
└── otherapp
├── __init__.py
├── models.py
├── static
│ └── otherapp
│ └── test.txt
├── tests.py
└── views.py
assets
is your STATIC_ROOT
. Now when you run collectstatic
:
.
├── assets
│ ├── myapp
│ │ └── test.txt
│ └── otherapp
│ └── test.txt
├── manage.py
├── myapp
│ ├── __init__.py
│ ├── __init__.pyc
│ ├── models.py
│ ├── static
│ │ └── myapp
│ │ └── test.txt
│ ├── tests.py
│ └── views.py
├── myproj
│ ├── __init__.py
│ ├── __init__.pyc
│ ├── settings.py
│ ├── settings.pyc
│ ├── urls.py
│ └── wsgi.py
└── otherapp
├── __init__.py
├── __init__.pyc
├── models.py
├── static
│ └── otherapp
│ └── test.txt
├── tests.py
└── views.py
You see it is creating the directories as well. In your templates you would now refer to each file with its "namespace" of the app: {{ STATIC_URL }}/myapp/test.txt