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: 404 NOT FOUND - /static/css/hai.css"

this is my project structure

setting.py

BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATIC_URL = '/static/'
TEMPLATE_DIRS=(
os.path.join(os.path.dirname(BASE_DIR),"static","templates"),
)
if DEBUG:
  MEDIA_URL='/media/'
  STATIC_ROOT=os.path.join(os.path.dirname(BASE_DIR),"static","static-only")
  MEDIA_ROOT=os.path.join(os.path.dirname(BASE_DIR),"static","media")
  STATICFILE_DIRS=(
  os.path.join(os.path.dirname(BASE_DIR),"static","static"),
  )

url.py

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

base.html

<link href="/static/css/bootstrap.min.css" rel="stylesheet">

and i tried to following links but i cant apply css https://www.youtube.com/watch?v=8t80DMAAps8

You're better off using the tutorial provided with the documentation to learn rather than using random youtube videos. — Ngenator
– Ngenator, Commented Oct 30, 2014 at 14:58

api55 · Accepted Answer · 2017-06-14 11:57:23Z

2

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.

edited Jun 14, 2017 at 11:57

api55

11.5k4 gold badges44 silver badges59 bronze badges

answered Jun 14, 2017 at 11:44

Faz

1082 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

madzohan · Accepted Answer · 2014-10-30 13:34:08Z

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">

score 0 · Accepted Answer · 2014-10-30 14:46:37Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related