How to load CSS: Django Template, CSS and image
448 views
Skip to first unread message
yesnik
Jun 16, 2011, 1:09:24 PM6/16/11
to Django users
In this lesson I’ll show you how to make Django load your template
containing CSS and image.
1. Let’s create a project ‘girl’:
django-admin.py startproject girl
2. In ‘girl’ directory we create 2 new directories:
- templates
- media
3. Put index.html in ‘templates’ directory.
------ index.html ------
<html>
<head>
<link rel="stylesheet" href="/media/css/style.css" type="text/
css" />
</head>
<body>
<h1>If this text RED, then CSS loaded successfully!</h1>
<img src="/media/images/01.jpg" />
</body>
</html>
---------------------------
4. In ‘media’ directory we create ‘css’ directory and put there
style.css.
------ style.css ------
p{color: red}
-----------------------
5. Also in ‘media’ directory we create ‘images’ directory and put
there 01.jpg
6. In directory ‘girl’ I changed settings.py:
------------ settings.py (only my changes) --------------
TEMPLATE_DIRS = ('C:/django/nik/girl/templates', )
----------------------------------------------------------------
Note: In TEMPLATE_DIRS path ‘girl’ is the name of our project.
7. In directory ‘girl’ we change urls.py:
------------ urls.py ----------------
from django.conf.urls.defaults import patterns, include, url
from django.conf import settings
urlpatterns = patterns('',
(r'^$', 'girl.views.index'),
)
# We're going to use the Django server in development,
# so we'll server also the estatic content.
if settings.DEBUG:
urlpatterns += patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve',
{'document_root':'./media/'}),
)
--------------------------------------
8. In directory ‘girl’ we create views.py:
------------ views.py --------------
from django.shortcuts import render_to_response
def index(request):
return render_to_response('index.html', )
--------------------------------------
9. Then we execute command in shell:
manage.py syncdb
10. At last let’s start Django server:
manage.py runserver
11. Open your browser and go to: http://127.0.0.1:8000/
And you’ll see red text and pic.
containing CSS and image.
1. Let’s create a project ‘girl’:
django-admin.py startproject girl
2. In ‘girl’ directory we create 2 new directories:
- templates
- media
3. Put index.html in ‘templates’ directory.
------ index.html ------
<html>
<head>
<link rel="stylesheet" href="/media/css/style.css" type="text/
css" />
</head>
<body>
<h1>If this text RED, then CSS loaded successfully!</h1>
<img src="/media/images/01.jpg" />
</body>
</html>
---------------------------
4. In ‘media’ directory we create ‘css’ directory and put there
style.css.
------ style.css ------
p{color: red}
-----------------------
5. Also in ‘media’ directory we create ‘images’ directory and put
there 01.jpg
6. In directory ‘girl’ I changed settings.py:
------------ settings.py (only my changes) --------------
TEMPLATE_DIRS = ('C:/django/nik/girl/templates', )
----------------------------------------------------------------
Note: In TEMPLATE_DIRS path ‘girl’ is the name of our project.
7. In directory ‘girl’ we change urls.py:
------------ urls.py ----------------
from django.conf.urls.defaults import patterns, include, url
from django.conf import settings
urlpatterns = patterns('',
(r'^$', 'girl.views.index'),
)
# We're going to use the Django server in development,
# so we'll server also the estatic content.
if settings.DEBUG:
urlpatterns += patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve',
{'document_root':'./media/'}),
)
--------------------------------------
8. In directory ‘girl’ we create views.py:
------------ views.py --------------
from django.shortcuts import render_to_response
def index(request):
return render_to_response('index.html', )
--------------------------------------
9. Then we execute command in shell:
manage.py syncdb
10. At last let’s start Django server:
manage.py runserver
11. Open your browser and go to: http://127.0.0.1:8000/
And you’ll see red text and pic.
Tim Shaffer
Jun 16, 2011, 3:03:22 PM6/16/11
to django...@googlegroups.com
Shouldn't you really be putting your js/css in your static directory?
Check out the docs for managing static files:
https://docs.djangoproject.com/en/1.3/howto/static-files/
Check out the docs for managing static files:
https://docs.djangoproject.com/en/1.3/howto/static-files/
Reply all
Reply to author
Forward
0 new messages