Geek Answers Handbook

Django template: advanced template able to change css on parent page?

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

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

But the body does not seem to respond to any changes. I think I missed something. Please help, thanks.

Edit: In "child.html" I just have

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

and I'm trying to change body css in template_conf.css , and there is no other page that includes template_conf.css .

+4
source share
3 answers

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 be <body class="my_new_body_css_class">...</body> , and you must define this class in related CSS.

+6
source

To do this, add a block to base.html in your head that will allow you to insert another css AFTER what's 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 a <link> in child.html to another

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

This allows you to override the partd base.html that you want to change, but you can customize the parts of the page you need in child.html.

+8
source

if you see new css loaded in firebug or another browser debugger try:

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

}

+1
source

More articles:


All Articles