Menu
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.
784
You can either put template overrides in your project's templates directory or in an application's templates directory. If you have app and project templates directories that both contain overrides, the default Django template loader will try to load the template from the project-level directory first.
The extends tag is used to declare a parent template. It should be the very first tag used in a child template and a child template can only extend up to one parent template. To summarize, parent templates define blocks and child templates will override the contents of those blocks.
extends tag is used for inheritance of templates in django. One needs to repeat the same code again and again. Using extends we can inherit templates as well as variables.
{% %} and {{ }} are part of Django templating language. They are used to pass the variables from views to template. {% %} is basically used when you have an expression and are called tags while {{ }} is used to simply access the variable.
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.
75
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.
35
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 */
}
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
