Search code examples
djangotemplatesextend

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.

Solution

  • 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.