django template: Is extended template able to change css in parent page?

问题

I have two django template pages, one of them is "base.html", with basic html tags setup as a base template. Now I have a page "child.html" that extends it, with something like {% extends "base.html" %} in it. Now I have to change <body> background color for this particular page, so in the css of "child.html" I wrote:

body {
    background-color: #000000;
    /* some other css here */
}

But the body doesn't seem to respond to any changes. I think I must have missed something. Please help, thanks.

Edit: In "child.html", I simply have

<link rel="stylesheet" type="text/css" href="/site-media/css/template_conf.css"/>

and I try to change body css in template_conf.css, and there's no other page that includes template_conf.css.

回答1:

In the main template:

<body class="{% block body_class %}{% endblock %}">
...
</body>

Then in the child template, just define the block:

{% block body_class %} my_new_body_css_class {% endblock %}

This will render a <body class="my_new_body_css_class">...</body> and you have to define this class in a linked CSS.

回答2:

To do this add a block in base.html in the head that allow you to inset another css AFTER the one in base.html

<head>

    .... other head tags ....

    <link rel="stylesheet" type="text/css" href="/site-media/css/template_conf.css"/>
    {% block extra_css %}{% endblock %}
</head>

This allows you to override css tags in template_conf.css by adding in another <link> tag in child.html

{% block extra_css %}
<link rel="stylesheet" type="text/css" href="/site-media/css/child_template.css"/>
{% endblock %}

This allows you to override the partd of base.html that needs to change, while still being able to tweak the parts of the page in child.html that are required.

回答3:

if you see the new css loaded in the firebug or other browser debugger, please try:

body {
background-color: #000000 !important;
/* some other css here */

}

来源：https://stackoverflow.com/questions/14781281/django-template-is-extended-template-able-to-change-css-in-parent-page

标签

django

templates

extend