CSS not loading in django admin panel

When i open my django admin panel it is looking without css. In last 3-4 days i have tried almost everything around the internet. Every suggestion or fix i could find, i have tried that. I am attaching screenshot of admin panel also. And its not like css files are not being served, they are getting served and the proof is 200 code in network panel of inspect panel. I am attaching my settings.py and urls.py files also. If anyone have any idea how to fix it then please share it. Tried hard refreshing browser also but it also didn’t solve the problem.

"""
Django settings for storeFront project.

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

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-j=*rv2yvz3kq6c=eu5of1h(ihzl8bumfs=75)@bbgvlr33t69^'

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

ALLOWED_HOSTS = ['*']


# Application definition

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

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',
]

INTERNAL_IPS = [
    '127.0.0.1',
]

ROOT_URLCONF = 'storeFront.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / "playground/templates"],
        '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 = 'storeFront.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/'
STATIC_ROOT = BASE_DIR / 'staticfiles'
STATICFILES_DIRS = [
    BASE_DIR / "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'

from django.contrib import admin
from django.urls import path,include
from playground import urls
from playground import views
from . import settings
from django.conf.urls.static import static

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

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

Welcome @Rajjivani27 !

It looks like you’re running Django 4.2. What version of Python are you using?

How are you running your project?

  • Is this a development environment using runserver? Or is this a production deployment using something like gunicorn or uwsgi?

Please post your runserver log showing the css files being retrieved for your admin page request.

That actually isn’t “proof”. You need to look at the details of the transfer to ensure you’re not getting a cached copy.

To ensure that it’s not a caching issue, you can try using a “Private” window or disabling the cache in the browser’s developer tools.

Hey @KenWhitesell sir, Thanks for your quick response
.
First of all let me clear!
i am using django 5.2.1 version and python 3.13.3

I am running mu project through runserver command and in windows os.

posting the image of runserver log also,and i have tried private/incognito window also and its same there as i said i have tried every possible solution i got and this was one of the most fix i got.

The next step would be to check the browser developer tools to see what css is being applied to the page. If you’re using Chrome, look at the “Sources” menu entry, and find these CSS files. Verify that they are the appropriate files.

My immediate recommendation would be to create a completely new virtual environment and reinstall Django and your other needed packages.

Side note: You wrote:

Statements like this are never helpful to the people trying to help you. The phrase “every possible solution” does not add any useful information to the conversation. You would need to be specific and enumerate exactly what you tried for us to know that you’ve tried it.

First, sorry for my explaination sir.

I have checked the “Sources” tab and yes the files are all same as runserver log.

And the point about creating completely new virtual environment and reinstall django, i have tried that also.

Let me tell you what things actually i have tried:

  • setting STATIC_URL and STATIC_ROOT in settings.py file.
  • hard refreshing the page, so the cached files gets remove and so that the page without css being removed from cached files of browser.
    -Setting up whitenoise idea and all neccesity in it which also fails.
    -Reinstalled python,django everything total 3 times till now, but didn’t work.
    -Creating new project from sracth which also didn’t work.
    -Creating completely new virtual environment and setting up things in it and it also didnt worked.
    -Creating a whole new user in my laptop so if there is misconfiguration in my laptop setting so it gets removed. As on creating new user(in laptop), all settings comes to default but it also didn’t work.

I have rememberred this ways till now which i have tried.

Posting image of sources tab below for your referrence.

Please post the complete set of commands that you issued to do this, along with the command you’re using to activate your virtual environment and the commad you’re running to run runserver.

Also please verify that you do not have any conflicting templates or static file names in your playground app.

You could try removing playground from your INSTALLED_APPS to see if the problem continues to occur. You should also remove the STATICFILES_DIRS setting to ensure that you’re only retrieving the app-provided static files along with removing the TEMPLATE - DIRS settings to avoid conflicts there.

Hey sir,
Here is complete set of commands i used to create new virtual environment in another folder to remove conflicts totally.
I am sending pictures so you can see it clearly.

And ya there is no conflicting templates or static file names in playground app, and tried your suggestions also of removing playground from INSTALLED_APPS and STATICFILES_DIRS and TEMPLATE-DIRS from settings.py but didnt worked.

1 Like

1 Like

1 Like

1 Like

Very helpful, thank you!

I have confirmed that the file sizes reported by runserver are correct for the static files and for the page itself.

Please run the python -V command to report the active version of python being used.

Also, what browser are you using? Do you have any extensions installed? Any non-standard configuration settings? (It might be worth trying a different browser.)

I might also suggest trying this using the standard command line interface instead of PowerShell.

Thanks for reply sir,
As i told before my current python version is 3.13.3.

And ya i have tried other browsers like Microsoft edge,firefox and brave and issue is also same in them.

There is no extensions or non-standard configuration setting in any browser.Even, for trying new browsers i downloaded firefox and brave latest. These browsers was not even in my device but i downloaded for trying.

And ya i have also tried this using simple command line interface(command prompt for windows) instead of powershell, issue is same.

Again - show it, don’t tell me. Run the python -V command in your virtual environment and show the result.

Posting both the screenshots, one in my project folder and one which i created new which images i have posted above

1 Like

Here is the HTML that my system generates for the login page (I have removed the blank lines):

<html lang="en-us" dir="ltr" data-theme="auto"><head>
<title>Log in | Django site admin</title>
<link rel="stylesheet" href="/static/admin/css/base.css">
  <link rel="stylesheet" href="/static/admin/css/dark_mode.css">
  <script src="/static/admin/js/theme.js"></script>
  <link rel="stylesheet" href="/static/admin/css/nav_sidebar.css">
  <script src="/static/admin/js/nav_sidebar.js" defer=""></script>
<link rel="stylesheet" href="/static/admin/css/login.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/admin/css/responsive.css">
<meta name="robots" content="NONE,NOARCHIVE">
</head>
<body class=" login" data-admin-utc-offset="-14400">
<a href="#content-start" class="skip-to-content-link">Skip to main content</a>
<!-- Container -->
<div id="container">
    <!-- Header -->
      <header id="header">
        <div id="branding">
<div id="site-name"><a href="/admin/">Django administration</a></div>
<button class="theme-toggle">
  <span class="visually-hidden theme-label-when-auto">Toggle theme (current theme: auto)</span>
  <span class="visually-hidden theme-label-when-light">Toggle theme (current theme: light)</span>
  <span class="visually-hidden theme-label-when-dark">Toggle theme (current theme: dark)</span>
  <svg aria-hidden="true" class="theme-icon-when-auto">
    <use xlink:href="#icon-auto"></use>
  </svg>
  <svg aria-hidden="true" class="theme-icon-when-dark">
    <use xlink:href="#icon-moon"></use>
  </svg>
  <svg aria-hidden="true" class="theme-icon-when-light">
    <use xlink:href="#icon-sun"></use>
  </svg>
</button>
        </div>
      </header>
    <!-- END Header -->
    <div class="main" id="main">
      <main id="content-start" class="content" tabindex="-1">
        <!-- Content -->
        <div id="content" class="colM">
<div id="content-main">
<form action="/admin/login/?next=/admin/" method="post" id="login-form"><input type="hidden" name="csrfmiddlewaretoken" value="6RkdbCwhCL5BHqfpiwBxprTTR45pC9RDdtjWFPhWA5nU1hW8vdXQgBZA3blr2RCP">
  <div class="form-row">
    <label for="id_username" class="required">Username:</label> <input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" maxlength="150" required="" id="id_username">
  </div>
  <div class="form-row">
    <label for="id_password" class="required">Password:</label> <input type="password" name="password" autocomplete="current-password" required="" id="id_password">
    <input type="hidden" name="next" value="/admin/">
  </div>
  <div class="submit-row">
    <input type="submit" value="Log in">
  </div>
</form>
</div>
          <br class="clear">
        </div>
        <!-- END Content -->
      </main>
    </div>
    <footer id="footer"></footer>
</div>
<!-- END Container -->
<!-- SVGs -->
<svg xmlns="http://www.w3.org/2000/svg" class="base-svgs">
  <symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-auto"><path d="M0 0h24v24H0z" fill="currentColor"></path><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z"></path></symbol>
  <symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-moon"><path d="M0 0h24v24H0z" fill="currentColor"></path><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"></path></symbol>
  <symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-sun"><path d="M0 0h24v24H0z" fill="currentColor"></path><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"></path></symbol>
</svg>
<!-- END SVGs -->
</body></html>

If your system is generating this page and that’s what you’re seeing in your browser,
and
if your browser is returning and showing the contents of the files that are in django.contrib.admin.static.admin.css and django.contrib.admin.static.admin.js (you can compare what the browser is showing in “sources” with what’s in your virtual environment),
and
it’s still not rendering correctly, then I would have to conclude that the issue is environmental and not django related.

Ya sir i checked that files, that are same and i also compared login page file with yours, its also same.

Can you please say what is environmental issue?

And ya alongside all this fixes, i have tried one more also.
I have downloaded WSL(Windows Support System for Linux) and in that i have downloaded their ubuntu distribution, so i can access ubuntu terminal.
When i am running my server for ubuntu terminal at that time css is loading properly with same commands. But in windows its not loading.
I am telling this if it can help anything.

Something within your Windows system itself. It’s not a Django issue. It’s not a browser issue. It’s not a PowerShell issue. It works in WSL. That pretty much only leaves Windows as being the likely cause of the problem.

One more interesting thing is that, when i tried all same things on my friends’ laptop which also have windows, but in them it works totally fine in chrome itself. But in mine its not working.

As I pointed out above, I was also unable to recreate the symptoms you’re describing, which is why I wrote:

About the best you can do at this point is try to figure out what is different between their laptop and your system.