Okay, so I have this first HTML file (header.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>M4A</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
<link rel="icon" href="../../static/image/logo.png">
</head>
<body class="body" style="background-color:#f9f9f9">
{% block content %}
<ul>
<li><a href="/"><img src="../../static/image/logoRect.png" width="25"> </a></li>
<li><a href="/movies">Movies</a></li>
<li><a class="left" href="">Search</a></li>
<li><a class="left" href="/profile/">Profile</a></li>
<li><a class="left" href="#about">Explore</a></li>
</ul>
{% endblock %}
</body>
</html>
And then I have this other one (home.html):
{% extends "START/header.html" %}
{% block content %}
<p> TEST</p> <!-- for example -->
{% endblock %}
but when running the second one it doesn't extend really, it looks like its replacing the content of the other HTML file's body. the background color is still the one in my css file though so I'm sure it's reading it. What am I missing?
You are replacing the body when you use the same block tag in your home.html that in your header.html
{% block content %}
You should use a different name if you dont want to replace it.
In addition you can use:
{{ block.super() }}
If you want to extend the block content data, notice it's a different issue from extending a template.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With