Why does my Django admin site not have styles / CSS loading?

Question

I made a Django admin site using Django development version but it isn't being styled:

Arpeggio

Is there a style referenced that does not get loaded? – Dismissal

You need to configure the dev server to serve static files: docs.djangoproject.com/en/1.2/howto/static-files – Platas

@Dismissal ,yes, it is the django default style , it is in D:\Python25\Lib\site-packages\django\contrib\admin\media – Arpeggio

I had the same issue of admin static content not being vieable, but with nginx (instead of development environment). Basically, check your nginx config file and make sure it's the location of your 'collectstatic'. Details here: serverfault.com/questions/403264/… – Auntie

Check settings.py whether the DEBUG = True is set or not. If not set it – Dar

Answer 1

Django does not serve static files on it's own. You have to tell it where the files are.

The ADMIN_MEDIA_PREFIX in the settings.py will point Django in the right location.

Since you're using the development version, you'll want the dev-specific document for static files how-to. Adam's link will lead you to the 1.2 version.

Clarethaclaretta

Good answer but now deprecated and absent from settings.py. Read below for more up-to-date solutions. – Obverse

I have same error but in Flask, I put my css inside static folder. And use jinj2 2 suntax i.e {{url_for('static', filename='css/style.css')}} , but still on my laptop I have this error. I forced refresh the page but problem still exist. Please help – Wun

Answer 2

After setting up your STATIC_ROOT and STATIC_URL, you may have to run

python manage.py collectstatic

Unhair

This works on 1.5.2 also. I didn't have to change or add any file or code – Sammons

Maybe useful for somebody: you should use the same name for STATIC_ROOT and STATIC_URL, example: I combined "staticfiles" and "static", used STATIC_ROOT=os.path.join(BASE_DIR, "staticfiles")" and STATIC_URL="/static/". My app worked fine, but the admin files could not be found. so change it both to "staticfiles" or to "static" – Nimbus

Tried multiple things, but this resolved the problem. – Kianakiang

Answer 3

I broke my head over it for two days trying whatnot!

Finally, changed DEBUG in the settings.py file to:

DEBUG = True

and it worked.

P.S:

SECURITY WARNING: don't run with debug turned on in production!

Banana

Answer 4

ADMIN_MEDIA_PREFIX is deprecated now, use STATIC_URL instead. Setting STATIC_URL = '/static/' in settings.py should do the job. Try:

import os.path  
import sys

PROJECT_ROOT = os.path.normpath(os.path.dirname(__file__))

and then:

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

Works on Django 1.4 pre-alpha SVN-16920.

Permian

This doesn't work for me also. I notice that if I move (manually) the folder static/admin inside static/css/ then I can access the css files. So it seems that I can access the css files just if the are inside the static/files but the collectstatic doesn't put them there. Of course, moving the folder manually just doesn't work because the templates continue pointing to static/admin. – Grandeur

Worked for me when trying to run the admin interface created with Django v1.2, tested on 1.3, and then re-deployed on v1.4. Running Ubuntu 12.04 LTE – Cargo

In my case, I had to move the static folder inside the app, just make sure that PROJECT_ROOT is pointing to the root to the setting.py. In my case it was pointing to the parent folder. – Soup

Answer 5

I read several other threads trying to fix this...resorted to an alias as in other threads. This assumes that your own custom app is serving static files correctly, which would indicate that your STATIC_ROOT and STATIC_URL have proper settings.

STATIC_ROOT = ''
STATIC_URL = '/static/'

Then (from your static directory):

ubuntu@ip-1-2-3-4:/srv/www/mysite.com/app_folder/static$ sudo ln -s /usr/local/lib/python2.7/dist-packages/django/contrib/admin/static/admin/ admin

Hope this helps someone...there are a lot of threads on this topic.

Coldblooded

Answer 6

I ran into this issue as well following the Django Book Tutorial. In Chapter 5|Installing the model, the book states when referring to the default INSTALLED_APPS- "Temporarily comment out all six of those strings by putting a hash character (#) in front of them." http://www.djangobook.com/en/2.0/chapter05.html

Then, in Chapter 6, the Book tells the reader to uncomment 4 of those 6 lines- "note that we commented out these four INSTALLED_APPS entries in Chapter 5. Uncomment them now."

But the statcifiles line is what is needed to restore CSS to the admin page, so uncomment that 'django.contrib.staticfiles',

Sidonia

Uncommenting 'django.contrib.staticfiles' in settings.py file as suggested above worked for me too. 'django.contrib.staticfiles' should be present by default in your settings.py file under INSTALLED_APPS. Thanks Chris for your suggestion. – Fabian

Got here from the Django Book too. That one-character removal does it. – Mesencephalon

Answer 7

In /project_name/project_name/settings.py you need to set STATIC_URL to tell your site what url to use for static files.

Then set STATIC_ROOT to be some folder on your filesystem that is not the same as any of your directories listed in STATICFILES_DIRS list.

Once STATICFILES_ROOT is set, you would run python manage.py collectstatic from the project directory.

This will copy all the admin static files and all files in any other folders listed in the STATICFILES_DIRS list. Basically this puts all your static files in one place so you you can move them to your CDN when deploying your site. If you are like me and don't have a CDN, then you have two options:

1. Add the folder you set as STATIC_ROOT to the STATICFILES_DIRS list. This will allow the staticfiles finders in django to locate all the static files.
2. Move the entire folder of static files somewhere else on your file system and direct STATICFILES_DIRS to include that new location.

I make no comments about security with this answer, it is just the way I have been able to develop with my web server for small projects. I expect that you will want a CDN as django suggest if you are doing anything larger scale.

UPDATE: I just ran into this issue and this method didn't quite do what I think you want. What ended up working for me was after I ran collectstatic I just copied the admin static files that it put into STATICFILES_ROOT into the directory that I had used for my own static files. That solved the issue for me.

Arthralgia

Answer 8

I see there are many answers but none of them worked for me, so I'm posting my own. What solved it for me was adding a static files URL to the root URLs of the app. I needed to add this URL to my URLs list:

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

You will also need these two imports:

from django.conf import settings
from django.conf.urls.static import stati

More can be viewed in this article.

Cromagnon

Answer 9

run: python manage.py collectstatic

Add this line to Vhost which located at : /etc/apache2/sites-available/000-default.conf

Alias /static/admin/ /var/www/html/example.com/static/admin

Here is entire Vhost setting for django setup

<VirtualHost *:80>
        ServerName gautam.tech
        ServerAlias www.gautam.tech

        WSGIDaemonProcess gautam.tech python-path=/var/www/html/gautam.tech python-home=/var/www/html/gautam.tech/venv
        WSGIProcessGroup gautam.tech
        #Your static files location
        Alias /static /var/www/html/gautam.tech/static
        Alias /media/ /var/www/html/gautam.tech/media
        Alias /static/admin/ /var/www/html/gautam.tech/static/admin

        <Directory /var/www/html/gautam.tech/static>
                Require all granted
        </Directory>

        <Directory /var/www/html/gautam.tech/media>
                       Require all granted
        </Directory>

        WSGIScriptAlias / /var/www/html/gautam.tech/myproject/wsgi.py

        DocumentRoot /var/www/html/gautam.tech
        <Directory /var/www/html/gautam.tech>
                <Files wsgi.py>
                        Require all granted
                </Files>
        </Directory>

        CustomLog /var/www/html/gautam.tech/access.log combined
        ErrorLog /var/www/html/gautam.tech/error.log
</VirtualHost>

This will work for sure!

Teena

Very good answer. I only had to run the collectstatic command. – Neodarwinism

Answer 10

Ensure that 'django.contrib.staticfiles' is in your INSTALLED_APPS in your settings.py

Pshaw

Answer 11

In addition to many of the other answers being useful, I had a problem that hasn't yet been noted. After upgrading from Django 1.3 to 1.6, my static files directory had a broken symbolic link to the django admin static files.

My settings.py was configured with:

STATICFILES_DIRS = (
    '/var/www/static/my-dev',
)

According to this answer,

Django will now expect to find the admin static files under the URL /admin/.

I had a symbolic link /var/www/static/my-dev/admin which was set to:

admin -> /usr/local/lib/python2.7/dist-packages/django/contrib/admin/media/

That location no longer exists in django 1.6, so I updated the link to:

admin -> /usr/local/lib/python2.7/dist-packages/django/contrib/admin/static/admin/

And now my admin site is working properly.

Benyamin

I have a simple project with simple files. My css loads when running on local, but when I hosted my website the css doesn't load, kindly help. – Individually

@Individually I suggest you open a new question for the site in general to address. Also, after 9 years, I've moved on to other domains. – Benyamin

Answer 12

In the issue is in a dev/test/prod server and using Nginx, please follow the below steps.

• set the configs in settings.py as something below

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

• Run the below command to create css and js files in static folder

  $ python manage.py collectstatic
  

• config in /etc/nginx/sites-enabled/example (Nginx) to serve static files

  location /static/ {
          alias /project/root/folder/static/;
  }
  

Solana

Answer 13

If you are using Apache server to host your django site, you need to make sure the static alias point to your /directory to site/site_media/static/. If your static files are in /directory to site/site/site_media/static/, the previous Apache alias configuration will not work.

Peppergrass

Answer 14

While following the Django tutorial, I had a similar problem and in my case the issue was the mimetype used by the development server when serving css files.

The mimetype served was 'application/x-css' which led to following warning message in Chrome (in the 'Network' tab of the Developer tools):

Resource interpreted as Stylesheet but transferred with MIME type application/x-css: "http://127.0.0.1:8000/static/admin/css/base.css"

The workaround that I've found: changing the mimetype to be served by adding following lines to the django webapp's manage.py file:

import mimetypes
mimetypes.init()
mimetypes.types_map['.css'] = 'text/css'

Note: worked for me with Django 1.7.4 on Python 2.7 and Chrome 40.0

Sulphate

tried this with Django 2.2.1 and it does not work. My admin panel static .css files are being served by nginx with HTTP code 200, but Chrome says they are coming in as Content-Type: text/plain, and they are not being rendered on the page. – Paraplegia

Answer 15

Same sort of issue i encountered while developing a site in django-1.10.5 and python-2.7.13. But in my firefox-51 and chrome, the login page was able to get the css but still there was no styling. But weirdly it was working on IE-8..

I tried do every possible thing mentioned here and suitable to my set of sw versions. None worked.

But when i tried the same site on other system which had the python-2.7.8, it worked..

Just posted if it may help someone...

edited: later I found that in python-2.7.13, writing the following two lines in settings.py (plus clearing the cache of the browser) had done the trick

import mimetypes
mimetypes.add_type("text/css", ".css", True)

Bailsman

Answer 16

My issue was resolved by creating new Virtual Environment for the project, before that I was using general system level python interpreter.

$ mkvirtualenv myproject

Reference: https://docs.djangoproject.com/en/2.1/howto/windows/

Cherie

Answer 17

this works fine and easily. I moved (manually) the folder. just you have to copy your static/admin from the directory of the main Project and paste it into public_html static/ if there is no static folder you have to run following command in terminal

python manage.py collectstatic

here you go with css working of Django admin

Sapp

Answer 18

Admin panel was working fine except css wasn't loaded. This worked for Lightsail Django with Apache

1.Define STATIC_ROOT and STATIC_URL in settings.py

STATIC_ROOT = '/opt/bitnami/projects/decisions/decision/'
STATIC_URL = '/static/'

2.Eject(copy) admin assets files to the project

run python manage.py collectstatic this command creates /opt/bitnami/projects/decisions/decision/admin folder with css/ fonts/ img/ js/ subfolders

3.Make /static url accessible from apache

Paste this snippet in /opt/bitnami/apache2/conf/bitnami/bitnami.conf (If you have set up ssl then the file location will be /opt/bitnami/apache2/conf/bitnami/bitnami-ssl.conf)

Alias /static/ "/opt/bitnami/projects/decisions/decision/"
<Directory "/opt/bitnami/projects/decisions/decision/">
    Order allow,deny
    Options Indexes
    Allow from all
    IndexOptions FancyIndexing
</Directory>

4. Don't forget to restart apache

sudo /opt/bitnami/ctlscript.sh restart apache

Margravine

Answer 19

Check your settings.py file

STATIC_URL = '/static/'

there should be backslash ' / ' in both opening and closing side ..

Clifton

Answer 20

I had to copy the files from the site-packages over to static manually.

cp -r lib/python3.10/site-packages/django/contrib/admin/static/admin static

collectstatic not doing this for me. It says 0 files copied.

Civet

Answer 21

If you have a value set in settings.py for STATICFILES_DIRS and the declared folder doesn't exist or is in the wrong location, it will cause the Admin to have no styling e.g. by defining:

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

And the static folder doesn't exist .

Quillet

Answer 22

Failing after trying 1000s of suggestions, I finally found a solution that helped. Here is what I tried and what I was using. I am using django-1.11 and nginx web server. Firstly, I made sure that my CSS/js files are not getting 404 in browser's console. After that, I could see a warning

Resource interpreted as Stylesheet but transferred with mime type text/plain

I found the base.html in admin templates and removed

type="text/css"

and now the lines looks like this:

<link rel="stylesheet"  href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}" /> 

This fixed the issue for me.

Bitty

Answer 23

Configuring static files

Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.

In your settings.py file, define STATIC_URL, for example:

STATIC_URL = '/static/'

For more details see static files ^{[django-docs]}

Plenitude

Answer 24

If anyone experiencing same issue with Django and have installed 'django-compresor' package, go to settings.py and change this

STATICFILES_FINDERS = (
    "compressor.finders.CompressorFinder",
)

to this

STATICFILES_FINDERS = (
    "compressor.finders.CompressorFinder",
    "django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
)

Explanation: django-compressor is a package that you install when you want to minimize your source files, but it will sometimes override your settings.py configurations so you need to check your configuration and make some adjustments to make the magic work

Litmus