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

How can you efficiently narrow down ForeignKey options (such as using request.user) in Django when working with ModelFormSet and FormWizard?

The content of btn-id element in Angular is showing as undefined

What is the best way to ensure an image fills the entire space within a Bootstrap modal container?

Creating a mockup for a website design project in my class, utilizing HTML and CSS. Encountering issues with the CSS not displaying correctly, unsure of the root cause of the problem

How to Preserve Scroll Position when Toggling a Div using jQuery

When the canvas is in full screen mode, my div elements are hidden

Using Jquery: Removing the strikethrough effect upon the second click!

Ways to prevent text from wrapping in CSS

The CSS :first-child selector appears to be malfunctioning with the majority of elements

Confusion over python ImportError: Cannot locate module api - Understanding the issue and finding a resolution

White space in Bootstrap 4 grid caused by a full-width row

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

Creating Dynamic Height for Div Based on Another Element's Height Using ReactJS and CSS

Tips for aligning 2 divs in the same position?

Is there a way to stop Ajax calls initiated with Dajaxice?

Is there a way I can put together this CSS code?

Switching Div Elements Created by PHP

Is it possible to leverage the flex features of react-native in a manner similar to the row/column system of

Customizing the default image of a Select dropdown field in Sencha Touch

Stop the display of any data by utilizing Django-filter