Django: CSS Is not not working

93,072

Solution 1

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 it's 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 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.

Solution 2

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

Solution 3

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

Solution 4

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.

Solution 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' %} ">

Share:
93,072

Related videos on Youtube

AustinT
Author by

AustinT

Software Developer. Groupies Inc. Co-founder &amp; Chief Technology Officer University of Utah Computer Science Alumni. “The harder I work, the luckier I get.” iOS Developer Mobile: iOS, Swift Microsoft Technologies: C#, CRM Dynamics, ASP.NET MVC Web: Ruby on Rails, Javascript, CSS, HTML

Updated on April 16, 2022

Comments

  • AustinT
    AustinT about 2 years

    I am still new to django and I am having problem with my CSS working.
    I have followed the direction from the link: 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 directory organization

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



    Thank you so much, your help and time is much appreciated!

    • oshin saki
      oshin saki over 11 years
      '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?
    • AustinT
      AustinT over 11 years
      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.
    • Otskimanot Sqilal
      Otskimanot Sqilal over 11 years
      see this post to handle static files
    • AustinT
      AustinT over 11 years
      @OtskimanotSqilal Thank you for the reply, I just updated it with my STATICFILES_DIR, my css is still not showing up.
    • miki725
      miki725 over 11 years
      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.
  • AustinT
    AustinT over 11 years
    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
    miki725 over 11 years
    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
    AustinT over 11 years
    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
    miki725 over 11 years
    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
    miki725 over 11 years
    But again, for development you don't have to collect all the static files. Django will serve them from STATICFILES_DIRS directories directly...
  • user17242583
    user17242583 over 2 years
    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
    Melanga Dissanayake about 2 years
    This solved the problem for me.
  • David Mezza
    David Mezza about 2 years
    Am glad it did. Works every time for me