Help: Django 4.2 admin page CSS issue

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.

All you have to do is ctrl+shift+R on the admin page. It’s just a cache issue.

Hi
i have same issue, before upgrade everything is fine :

debug log for version 4.1.3:

HTTP GET /static/admin/css/base.css 200 [0.00, 127.0.0.1:36220]
HTTP GET /static/admin/css/nav_sidebar.css 200 [0.03, 127.0.0.1:36220]
HTTP GET /adminimi/login/?next=/adminimi/auth/user/ 200 [0.03, 127.0.0.1:36252]
HTTP GET /static/admin/css/base.css 200 [0.01, 127.0.0.1:36252]
HTTP GET /static/admin/css/dark_mode.css 200 [0.01, 127.0.0.1:36258]
HTTP GET /static/admin/css/nav_sidebar.css 200 [0.02, 127.0.0.1:36262]
HTTP GET /static/admin/js/nav_sidebar.js 200 [0.02, 127.0.0.1:36276]
HTTP GET /static/admin/css/login.css 200 [0.03, 127.0.0.1:36284]
HTTP GET /static/admin/css/responsive.css 200 [0.03, 127.0.0.1:36300]
HTTP GET /static/admin/css/fonts.css 200 [0.03, 127.0.0.1:36252]
HTTP GET /static/admin/fonts/Roboto-Regular-webfont.woff 200 [0.00, 127.0.0.1:36300]
HTTP GET /static/admin/fonts/Roboto-Light-webfont.woff 200 [0.01, 127.0.0.1:36276]

after upgrade to 4.2.7 :

HTTP GET /static/admin/css/base.css 200 [0.04, 127.0.0.1:54078]
HTTP GET /static/admin/css/nav_sidebar.css 200 [0.04, 127.0.0.1:54092]
HTTP GET /static/admin/js/theme.js 200 [0.04, 127.0.0.1:54100]
HTTP GET /static/admin/css/dark_mode.css 200 [0.05, 127.0.0.1:54106]
HTTP GET /static/admin/css/login.css 200 [0.06, 127.0.0.1:54114]
HTTP GET /static/admin/js/nav_sidebar.js 200 [0.07, 127.0.0.1:54124]

HTTP GET /static/admin/css/responsive.css 500 [0.33, 127.0.0.1:54078]
HTTP GET /static/admin/css/fonts.css 500 [0.33, 127.0.0.1:54092]

two css files have 500 error .

If this is something with which you would like assistance, please open a new topic for this. Include in your post a description of your environment (what operating system, what versions of Django and Python, what server you’re running, and how you’re running it).

Also, please identify what log this is that you are displaying here.

“Facing the same issue. Seeking solutions. Any helpful suggestions?”

If this is something with which you would like assistance, please open a new topic for this. Include in your post a description of your environment (what operating system, what versions of Django and Python, what server you’re running, and how you’re running it).
Include identifying whether this is a new installation or an upgrade, and what you have tried so far to resolve this.

I was facing the same issue. I accidentally deleted the static/admin folder which caused the styling of admin to disappear.

The solution was to run python manage.py collectstatic.

you just need to clean the cache and it will work.

Welcome @luciafalcinelli !

While your suggestion may work in many cases, it’s not a universal solution for every instance of this problem.

Offering canned solutions without understanding the situation tends not to be as helpful as spending the time to ensure you’re really familiar with the issue being presented, and writing your answer accordingly.

Solved it! I had the same issue and there is a post about it you just have to d=serve files using whitenoise. Dont forget to insert STATICFILE_STORAGES with white noise.

Depending upon your deployment environment, using whitenoise may or may not be the right answer. If you’re deploying your project behind a web server such as nginx or apache, it’s a lot better to allow them to serve your files and not Django.

1 Like

Just to make it clear how do i serve static and media through a web server. I saw that in the documentation but it was not that clear. Can you help me with an example?

You won’t find it documented in the Django docs because it really doesn’t have anything to do with Django.

Web servers are designed fundamentally to serve files. Each web server has its own configuration for it.

So the specifics are going to depend upon which web server you’re using. You can find numerous examples here in the forum for nginx and a few for apache as well.

But in general terms, it’s configured by telling the web server that a particular url (or set of urls) map to a specific directory. (For example, you may configure your web server that any request to a URL starting with /static/ is a reference to a file in /var/www/html/project/static/.)

The purpose then of the collectstatic command is to copy all the static files from your project and the third-party libraries you are using into this location for the web server to access.

1 Like

Perfect, i got it. now i remember that var/www/, where we pste files to serve it to the internet.

My problem was that nginx was misconfigured and pointing to the wrong directory for static files.
I had to edit /etc/nginx/sites-available/SITE
The offending line was
location /static/ {
root /home/USERNAME/SITE;
}

inside the “server” block.

I had to change it to make sure it points to the right location, which it does in my example.
The exact location may vary for you, it should be your Django project’s root folder.

This comment is half-right. Yes, the exact location may vary.

However, it’s not a good idea to have nginx reading static files from anywhere in your Django project’s directory structure. It’s always better to have the static files moved to a location outside your Django project directory.

1 Like