Reputation: 213
I just worked through the flask tutorial, step by step creating a blog web application. The entries are rendered via a jinja template:
<ul class=entries>
{% for entry in entries %}
<li><h2>{{ entry.title }}</h2>{{ entry.text|safe }}
{% else %}
<li><em>Unbelievable. No entries here so far</em>
{% endfor %}
</ul>
The color is defined in a style.css:
a, h1, h2 { color: #377ba8; }
However, I really would like to be able, to switch the color of the entry depending on a condition. For example, if the entry.text is 'apples', it should be red, otherwise green.
Being a bloody noob to web development, I feel like something like this might be javascript, but I simply don't see how to accomplish this task and would appreciate your help.
Best,
gbrown
Upvotes: 3
Views: 11891
Reputation: 388463
First of all, you should add a rule to your CSS so that you can change the color by applying a class to your element. Something like this:
.apples {
color: red;
}
Then, you need to make your Jinja template apply a class
attribute depending on the value of entry.text
:
<ul class="entries">
{% for entry in entries %}
<li {% if entry.text == 'apples' %} class="apples" {% endif %}>
<h2>{{ entry.title }}</h2>
{{ entry.text|safe }}
</li>
{% else %}
<li>
<em>Unbelievable. No entries here so far.</em>
</li>
{% endfor %}
</ul>
This technique is described in the Jinja manual for example under the topic “Highlighting Active Menu Items”.
Upvotes: 7