HELP! Admin page CSS does not rendered but no errors

Fanelemenzi · October 13, 2024, 9:31am

I am new to django, I am building a simple project as an MVP with only 2 html pages. I am using bootstrap for my css. I am preparing for deployment but I cant get the CSS on the admin page to get rendered. Following are the details on my projects

Screenshot of network section on the browser developer tools

urls.py

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('autohistory.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settings.py



from pathlib import Path
import os
import mimetypes 
from dotenv import load_dotenv
#import dj_database_url
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

#Load our environmental variables
load_dotenv()



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

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-0nn1gc&c-xn!ceuoxr$dxco8mxo+(w1^fi))^&md$m9*ofz3#w'

# 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',
    'autohistory',
    'bootstrap5',
]

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 = 'AutoGuru.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 = 'AutoGuru.wsgi.application'


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

DATABASES = {
    'default': {
        #'NAME': BASE_DIR / 'db.sqlite3',
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'railway',
        'USER': 'postgres',
        'PASSWORD':os.environ.get('DB_PASSWORD_YO'),
        'HOST':'autorack.proxy.rlwy.net',
        'PORT':'35212',
        
    }
}


# Password validation
# https://docs.djangoproject.com/en/5.1/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/5.1/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/5.1/howto/static-files/

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / "static/"]
STATIC_ROOT = BASE_DIR / "assets"

MEDIA_URL = 'media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

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

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

mimetypes.add_type("'text/javascript", ".js", True)
mimetypes.add_type("'text/css", ".css", True)

console output

 python manage.py runserver
Watching for file changes with StatReloader
[13/Oct/2024 01:29:12] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4181
[13/Oct/2024 01:35:48] "GET /admin/ HTTP/1.1" 302 0
[13/Oct/2024 01:35:48] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4181
[13/Oct/2024 01:35:48] "GET /static/admin/css/base.css HTTP/1.1" 304 0
[13/Oct/2024 01:35:48] "GET /static/admin/css/dark_mode.css HTTP/1.1" 304 0
[13/Oct/2024 01:35:48] "GET /static/admin/css/nav_sidebar.css HTTP/1.1" 304 0
[13/Oct/2024 01:35:48] "GET /static/admin/css/login.css HTTP/1.1" 304 0
[13/Oct/2024 01:35:48] "GET /static/admin/css/responsive.css HTTP/1.1" 304 0
[13/Oct/2024 01:35:48] "GET /static/admin/js/theme.js HTTP/1.1" 304 0
[13/Oct/2024 01:35:48] "GET /static/admin/js/nav_sidebar.js HTTP/1.1" 304 0
[13/Oct/2024 01:36:05] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4181
[13/Oct/2024 01:36:05] "GET /static/admin/css/base.css HTTP/1.1" 200 21310
[13/Oct/2024 01:36:05] "GET /static/admin/css/dark_mode.css HTTP/1.1" 200 2929
[13/Oct/2024 01:36:05] "GET /static/admin/css/nav_sidebar.css HTTP/1.1" 200 2694
[13/Oct/2024 01:36:05] "GET /static/admin/css/login.css HTTP/1.1" 200 958
[13/Oct/2024 01:36:05] "GET /static/admin/css/responsive.css HTTP/1.1" 200 18559
[13/Oct/2024 01:36:05] "GET /static/admin/js/theme.js HTTP/1.1" 200 1943
[13/Oct/2024 01:36:05] "GET /static/admin/js/nav_sidebar.js HTTP/1.1" 200 3063
[13/Oct/2024 01:36:24] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4181
[13/Oct/2024 01:36:29] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4181
[13/Oct/2024 01:36:32] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4181
[13/Oct/2024 01:36:34] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4181
[13/Oct/2024 11:04:57] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4181
[13/Oct/2024 11:04:57] "GET /static/admin/css/base.css HTTP/1.1" 304 0
[13/Oct/2024 11:04:57] "GET /static/admin/css/dark_mode.css HTTP/1.1" 304 0
[13/Oct/2024 11:04:57] "GET /static/admin/css/nav_sidebar.css HTTP/1.1" 304 0
[13/Oct/2024 11:04:57] "GET /static/admin/js/theme.js HTTP/1.1" 304 0
[13/Oct/2024 11:04:57] "GET /static/admin/css/login.css HTTP/1.1" 304 0
[13/Oct/2024 11:04:57] "GET /static/admin/css/responsive.css HTTP/1.1" 304 0
[13/Oct/2024 11:04:57] "GET /static/admin/js/nav_sidebar.js HTTP/1.1" 304 0
[13/Oct/2024 11:10:30] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4181
[13/Oct/2024 11:10:31] "GET /static/admin/css/dark_mode.css HTTP/1.1" 200 2929
[13/Oct/2024 11:10:32] "GET /static/admin/css/nav_sidebar.css HTTP/1.1" 200 2694
[13/Oct/2024 11:10:32] "GET /static/admin/css/login.css HTTP/1.1" 200 958
[13/Oct/2024 11:10:32] "GET /static/admin/css/base.css HTTP/1.1" 200 21310
[13/Oct/2024 11:10:33] "GET /static/admin/css/responsive.css HTTP/1.1" 200 18559
[13/Oct/2024 11:10:40] "GET /static/admin/js/theme.js HTTP/1.1" 200 1943
[13/Oct/2024 11:10:40] "GET /static/admin/js/nav_sidebar.js HTTP/1.1" 200 3063
Not Found: /favicon.ico
[13/Oct/2024 11:10:49] "GET /favicon.ico HTTP/1.1" 404 2567
[13/Oct/2024 11:14:42] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4181

matthiask · October 13, 2024, 10:03am

This doesn’t look correct. Try with MEDIA_URL = "/media/" and also STATIC_URL = "/static/".

The initial slash is needed here.

KenWhitesell · October 13, 2024, 12:20pm

Welcome @Fanelemenzi !

There are two different things I’d try first before pursuing this any farther.

While keeping your developer tools open, in the Settings / Preferences / in the Network section, set the “Disable cache” option. Then refresh the page.
Try accessing the page using an Incognito window.

If neither of these work, try creating a new virtual environment and running your project within it.

Notice how in your developer tools screenshot you posted that the 200 responses you are seeing are reflecting 0 byte responses being satisfied by your local cache.

Fanelemenzi · October 13, 2024, 9:57pm

checked the no cache box but still no change, deleted virtual environment and installed it again but still no dice

KenWhitesell · October 13, 2024, 10:17pm

You’re going to need to show what your network tab in the developer tools is showing again in addition to the requests being issued for your admin home page.

Also, do you have any static files in your BASE_DIR/static/ directory? If so, what’s in that directory?

Fanelemenzi · October 24, 2024, 8:18pm

Thank you soo much Mr Ken Whitesell for your help and taking time to reply. I didn’t go deep into the issue to find a solution(even though I wanted too ) because of time. I cloned a repo that worked and went on from there.

But the issue started when I pip installed django bootstrap, added it to my installed apps and imported it as static on my html pages. That’s when noted the error

KenWhitesell · October 24, 2024, 8:22pm

What versions are you using of:

Python
Django
django-bootstrap

boxed · October 25, 2024, 1:37pm

Install whitenoise. WhiteNoise 6.7.0 documentation

Topic		Replies	Views
admin page css not rendering Mystery Errors	14	154	August 20, 2024
Django admin style error The Admin	2	426	August 26, 2023
Tutorial - Admin page view not rendering? Getting Started	4	1050	May 3, 2023
why when I set debug = false, then admin/ looks bad? Mystery Errors	4	1322	March 24, 2024
CSS won't load Using Django	2	4947	June 28, 2020

HELP! Admin page CSS does not rendered but no errors

Related topics