Django admin css loads perfectly (status: 200) but the output shows pure html with no styles loaded

Question

I am very new to Django and I have been following steps from a site I found. I have already tried doing the solutions I found on other questions but none of them worked on my situation.

Django Admin - Webpage

cmd output

Django Admin - Output no CSS

My static settings looks like this:

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)


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

and my installed apps settings looks like this:

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

Thanks in advance!

EDIT:

here is the html I was loading:

{% load static %}<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Boards</title>
        <link rel="stylesheet" text="text/css" href="{% static 'myproject/css/bootstrap.css' %}">
    </head>
    <body>
        <div class="container">
            <ol class="breadcrumb my-4">
                <li class="breadcrumb item-active">Boards</li>
            </ol>
            <table class="table">
                <thead class="thead-inverse">
                    <tr>
                        <th>Board</th>
                        <th>Posts</th>
                        <th>Topics</th>
                        <th>Last Post</th>
                    </tr>
                </thead>
                <tbody>
                    {% for board in boards %}
                        <tr>
                            <td>
                                {{board.name}}<br>
                                <small class="text muted d-block">{{ board.description }}</small>
                            </td>
                            <td class="align-middle">0</td>
                            <td class="align-middle">0</td>
                            <td></td>
                        </tr>
                        {% endfor %}
                </tbody>
            </table>
        </div>
    </body>
</html>

you can try some of these solutions: https://stackoverflow.com/questions/13446325/django-css-is-not-not-working — Kiran K Telukunta, Mar 03 '20 at 09:13
Please elaborate what exactly is shown as "pure html"? Admin page or app page? Whole page or a part of it? Can you show a piece of html and according css for it? — Ivan Starostin, Mar 03 '20 at 17:24
I was loading a default bootstrap .css file I downloaded over the net. I already uploaded the .html code I am using. styling the .html explicitly worked but not when I started refering to a .css file using python/django. I'll check the solutions you posted here stackoverflow.com/questions/13446325/... and see if it works. I'll update this post if ever I found a solution over that thread. Thanks! — Carl Joshuel Gonzales, Mar 04 '20 at 03:59
Both the admin page and the app page. and the whole part of the html does not load any of the css file I downloaded from bootstrap. — Carl Joshuel Gonzales, Mar 04 '20 at 04:04
So admin page is actually styled by django-admin css, right? Only bootstrap styles are not applied, right? `Django admin css loads perfectly` - please elaborate what does this mean? _Any css except your's (downloaded from bootstrap) is loaded and applied successfully_? — Ivan Starostin, Mar 04 '20 at 12:52
@IvanStarostin Both the django-admin css and bootstrap css 'loads perfectly'. What I meant by that is an HTTP 200 OK Status response but the styles are still not visible on my webpage: both admin and app. only styles hardcoded in the html apply on the web page. I already tested uninstalling django via pip and reinstalling it via pip too, but the problem still persisted. — Carl Joshuel Gonzales, Mar 05 '20 at 01:02
I was not able to fix it but I tried using another unit and the css worked now. I think this is an isolated case and my problem is only related to my unit. Though, I still want to know how I can make it work on my PC. — Carl Joshuel Gonzales, Mar 20 '20 at 01:25

score 0 · Accepted Answer · answered Mar 03 '20 at 09:13

0

In your template, please load the static files like this

{% load static %}

answered Mar 03 '20 at 09:13

Mugoya Dihfahsih

425
3
11

I already included that at the start of my .html. but still no changes to the output webpage – Carl Joshuel Gonzales Mar 04 '20 at 04:00

Django admin css loads perfectly (status: 200) but the output shows pure html with no styles loaded

1 Answers1