Why is my static CSS not working in Django?

Question

I am having problem with my static CSS not working for my Django web app. I have followed the directions from the Django Static Link tutorial on handling static files, but it is still not working.

Settings

# Absolute path to the directory static files should be collected to.
# Don't put anything in this directory yourself; store your static files
# in apps' "static/" subdirectories and in STATICFILES_DIRS.
# Example: "/home/media/media.lawrence.com/static/"
STATIC_ROOT = '/Users/a9austin/Development/sites/AlphaSocks/src/static_root/'

# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'

# Additional locations of static files
STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
'/Users/a9austin/Development/sites/AlphaSocks/src/staticfiles'

)

view

#from django.http import HttpResponse
from django.shortcuts import render_to_response


def index(request):
return render_to_response('index.html')

index.html

<link rel="stylesheet" href="{{STATIC_URL}}css/style.css" type="text/css" media="screen" >

And my directory organization is

src->staticfiles->css->style.css

'What' is not working? How do you render your views, using render() or render_to_response()? Is static files context processor turned on in settings.py? — Jure C.
– Jure C., Commented Nov 19, 2012 at 1:06
Yes I am using render_to_response, I will update it with my view. It's not working by the css is not actually changing my html. — AustinT
– AustinT, Commented Nov 19, 2012 at 1:11
@OtskimanotSqilal Thank you for the reply, I just updated it with my STATICFILES_DIR, my css is still not showing up. — AustinT
– AustinT, Commented Nov 19, 2012 at 1:32
The way you configured STATICFILES_DIRS and STATIC_ROOT is incorrect. They cannot contain the same directories. Please refer to my answer for more info. — miki725
– miki725, Commented Nov 19, 2012 at 1:50

Kyle F. Hartzenberg · Accepted Answer · 2023-05-17 04:21:51Z

59

For Django to serve static files, you have to make sure you have a couple of settings.

STATIC_URL

This setting specifies what URL should static files map to under. You have that done already.

STATICFILES_DIRS

This specifies all the folders on your system where Django should look for static files. The idea is that you might have a couple of apps within your project, and each app might require a different set of static files. So for organizational purposes, each app might contain a static directory where it will store only its static files. So then Django has to have a way to know where those directories are. This is what this setting is for.

STATIC_ROOT

This setting specifies where Django will copy all the static files to and not where the static files are already at. The idea is that once you leave development into production, Django can't serve static files anymore due to issues I will not go here (it's in the article). However, for production, all static files should be in a single directory, instead of in many like specified in STATICFILES_DIRS. So this setting specifies a directory to which Django will copy all the static files from all files within STATICFILES_DIRS by running the following command:

$ python manage.py collectstatic

Please note this is only necessary once you go into production and also that the directory specified here cannot be the same as any directory specified in STATICFILES_DIRS.

Urls.py

In development for Django to serve your static files, you have to include the static URLs in your urls.py:

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

urlpatterns = ...

urlpatterns += staticfiles_urlpatterns()

Once you will complete all of the above things, your static files should be served as long as you have DEBUG = True. Out of the list above, you seem to only complete STATIC_URL. Also please note that all the steps I described above are in the docs you linked in your question (link). It might be a bit confusing in the beginning but if you read it a couple of times, it becomes clearer.

edited May 17, 2023 at 4:21

Kyle F. Hartzenberg

4,0863 gold badges18 silver badges42 bronze badges

answered Nov 19, 2012 at 1:48

miki725

27.9k17 gold badges109 silver badges122 bronze badges

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

5 Comments

AustinT Over a year ago

Thank you for the reply. Let me make sure I understand. So STATICFILES_DIR is actaully where the static files are. And STATIC_ROOT is where python will copy/handle them?

miki725 Over a year ago

Yes, but it will only copy them by running the manage.py command and it is only necessary for production. In development Django will look and serve static files located in any of the directories in STATICFILES_DIRS. Also I forgot to mention, in the view make sure you use RequestContext to be able to use {{ STATIC_URL }}. The answer by Kavanaugh Development shows that.

AustinT Over a year ago

Okay so when I called python manage.py collectstatic, it gives me an error. '"Your STATICFILES_DIRS setting is not a tuple or list; " django.core.exceptions.ImproperlyConfigured: Your STATICFILES_DIRS setting is not a tuple or list; perhaps you forgot a trailing comma?' I updated my post to what I have changed my root and dir. Please take a look. Thank again for helping me out

miki725 Over a year ago

Right. So your STATICFILES_DIRS is like ( 'string_here' ) which is not a tuple. Change that to ( 'string_here', ) which is a Python tuple.

miki725 Over a year ago

But again, for development you don't have to collect all the static files. Django will serve them from STATICFILES_DIRS directories directly...

Joshua Blue- Jack · Accepted Answer · 2021-02-03 15:23:07Z

14

Try clearing your cache. If you are using Google chrome go to your settings>clear browsing data> select clear cached images and files then click clear data

answered Feb 3, 2021 at 15:23

Joshua Blue- Jack

1411 silver badge2 bronze badges

Comments

Phil · Accepted Answer · 2021-08-12 11:58:13Z

5

For me it was changing

<link rel="stylesheet" href=" {% static '/css/style.css' %} ">

to

<link rel="stylesheet" type="text/css" href=" {% static '/css/style.css' %} ">

answered Aug 12, 2021 at 11:58

Phil

6768 silver badges21 bronze badges

Comments

David Mezza · Accepted Answer · 2021-11-10 13:11:56Z

5

Sometimes all it takes is just "Ctrl + F5"

A Total refresh of the page, does the trick.

Or Ctrl + Shift + R

edited Nov 10, 2021 at 13:11

answered Nov 9, 2021 at 11:19

David Mezza

2353 silver badges7 bronze badges

4 Comments

user17242583 Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Melanga Dissanayake Over a year ago

This solved the problem for me.

David Mezza Over a year ago

Am glad it did. Works every time for me

TylerH Over a year ago

This is the same answer as Raghav Rathi's from March 26th and Joshua Blue- Jack's from February 3rd.

Varidhi Deshpande · Accepted Answer · 2020-03-13 10:05:56Z

2

After doing all, setting DEBUG= True, python collectstatic, clearing cache, opening in incognito mode if the problem still exists copy your .css file into another new .css file in static folder, and then run collectstatic command. This worked out for me. I hope this will help you.

answered Mar 13, 2020 at 10:05

Varidhi Deshpande

213 bronze badges

Comments

kavdev · Accepted Answer · 2012-11-19 02:05:58Z

1

Adding RequestContext to the response should load the STATIC_URL variable into the template.

Try changing:

from django.shortcuts import render_to_response

def index(request):
    return render_to_response('index.html')

to:

from django.shortcuts import render_to_response
from django.template.context import RequestContext

def index(request):
    return render_to_response("index.html", context_instance=RequestContext(request))

Refer to the Django Documentation on Referring to static files in templates for more information.

answered Nov 19, 2012 at 2:05

kavdev

4994 silver badges14 bronze badges

Comments

IndieGameDev · Accepted Answer · 2021-03-26 19:46:45Z

1

If there is no problem in coding and no errors shown. Then you can do this this to try to solve the problem.

Clear your Cache:

If you are using Google chrome go to your settings --> clear browsing data --> select clear cached images and files then click clear data

edited Mar 26, 2021 at 19:46

IndieGameDev

2,9843 gold badges19 silver badges31 bronze badges

answered Mar 26, 2021 at 18:20

Raghav Rathi

3173 silver badges8 bronze badges

1 Comment

TylerH Over a year ago

This is the same answer as Joshua Blue- Jack's from February 3rd.

Divine · Accepted Answer · 2021-05-19 20:25:41Z

If this is happening to you in development mode, make sure you set DEBUG=True in your settings.py file. Also make sure that the MEDIA_URL and MEDIA_ROOT are set in your settings.py file like so :

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

And then in your main urls file myapp/urls.py you must have the following :

from django.conf.urls import url, include
from . import views
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    #Your url patterns here
]

urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

The staticfiles_urlpatterns() is used to serve static files in development mode.

Scott Eifel · Accepted Answer · 2022-04-16 07:33:48Z

0

I had to delete my staticfiles folder. It seemed like there was a similarly named file in it which was being read from or written to and this wasn't the one my app was pulling from for the site. After I ran 'collectstatic' again, it re-added the staticfiles folder and contents and is now working and updating properly.

answered Apr 16, 2022 at 7:33

Scott Eifel

811 silver badge3 bronze badges

Comments

Masuk Helal Anik · Accepted Answer · 2023-10-10 07:11:38Z

0

Nothing worked for me except these

I set these in project settings.

    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    STATIC_URL = '/static/'
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
    MEDIA_URL = '/media/'
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

And then in the url file I did this

    from django.urls import re_path
    from django.views.static import serve
    
    urlpatterns = [
        re_path(r'^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),
        re_path(r'^static/(?P<path>.*)$', serve,{'document_root': settings.STATIC_ROOT}),
    ]

answered Oct 10, 2023 at 7:11

Masuk Helal Anik

2,28624 silver badges31 bronze badges

Comments

Damian Zawadzki · Accepted Answer · 2022-05-22 08:31:58Z

-1

My solution may be silly, but maybe it will help someone. If you copy the line from the internet instead of typing it, make sure to adjust your quotation marks. Worked for me.

<link rel=”stylesheet” type="text/css" href="{% static 'styles.css' %}">

<link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">

answered May 22, 2022 at 8:31

Damian Zawadzki

11 bronze badge

Comments

TylerH · Accepted Answer · 2022-07-05 13:58:48Z

-5

There is an easy way if you feel that your CSS isn't working. If your project isn't way too huge then you can just make the CSS file in the same file as the HTML. And then run it.That way it will run for example

`

<head>
  <meta charset="UTF-8">
  <title>Promantus Bot</title>
      <style type="text/css"> 
* {
    margin: 0;
    padding: 0;
}

body {
    background-color:#FF625F;
}

h1, p {
    font-family: sans-serif;
    text-align: center;
    color: #323330;
    font-size:  100px;
}


p {
    font-size: 30px;
}

#output, #container {
    display: flex;
    justify-content: center;
    margin-top: 100px;
}


input {
    background-color: #eee;
    border: none;
    font-family: sans-serif;
    color: #000;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 30px;
}






</style>


</head>

<body>

  <div id="output"></div>

<div id="container">
    <input type="text" id="input" value="">
</div>





</body>

</html>
`
It's going to run fine this way.

edited Jul 5, 2022 at 13:58

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Jun 28, 2019 at 9:10

Prateek Saini

3463 silver badges8 bronze badges

1 Comment

TylerH Over a year ago

This does not answer the question that was asked.

Collectives™ on Stack Overflow

Why is my static CSS not working in Django?

Settings

view

index.html

12 Answers 12

5 Comments

Comments

Comments

4 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Settings

view

index.html

12 Answers 12

5 Comments

Comments

Comments

4 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Related