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.

ablm

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.

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.

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