Staticfile stylesheet not rendering

cooperwhitley commented 12 months ago

Describe the bug A clear and concise description of what the bug is.

Static css file is not connecting properly to documents

What is the problem you are trying to solve?

Static files are not loading, or at least my stylesheet is not being recognized.

Expected behavior A clear and concise description of what you expected to happen.

I would expect for my styles to be applied given that per the documentation I have the stylesheet implemented properly.

What is the actual behavior? A clear and concise description of what actually happened.

My styles were not applied

Post any code you think might be relevant (one fenced block per file) my base html

{% load static %}
<!-- I have load static properly implemented here as per the documentation -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>TeachEasy</title>
    <!-- bootstrap cdn is connecting properly -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- this is the stylesheet that won't render -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body> 
    <div id="header">
        <nav id="header-nav">
            <a href="/" class="anim-text">TeachEasy</a>
            <a href="" class="non-logo-links">Courses</a>
            <a href="" class="non-logo-links">Assignments</a>
            <a href="" class="non-logo-links">Posts</a>
        </nav>
    </div>

    <main>
        {% block content %}
        {% endblock %}
    </main>
    <footer>
        <!-- footer stuffs -->
    </footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</html>

staticfiles are configured as such in settings.py

# lines 36-44
INSTALLED_APPS = [
    'main_app',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
# line 123
STATIC_URL = 'static/'

the static directory is placed as follows:

teacheasy/main_app/static/css/style.css

What is your best guess as to the source of the problem?

Frankly, I have absolutely no idea. I implemented static files exactly as written in the Django documentation.

What things have you already tried to solve the problem?

I tried removing bootstrap from the project in order to make sure it was not due to any conflicts, however that was not the case. I also tried placing the static files in other locations, although I tried this knowing that that wouldn't do anything as the static files are searched on the app level.

Additional context Add any other context about the problem here.

Paste a link to your repository here https://github.com/cooperwhitley/teacheasy

asands94 commented 12 months ago

Have you tried clearing your cache on Chrome? Sometimes Chrome stores an old version of your stylesheet and you won't be able to see new changes.

cooperwhitley commented 12 months ago

That did it! Thank you.

sei-ec-remote / team-project-issues

Staticfile stylesheet not rendering #167