# My Django admin page doesn't utilize the CSS files after installing and configuring whitenoise

**URL:** <https://forum.djangoproject.com/t/my-django-admin-page-doesnt-utilize-the-css-files-after-installing-and-configuring-whitenoise/34657>\
**Category:** Deployment\
**Created:** [September 10, 2024, 4:51am UTC](https://forum.djangoproject.com/t/my-django-admin-page-doesnt-utilize-the-css-files-after-installing-and-configuring-whitenoise/34657 "2024-09-10T04:51:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![reswob](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/reswob/32/23128_2.png) [@reswob](https://forum.djangoproject.com/u/reswob)\
**Post date:** [September 10, 2024, 4:51am UTC](https://forum.djangoproject.com/t/my-django-admin-page-doesnt-utilize-the-css-files-after-installing-and-configuring-whitenoise/34657/1 "2024-09-10T04:51:51Z")

</div>

My Settings.py looks like this

```auto
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    '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',
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = BASE_DIR / "staticfiles"
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"

```

Whitenoise ran fine and copied all the files into staticfiles; however admin page still wont use the styling correctly like it can’t see the admin folder in staticfiles and its contents.

```auto
(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:~/cquence# ls -la
total 288
drwxr-xr-x 13 root root 4096 Sep 9 23:58 .
drwx------ 10 root root 4096 Sep 9 23:56 ..
drwxr-xr-x 4 root root 4096 Jul 31 00:27 account
drwxr-xr-x 3 root root 4096 Sep 9 23:56 config
-rw-r--r-- 1 root root 233472 Sep 9 23:58 db.sqlite3
drwxr-xr-x 5 root root 4096 Sep 9 23:12 djangopaypal
-rwxr-xr-x 1 root root 662 Mar 14 16:49 manage.py
drwxr-xr-x 4 root root 4096 Jul 31 00:28 polls
drwxr-xr-x 7 root root 4096 Jul 25 22:33 productionfiles
drwxr-xr-x 7 root root 4096 Sep 5 11:50 registration
drwxr-xr-x 2 root root 4096 Sep 9 23:32 static
drwxr-xr-x 7 root root 4096 Sep 9 23:48 staticfiles
drwxr-xr-x 5 root root 4096 Sep 9 17:41 stripe_demo
drwxr-xr-x 5 root root 4096 Mar 14 16:46 venv
drwxr-xr-x 5 root root 4096 Jul 31 00:27 web
(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:~/cquence# find staticfiles/ -type f | wc -l
594
(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:~/cquence# ls -la staticfiles/
total 48
drwxr-xr-x 7 root root 4096 Sep 9 23:48 .
drwxr-xr-x 13 root root 4096 Sep 9 23:58 ..
drwxr-xr-x 5 root root 4096 Sep 9 23:32 admin
-rw-r--r-- 1 root root 64 Sep 9 23:48 cquence.045af5b26e4a.css
-rw-r--r-- 1 root root 64 Sep 9 23:32 cquence.css
drwxr-xr-x 2 root root 4096 Sep 9 23:34 css
drwxr-xr-x 2 root root 4096 Sep 9 23:32 fonts
drwxr-xr-x 2 root root 4096 Sep 9 23:32 images
drwxr-xr-x 2 root root 4096 Sep 9 23:32 js
-rw-r--r-- 1 root root 10322 Sep 9 23:48 staticfiles.json

(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:~/cquence# ./manage.py collectstatic

You have requested to collect static files at the destination
location as specified in your settings:

    /root/cquence/staticfiles

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel: yes

0 static files copied to '/root/cquence/staticfiles', 127 unmodified, 352 post-processed.
(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:~/cquence#

```

I tried collecting staticfiles but the admin page is still broken

````auto
 (venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:/etc/nginx/sites-enabled# cat cquence
server {
    listen 80;
    server_name ;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /root/cquence;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}
(venv) root@ubuntu-s-1vcpu-512mb-10gb-sfo3-01:/etc/nginx/sites-enabled#```

I keep getting no CSS loading in my admin page.
![Screenshot 2024-09-09 170059|690x449](upload://5X7P2YgwkUZZwxnIHU6tjRUFQdI.png)
![Screenshot 2024-09-09 170059|690x449](upload://5X7P2YgwkUZZwxnIHU6tjRUFQdI.png)
````

---

<div class="post-metadata">

**Author:** ![white-seolpyo](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/white-seolpyo/32/22386_2.png) [@white-seolpyo](https://forum.djangoproject.com/u/white-seolpyo)\
**Post date:** [September 10, 2024, 5:41am UTC](https://forum.djangoproject.com/t/my-django-admin-page-doesnt-utilize-the-css-files-after-installing-and-configuring-whitenoise/34657/2 "2024-09-10T05:41:35Z")

</div>

Is debug mode true?

What does nginx error message output?

are you sure run collectstatic?

---

<div class="post-metadata">

**Author:** ![reswob](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/reswob/32/23128_2.png) [@reswob](https://forum.djangoproject.com/u/reswob)\
**Post date:** [September 10, 2024, 2:51pm UTC](https://forum.djangoproject.com/t/my-django-admin-page-doesnt-utilize-the-css-files-after-installing-and-configuring-whitenoise/34657/3 "2024-09-10T14:51:13Z")

</div>

Thank you for the suggestion. So I got it working, but I would really like to know why I had to take the steps I took in order to fix it. I first noticed in my /var/log/nginx/error.log I had a lot of permission-denied errors.

```
2024/09/10 05:10:18 [error] 4574#4574: *365 open() "/root/cquence/static/admin/js/theme.ab270f56bb9c.js" failed (13: Permission denied), client: http://localhost:8000/admin/, server: http://localhost:8000/admin/, request: "GET /static/admin/js/theme.ab270f56bb9c.js Heferrer: "http://localhost:8000/admin/

```

So that led me to believe I needed to chmod all my static files which I set to 777 and changed the ownership to www-data based on something I saw on another site. That made the admin start working with debug=False. Then it broke again when I set debug= True.

In order to fix that I had to change this code

```
#if DEBUG:
# STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
#else:
# STATIC_ROOT = os.path.join(BASE_DIR, 'static')

```

To this

```
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

```

And finally I had to change the default

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

```

To this

```
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath( __file__ )))

```

I would really like to know how this is all supposed to work and I can’t for the life of me understand why admin static files work fine with the default setup and then when you magically run whitenoise and collectstatic, that all stops working and you have to change permissions and have to change the BASE\_DIR, none of those steps are in the setup documentation I looked up prior to installing whitenoise.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [September 10, 2024, 3:07pm UTC](https://forum.djangoproject.com/t/my-django-admin-page-doesnt-utilize-the-css-files-after-installing-and-configuring-whitenoise/34657/4 "2024-09-10T15:07:06Z")

</div>

You’re actually mixing up a couple of concepts here.

By having:

> [@reswob](#):
>
> ```auto
> location /static/ {
> root /root/cquence;
> }
> 
> ```

You’re looking to have nginx configured to serve your static files, _not_ whitenoise.

> [@reswob](#):
>
> Then it broke again when I set debug= True.

This is an indication of a misconfiguration.

If you’ve got everything else correct, all requests for static files would be resolved before Django even sees them. Changing the debug setting shouldn’t matter at all as far as static files are concerned.

But, the settings you have here are inconsistent - and to some degree potentially dangerous.

Serving files from your home directory is never a good idea.

Also, your `STATIC_ROOT` needs to match what nginx is configured to serve. The `STATIC_ROOT` setting tells Django where the `collectstatic` command is going to copy your static files. That should be the location where nginx is going to serve them from. You then need to configure nginx to serve URLs starting with `STATIC_URL` from `STATIC_ROOT`.

You should have something like:

> [@reswob](#):
>
> ```auto
> STATIC_URL = '/static/'
> STATICFILES_DIRS = [BASE_DIR / 'static']
> STATIC_ROOT = "/var/www/staticfiles"
> 
> ```

with

> [@reswob](#):
>
> ```auto
> location /static/ {
> root /var/www/staticfiles/;
> }
> 
> ```

Notice now `STATIC_URL` corresponds to the `location` directive and `STATIC_ROOT` corresponds to the nginx `root` directive.

(And yes, if nginx is serving the static files, nginx needs permission to read those files.)

---

<div class="post-metadata">

**Author:** ![white-seolpyo](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/white-seolpyo/32/22386_2.png) [@white-seolpyo](https://forum.djangoproject.com/u/white-seolpyo)\
**Post date:** [September 11, 2024, 12:17am UTC](https://forum.djangoproject.com/t/my-django-admin-page-doesnt-utilize-the-css-files-after-installing-and-configuring-whitenoise/34657/5 "2024-09-11T00:17:00Z")

</div>

As far as I know, staticfiles are meant to be used in debug mode.

```auto
if DEBUG:
    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
else:
    STATICFILES_DIRS = []
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')
    # Because you have set "location /static/ { root /root/cquence; }", not "location /staticfiles/".

```

And run collectstatic.(must be set `DEBUG = False`)

Additionally, `BASE_DIR` must point to the path where `manage.py` is located.(maybe /root/cquence)  
Why the sudden change?

To solve the problem of www-data not having permission, it is recommended to add www-data to the group and then adjust the group permissions.

> **[nginx Permission Denied 문제 해결방법](https://django.seolpyo.com/entry/31/?page=3)**
>
> (django) ubuntu@ip-172-26-5-210:~$ sudo gpasswd -a www-data ubuntu Adding user www-data to group ubuntu (django) ubuntu@...

---

<div class="post-metadata">

**Author:** ![reswob](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/reswob/32/23128_2.png) [@reswob](https://forum.djangoproject.com/u/reswob)\
**Post date:** [September 11, 2024, 6:20am UTC](https://forum.djangoproject.com/t/my-django-admin-page-doesnt-utilize-the-css-files-after-installing-and-configuring-whitenoise/34657/6 "2024-09-11T06:20:54Z")

</div>

Thank you very much for the detailed response.

---

<div class="post-metadata">

**Author:** ![reswob](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/reswob/32/23128_2.png) [@reswob](https://forum.djangoproject.com/u/reswob)\
**Post date:** [September 11, 2024, 6:21am UTC](https://forum.djangoproject.com/t/my-django-admin-page-doesnt-utilize-the-css-files-after-installing-and-configuring-whitenoise/34657/7 "2024-09-11T06:21:23Z")

</div>

Thank you very much .