Django extends tag not extending

Using Django Templates & Frontend
1

I am trying to understand why my finance page, purchases page, add menu page, and add ingredient add recipe page are not having a blue background where I can see everything.
Currently the screen is white and if you hover over the hyperlinks you can see them appear. I was expecting my extends tag to work.

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Delicious Bootstrap Template - Index</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,600,600i,700,700i|Satisfy|Comic+Neue:300,300i,400,400i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href={% static "assets/vendor/animate.css/animate.min.css" %} rel="stylesheet">
  <link href={% static "assets/vendor/bootstrap/css/bootstrap.min.css" %} rel="stylesheet">
  <link href={% static "assets/vendor/bootstrap-icons/bootstrap-icons.css" %} rel="stylesheet">
  <link href={% static "assets/vendor/boxicons/css/boxicons.min.css" %} rel="stylesheet">
  <link href={% static "assets/vendor/glightbox/css/glightbox.min.css" %} rel="stylesheet">
  <link href={% static "assets/vendor/swiper/swiper-bundle.min.css" %} rel="stylesheet">


  <!-- Template Main CSS File -->
  <link href={% static "assets/css/style.css" %} rel="stylesheet">
  <link href="{% static 'inventory/style.css' %}" rel="stylesheet">
  <!-- =======================================================
  * Template Name: Delicious
  * Updated: Sep 18 2023 with Bootstrap v5.3.2
  * Template URL: https://bootstrapmade.com/delicious-free-restaurant-bootstrap-theme/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
  <script src="https://unpkg.com/htmx.org@1.9.8" integrity="sha384-rgjA7mptc2ETQqXoYC3/zJvkU7K/aP44Y+z7xQuJiVnB/422P/Ak+F/AqFR7E4Wr" crossorigin="anonymous"></script>
</head>

<body>
<div style="background-color: skyblue">
{% block body_wrapper %}
{% block top_nav %}
  {% include 'inventory/topnav.html' %}<!-- ======= Hero Section ======= -->
{% endblock %}
{% block messages %}
  {% include 'inventory/messages.html' %}
{% endblock messages %}
{% block body %}
{% block app %}
<!-- This is where app_base.html extends from here -->
{% endblock app %}
{% endblock body%}
{% block footer %}
  {% include 'inventory/footer.html' %}
{% endblock footer %}
{% endblock body_wrapper %}
        </div>

  <!-- Vendor JS Files -->
  <script src={% static "assets/vendor/bootstrap/js/bootstrap.bundle.min.js" %}></script>
  <script src={% static "assets/vendor/glightbox/js/glightbox.min.js" %}></script>
  <script src={% static "assets/vendor/isotope-layout/isotope.pkgd.min.js" %}></script>
  <script src={% static "assets/vendor/swiper/swiper-bundle.min.js" %}></script>
  <script src={% static "assets/vendor/php-email-form/validate.js" %}></script>

  <!-- Template Main JS File -->
  <script src={% static "assets/js/main.js" %}></script>

finance.html

{% extends 'inventory/base.html' %}

{% block content %}
{% load static %}
<link rel = "stylesheet" href="{% static 'inventory/style.css' %}">

<table>
  <thead>
    <tr>
    <th>Total Revenue</th>
    <th>Total Cost</th>
    <th>Total Profit</th>
  </tr>
</thead>
    <tr>
      <td>{{total_revenue}}</td>
      <td>{{total_cost}}</td>
      <td>{{total_profit}}</td>

    </tr>
</table>
{% endblock %}
2

I suspect this is more of a design / CSS issue than it is Django. You have a top-level DIV container that is not inheriting height. If you set a height on the DIV (ex height: 1000px) you’ll see that it is there and with the correct colour.

Additionally, you have a call to a CSS file that doesn’t exist: Line 30 in base.html

This is my personal preference, but I recommend building out your website’s wire-frame in pure HTML / CSS first, and once that is where you want it to be transpose it over to Django’s template system. Otherwise (since I suspect you’re fairly new to Django) you’ll be fighting your design at the same time you’re trying to learn Django.

3

Also: did you make your requirements.txt file by hand? Normally it’s created with a pip freeze which can then be used by pip to ingest with install -r but your file isn’t like any I’ve encountered before.

If you made it by hand I recommend calling it something else, otherwise you will cause grief to any other developers working on the project, or even yourself in the distant future if you’ve adopted the standard requirements.txt method down the road.

4

Screen Shot 2023-12-01 at 8.03.35 PM
Screen Shot 2023-12-01 at 8.03.35 PM1913×416 111 KB

5

network tab
network tab1920×1080 194 KB