{% 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.

9

I have same question. I load static in base.html but whenever i try to use it in child tempelate it require me to load it again in child tempelate
base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %} Title {% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
    {% include 'navbar.html' %}
    
    <div class="content">
        {% block content %}
        {% endblock %}
    </div>
    {% include 'footer.html' %}
</body>
</html>

house-detail.html

{% extends 'base.html' %}
{% block title %}House Details - HouseRentHub {% endblock %}

{% block content %}
<!-- Main Content -->
<div class="container property-info">
    <div class="row">
        <!-- Main Image and Thumbnails -->
        <div class="col-md-8">
            <div class="main-image">
                <!-- Default selected image -->
                <img id="mainImage" src="{% static 'img/villa.jpg' %}" alt="Main House Image">
            </div>
            <div class="thumbnail-images row mt-2">
                <div class="thumbnail-images row mt-2">
                    <div class="col-4">
                        <img src="{% static 'img/villa.jpg' %}" alt="Thumbnail 1" data-image="{% static 'img/villa.jpg' %}">
                    </div>
                    <div class="col-4">
                        <img src="{% static 'img/cozy.jpg' %}" alt="Thumbnail 2" data-image="{% static 'img/cozy.jpg' %}">
                    </div>
                    <div class="col-4">
                        <img src="{% static 'img/modern.jpg' %}" alt="Thumbnail 3" data-image="{% static 'img/modern.jpg' %}">
                    </div>
                </div>
                
            </div>
        </div>

        <!-- Property Information -->
        <div class="col-md-4">
            <h1 class="property-title">Cozy Apartment in Kigali</h1>
            <p class="property-price">$500/month</p>
            <p><strong>Description:</strong> A beautiful, fully furnished apartment in the heart of Kigali. This cozy apartment offers 2 bedrooms, a spacious living room, and a modern kitchen. The location is ideal for families and professionals, with easy access to local amenities.</p>
            <p><strong>Amenities:</strong></p>
            <ul>
                <li>2 Bedrooms</li>
                <li>1 Bathroom</li>
                <li>Fully Furnished</li>
                <li>Air Conditioning</li>
                <li>High-Speed Internet</li>
                <li>24/7 Security</li>
                <li>Parking Space</li>
            </ul>
        </div>

    </div>

    <div class="row">
        <p><strong>Location:</strong></p>
            <div id="map" style="height: 200px;"></div>
    </div>
</div>

<!-- Contact Section -->
<div class="container py-5">
    <h2>Contact the Owner</h2>
    <form class="contact-form">
        <div class="row">
            <div class="col-md-6">
                <input type="text" class="form-control" placeholder="Your Name" required>
            </div>
            <div class="col-md-6">
                <input type="email" class="form-control" placeholder="Your Email" required>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <textarea class="form-control" placeholder="Your Message" rows="5" required></textarea>
            </div>
        </div>
        <button type="submit" class="btn">Send Message</button>
    </form>
</div>


<script>
    document.querySelectorAll('.thumbnail-images img').forEach(function(thumbnail) {
    thumbnail.addEventListener('click', function() {
        var mainImage = document.getElementById("mainImage");
        mainImage.src = thumbnail.getAttribute('data-image');
    });
});


    // Initialize and add the map
    function initMap() {
        // The location of the property
        var propertyLocation = {lat: -1.944072, lng: 30.061885};
        // The map, centered at the property location
        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 15,
            center: propertyLocation
        });
        // The marker, positioned at the property location
        var marker = new google.maps.Marker({position: propertyLocation, map: map});
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

{% endblock %}

Result

a
a1027×437 34.7 KB

10

That’s correct. That’s the proper and expected behavior.

Again, the {% load static %} tag doesn’t do anything in your template. It loads the definition for the static tag so that you can use {% static ... %} elsewhere in that template.

1 Like