{% load static%} does not work for extended Django html files

Using Django Templates & Frontend
1

I am trying to load a CSS file located in my static files onto an extended django html file. The {% load static %} works in the base.html template but does not work anywhere else. I’m not sure how to proceed

Here is my code

base.html

{% load static %}
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="{% static 'styles/style.css' %}" />
    <title>My Site</title>
    {% block htmlhead %}
    {% endblock htmlhead %}
  </head>
  <body>
    {% include 'sidebar.html' %}
    
    {% include 'navbar.html' %}
    
    
    
    {% block content %}{% endblock %}
  
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="{% static 'js/script.js' %}"></script>
  </body>
</html>

here is an extended django html template

{% extends 'base.html' %}
{% load static %}
{% block content %}

<main id="content">
  <h1 class="title">Dashboard</h1>
  <ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li class="divider">/</li>
    <li><a href="#" class="active">Dashboard</a></li>
  </ul>
  <div class="info-data">
  </div>
  <div class="project-home-data">
    <div class="project-content-data">
      <div class="project-head">
        <h3>Your Tickets</h3>
      </div>
      <div class="project-body">
        <table>
          <thead>
            <tr>
            <th>Project Name</th>
            <th>Description</th>
            <th></th>
            <th>Created</th>
            </tr>
          </thead>
          <tbody>
            <tr>
            <td><a href="">Hello</a></td>
            <td>Hello</td>
            <td></td>
            <td>Hello</td>
            
            </tr>
            
          </tbody>
        </table>
        <p>Showing 1 to 5 of 5 entries </p>
        <div class="pagination">
          <a href="#">&laquo;</a>
          <a href="#">1</a>
          <a href="#">2</a>
          <a href="#">3</a>
          <a href="#">4</a>
          <a href="#">5</a>
          <a href="#">6</a>
          <a href="#">&raquo;</a>
        </div>
      </div>
    </div>
  </div>
</main>
{% endblock %}

What it currently looks like

enter image description here

What it should look like

enter image description here

2

What’s making you think that the load static tag isn’t working? I don’t see where you have any static tags in that template where load static would even be used.

The load static tag does not load static files. It’s purpose is to allow you to use the static tag in your template.

What you want to look at here are the requests being made to the server. If you do a shift-refresh on the page, your server console should show requests for the static files in addition the requests for the page.

3

I should rephrase then, why isn’t the CSS working for the extended django template?

4

Examine the html that was rendered and sent to the browser. Examine the ancillary requests being made for that page in your console logs. Ensure you don’t have another base.html template that’s being loaded for that page. Verify that your css selectors are actually correct such that they would apply to the elements on your page.

5

Your {% block content % } need to come before your {% load static %}

image
image1512×2016 1.32 MB

6

That is not an accurate statement. The load static doesn’t directly affect the rendering, it just makes that tag library available for use. In this case it is irrelevent since he’s not using any static tags in his template.

Also, in the future, please do not post images of code or templates. If you’re going to post code, copy/paste it into the body of your message, surrounded by lines of three backtick - ` characters. This means you’ll have a line of ```, then your code (or template), then another line of ```.

7

In your extended html file after loading the static you have not linked the css file. Use this tag to link the css file <link rel="stylesheet" href="{% static 'styles/style.css' %}" /> in

8

It’s not necessary to do that since the style.css is (should be) loaded in the base template. If it’s loaded by the base, it does not need to be loaded in the template that extends the base.