I can't load my CSS login page in Django admin

I have a Django project that I deployed without really adding any styling for 2 reasons:

  1. I didn't know any front-end back then.

  2. I wanted to do it for the sake of doing it.

Now, I have written HTML and CSS for the login page. The first place I want to apply it is the admin page, but this is what I see (as shown in the picture I shared). I can't find the problem in my project.

I also uploaded the project to GitHub here: https://github.com/manirng/sukablyat-django

Please ignore the name; I never thought it would go online.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,300&display=swap');

*{
    margin: 0px;
    padding: 0px;
    font-family: 'Poppins',sans-serif;
}

#bg-video{
    width: 100%;
    height: 100vh;
    position: absolute;
    object-fit: cover;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background-position: center;
    background-size: cover;
}
.box{
    position: relative;
    width: 400px;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
    border-radius: 20px;
}
h2{
    font-size: 2em;
    color: white;
    text-align: center;
}
.input-field{
    position: relative;
    margin: 20px 0;
    width: 310px;
    border-bottom: 2px solid white;
}
.input-field label{
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translate(-50);
    color: white;
    font-size: 1em;
    pointer-events: none;
    transition: .5s;
}
input:focus ~label,
input:valid ~label{
    top: -5px;
}
.input-field input{
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    padding: 0 35px 0 5px;
    color: white  ;
}

.input-field ion-icon{
    position: absolute;
    right: 8px;
    color: black;
    font-size: 1.2em;
    top: 20px;
}
.forget{
    margin: 15px 0 15px;
    font-size: small;
    color: white;
    display: flex;
    justify-content: center;
}
.forget label input{
    margin-right: 3px;
}

.forget label a{
    color: white;
    text-decoration: none;
}
.forget label a:hover{
    text-decoration: underline;
    color: blue;
}
button{
    height: 40px;
    width: 100%;
    border-radius: 40px;
    background: white;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
}

button:hover{
    box-shadow: 1px 5px 7px 1px purple;
}
.register{
    font-size: .9em;
    color: white;
    text-align: center;
    margin: 25px 0 10px;
}
.register p a{
    text-decoration: none;
    color: white;
}
.register p a:hover{
    text-decoration: underline;
}

And here is my HTML for reference:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | Page</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
</head>
<body>
    <section>
        <!-- Update video path to use static files -->
        <video src="{% static 'videos/background.mp4' %}" loop muted autoplay id="bg-video" type="video/mp4"></video>
        <div class="box">
            <div class="form-value">
                <form method="POST">
                    {% csrf_token %}
                    
                    <!-- Display error messages -->
                    {% if messages %}
                    <div class="messages">
                        {% for message in messages %}
                        <div class="alert alert-{{ message.tags }}">
                            {{ message }}
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                    
                    <h2>Login</h2>
                    <div class="input-field">
                        <ion-icon name="mail-outline"></ion-icon>
                        <!-- Change to username and add name attribute -->
                        <input type="text" name="username" required>
                        <label for="">Username</label>
                    </div>
                    <div class="input-field">
                        <ion-icon name="lock-closed-outline"></ion-icon>
                        <!-- Add name attribute -->
                        <input type="password" name="password" required>
                        <label for="">Password</label>
                    </div>
                    <div class="forget">
                        <label for=""><input type="checkbox">Remember me <a href="#">Can't login?</a></label>
                    </div>
                    <button type="submit">Login</button>
                    <div class="register">
                        <p>Don't have an account? <a href="#">Register</a></p>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>

i think my repo works(it should be on staticfiles,css,login.css and on login.html in the movies templates) now and these are the web page errors:
Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

theme.js:1 Failed to load resource: the server responded with a status of 404 ()

login/?next=/admin/:1 Refused to execute script from 'https://sukablyat.onrender.com/static/admin/js/theme.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

nav_sidebar.js:1 Failed to load resource: the server responded with a status of 404 ()

login/?next=/admin/:1 Refused to execute script from 'https://sukablyat.onrender.com/static/admin/js/nav_sidebar.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

i've checked online and most people were saying the css root is wrong but im pretty sure it isnt

root is:

staticfiles/admin:
    css:
        login.css

the code i have in my login.html is:

{% load static %}
<link rel="stylesheet" href="{% static 'css/login.css' %}">

Have you run collectstatic yet? because from what i see you included the entire venv in the repo which possibly makes the reason to this is that your projects is using the default django static folder

To fix this here's what to do:

  1. Go back to Debug mode.

  2. Erase everything in the static directory

  3. Add this in settings.py

    STATICFILE_DIRS = [ BASE_DIR / "static"] # This is your actual static directory

  4. On terminal, run:

    python manage.py collectstatic

  5. A directory with the same name you defined in STATICFILE_DIRS will appear with all the admin assets

  6. Under static/admin (could also be /www/admin), you'll find the css folder; edit the login.css file to your liking

EXPLANATION:

You didn't define staticfile_dirs in settings.py, which is responsible for managing the static folder in the file system; you only used the static root, which manages the sub-directories in that folder for ease of deployment. If you follow these steps, hopefully it'll work.

SIDENOTE: YOU LEFT YOUR SECRET_KEY AVAILABLE IN PUBLIC IN PRODUCTION

Change it and make it into an environmental variable.

Documenation: https://docs.djangoproject.com/en/5.2/ref/settings/#:~:text=STATICFILES_DIRS

Вернуться на верх