Inheriting Django templates for a unique CSS class markup approach

Question

Inheriting Django templates for a unique CSS class markup approach

I want to create a master.html file for inheritance, but I'm facing an issue where the code is repetitive in three different places except for the body class.

Here's my current master.html:

<html>
 <head>...</head>
 <body>
  {% block one %}{% endblock %}
  {% block two %}{% endblock %}
  {% block extra %}{% endblock %}
 </body>
</html>

However, in certain instances, I have: <_body class="front"> <_body class="not_front"> The remaining content such as .js files and images remains the same.

How can I efficiently handle this without having three separate 'master' files?

css django django-templates

Answer 1

Answer №1

To create a block within the <body> element, follow this structure:

<html>
    <head>...</head>
    <body {% block body_options %}{% endblock %}>
        {% block one %}{% endblock %}
        {% block two %}{% endblock %}
        {% block extra %}{% endblock %}
    </body>
</html>

After that, in your child templates, you can use:

{% extends 'master.html' %}
{% block body_options %}class="front"{% endblock %}

Answer 2

To create a block within the <body> element, follow this structure:

<html>
    <head>...</head>
    <body {% block body_options %}{% endblock %}>
        {% block one %}{% endblock %}
        {% block two %}{% endblock %}
        {% block extra %}{% endblock %}
    </body>
</html>

After that, in your child templates, you can use:

{% extends 'master.html' %}
{% block body_options %}class="front"{% endblock %}

Inheriting Django templates for a unique CSS class markup approach

Answer №1

Similar questions

Captivating Images accompanied by Descriptive Captions

JavaScript Event Listener causing the Sticky Position to Break

displaying an item within a text field

:after pseudo-element along with HTML tags

Creating a tab component using vanilla javascript

Transmit a Django model queryset to React via Ajax for seamless integration

Creating a counter for a list using CSS

Explore the Codrops website with the help of our convenient tour feature and

Choose the initial unordered list within a specific division through Jquery

Encountering a problem while trying to deploy a Django application on Heroku

Arranging the rows and columns of a table in optimal alignment

What is the best way to design a scalable row of square elements using Bootstrap 5?

Having trouble getting a background image to show up using node.js?

Issue with CSS in Internet Explorer 7

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

How can I prevent a browser from caching a CSS file when the file is updated?

The bold horizontal line in HTML tables is a bit unusual and is caused by the border-collapse property

Effortlessly switch between CSS animation styles while adjusting animation settings

Ways to divide background color in half using CSS

Adjust the width of a textarea to expand evenly within its container when exceeding the specified width limit using CSS