how to use static folder in django for css and javascript?

Question

I am new to django framework .I created simple welcome page now i want to include css file in my project.i cant apply css file in project .i got error like \"NetworkError: 4

Answer 1

Django collect static automatically in STATIC_ROOT accessed by STATIC_URL. Put your "base" statics like bootstrap in your project package (project package is a dir with init.py) simpleform > static > bootstrap > copy here all tree dirs from bootstrap package: css, fonts, js. And store your application statics in signup > static > also create css, js dirs.

So if hai.css is one of basic css that you will use in your base.html put it to simpleform > static > css > hai.css.

settings.py

This is how you should make available project statics:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'simpleform/static'),
)

And for applications statics:

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

Also you have set a directory where django should store collected statics and uploaded media (and urls for accessing them). For example this is set it to src > static and src > media:

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

simpleform.urls

if settings.DEBUG:
    # static files (images, css, javascript, etc.)
    urlpatterns += patterns(
        '',
        url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
        'document_root': settings.MEDIA_ROOT}),

        url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
        'document_root': settings.STATIC_ROOT}),
)

template

{% load staticfiles %}

<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
<link href="{% static 'css/hai.css' %}" rel="stylesheet" media="screen">

Answer 2

Try doing a simple file like this

BASE_DIR = os.path.dirname(os.path.dirname(__file__))
OUTER_DIR = os.path.dirname(BASE_DIR)

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

STATIC_URL = '/static/'

TEMPLATE_DIRS=(
    os.path.join(OUTER_DIR, "static", "templates"),
)

MEDIA_URL='/media/'
STATIC_ROOT = os.path.join(OUTER_DIR, "static", "static-only")
MEDIA_ROOT = os.path.join(OUTER_DIR, "static", "media")

STATICFILE_DIRS=(
    os.path.join(OUTER_DIR, "static"),
)

Then, in your code use {% static %} template tag.

{% load staticfiles %}
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" />

Test this out with

DEBUG = True
TEMPLATE_DEBUG = DEBUG

If you turn off DEBUG then you need to add

if not settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

Not when it's on as you have it now.

The templates directory shouldn't be in the static folder though. In general the specific files needed for templates and static should be inside your Django project not separate.

Answer 3

I think it is just a spelling mistake. You need to put one S after STATICFILE Thus it should look like:

STATICFILES_DIRS=(
  os.path.join(os.path.dirname(BASE_DIR),"static","static"),
  )

Hope this will do.