why my django admin site does not have the css style

Question

I make a Django admin site using Django development version

But it does not have a CSS style :

Answer 1

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

Answer 2

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.

Answer 3

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/

Answer 4

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.

Answer 5

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.

Answer 6

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/;
  }