Forums

CSS (or JS?) not working on the Django admin page

Hi everyone!

This is my first message here. I am a data scientist that is trying to learn web development as a side project, and I have chosen to use Django because of my familiarity with Python.

I created some basic functionality for my app locally and now have deployed it here. You can take a look at if if you want: https://fitshare.pythonanywhere.com/

However, I find that the style of certain elements doesn't match what I see locally. More specifically, the default Django admin page looks off. This is not (I believe) the same problem described here, which I have already solved following the instructions in the tutorial on static files.

Most of the CSS is working but, for some reason, there are some sections (that contain some JS) that are not being displayed properly.

This is what my admin page looks in local: local

And this is what I see here over PythonAnywhere: deployed

When looking at the code inspector, it seems there's some JS that should be toggling the light/dark mode that is not working on the deployed instance. Also, some CSS styling is apparently not loading.

As mentioned above, I have followed the steps in the static files tutorial (defined the STATIC_ROOT, run collectstatic, and set up the static files here on the PythonAnywhere interface).

Have you guys encountered similar issues?

You might be running different version of Django locally and different one on PythonAnywhere.

That might actually be the case. I run Django 5.0.4 at home and PythonAnywhere's default is 4.0.6. However, I created a virtualenv to install 5.0.4 via pip, and have (perhaps not properly) configured the virtualenv section in PythonAnywhere's WebApps interface (Step 3 here), so I was assuming I was running 5.0.4 here as well.

Earlier today, a friend suggested that I compare the base.css that is being loaded locally vs live, and found a relatively large diff. Suspecting that this may come from using different Django versions, I removed the virtualenv from WebApps and it partially solved the issue. The styling is correct, but the icon to toggle the dark/light mode doesn't appear. This surprised me, as I expected that removing the virtualenv would use Django 4 and would work worse than initially!

Not exaclty solved at this point, but at least have some pointers as to where to look at.

One more question: is there a way to know what virtualenv (if any) is used in the live instance at any given time?

It's the one set on the "Web" page unless you changed it and not reloaded.

Yep, if that's the case then I don't know why the CSS started working again after removing the custom virtualenv hehe

Does it work now?

I had the same problem and I removed the virtualenv and the admin CSS was working as expected. Not sure how all that works. Can anybody explain?

Have a look at this help page.