Help: Django 4.2 admin page CSS issue

I too have exactly the same problem after upgrading Django to 4.2. The layout on admin page appears to be broken. I cleared the browser cache but it is still the same. I also rebuilt and redeployed my static assets, but the problem persists.

You’ll want to verify that when the admin page is being loaded that your browser is issuing requests for the various static files. Check the console log where you’re running runserver, you should see those requests. If you don’t, then the browser isn’t making them. (You can also check the browser’s developer tools on the network tab to see the network requests being made by the browser.)

Same here:
console log:
[20/Apr/2023 10:15:53] “GET /admin/ HTTP/1.1” 200 5559
[20/Apr/2023 10:15:53] “GET /static/admin/css/base.css HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/css/dark_mode.css HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/css/dashboard.css HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/css/nav_sidebar.css HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/css/responsive.css HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/js/nav_sidebar.js HTTP/1.1” 404 179
[20/Apr/2023 10:15:53] “GET /static/admin/js/theme.js HTTP/1.1” 404 179

setting.py:
STATIC_URL = ‘./static/’
STATIC_ROOT = ‘./static’

and also I run “py mange.py collectstatic” after I setting STATIC_URL and STATIC_ROOT

STATIC_ROOT should be a complete absolute path to the static directory where static files are to be stored, not a relative reference. See Settings | Django documentation | Django

Beyond that, are you running Django at this point using runserver? If so:

  • What’s the DEBUG setting in your settings.py file?
  • What’s the STATICFILES_DIRS setting?
  • What does your root urls.py file look like?

If you’re not using runserver, how are you running Django?

1 Like

Looks like I am not alone.

I am running from runserver, python manage.py runserver ip_address:8000

Not seeing a STATICFILES_DIRS setting?

My DEBUG is set to false,
Allowed hosts is [‘*’]

URLS.PY is and contains no Includes.


urlpatterns = [
    path('', include('members.urls')),
    path('admin/', admin.site.urls),
]

SETTINGS.PY

"""
Django settings for netadmin project.

Generated by 'django-admin startproject' using Django 4.2.

For more information on this file, see
https://docs.djangoproject.com/en/4.2/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.2/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-_XXXXXXXXXXXXXXXXXXX'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

ALLOWED_HOSTS = ['*']


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'members'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'netadmin.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'netadmin.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

In that case, see the docs at How to manage static files (e.g. images, JavaScript, CSS) | Django documentation | Django, particularly the sections that talk about serving static files during development when DEBUG=False.

(Or, change DEBUG to True)

1 Like

Changed debug to
DEBUG = True
And it is working.

Hope this works for everyone else.

1 Like

For anyone else out there looking for a solution, here is how I fixed my problem with admin layout being broken.

  1. Check if you have a folder “admin” inside your “static” folder.
  2. Delete the “admin” folder.
  3. Git commit & push / rebuild & deploy

Problem fixed.

Make sure that you NEVER commit “admin” static assets to version control because Django will then always load “admin” assets from the repo which may be updated, and will cause bizarre problems.

1 Like

Apparently, setting DEBUG to False will cause the error in loading static files for the admin site. So to fix that, go to your settings.py file and set DEBUG to True.

1 Like

@mikekwabs - That’s not the most appropriate solution. What you really want to do in this situation is to properly handle static files as referenced in the docs linked above. Changing DEBUG fixes the symptom, but not the problem.

1 Like

Absolutely true. Got it! Thank you.

I also am experiencing this. Does anyone have a solution?


Apparently static paths are set correctly but browser block them when DEBUG = False
how can i fix this problem??

No, the browser is not blocking them. The issue is that the server is returning a 404 error page instead of the desired css/js which means that your static paths are not set up correctly for a production-style environment. See the link above at Help: Django 4.2 admin page CSS issue - #11 by KenWhitesell.

  1. python manage.py collectstatic - did not work for me
  2. python manage.py collectstatic --clear - did not work for me
  3. Downgrading from 4.2.4 to lower - did not work for me
  4. Hard refresh browser - did not work for me
  5. Clear cache - did not work for me

What worked for me since I have CloudFront to invalidate entire admin CSS folder, you can do it via AWS CLI or AWS Management Console:
Object path: /static/admin/css/*

spent hours trying to figure out what I was doing wrong! Switched debug = True, and Vrroom! Thanks!!

Changing debug to True is fixing a symptom and not the real problem. If this is something you want to fix, please open a new topic for your issue and we’ll work on helping you getting it resolved.

The solution to this issue for me is detailed here Serving static files during development.

Just add this to your urls.py:

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

urlpatterns = [
# … the rest of your URLconf goes here …
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

This might be fine in a development environment, but it’s exactly what you don’t want to do for a production-quality deployment.

1 Like

Thanks Ken for spotting this. Indeed, as per documentation, it’s not production-quality. I managed to fix it by identifying in the logs (i.e. /var/log/nginx/error.log) where the server was trying to call the Django Admin static assets. It seems like the fix to this issue can be narrowed down to the path of where the server is calling the admin assets. Upon trying it out locally on runserver, it all works, but when I deploy to AWS ElasticBeanstalk, it seems like it wasn’t pointing to the correct static folder where the assets were in.

So in order to fix this, check your error logs and see where the server is pointing to the admin assets (most likely that folder doesn’t exist), and therefore try to change it in different settings. By ‘different settings’, this could be your Server/Cloud providers configuration files (that map that static folder built locally to the static folder in the server) or perhaps the Django STATIC_ROOT variable.