Dynamic inline CSS styling in Django template

Question

I am new to Django and am trying to figure out how to use dynamic CSS that is only active for the current category a user is on.

I have a side nav with some categories and whichever category the user is on should be active with the use of a class.

This is currently how I have things:

{% for category in categories %}
   <li><a href="{% url 'category' category.id %}"
         {% if category.id in request.path %}
             class="uk-text-bold"
         {% endif %} >{{ category.name }}</a></li>
         {% endif %}

This is obviously not correct and doesn't work so I imagine there is a proper way to do something like this and I'm just having a hard time understanding or finding that out.

Any help is appreciated! Thanks.

i believe you can find your answer here

Mahdi Sorkhmiri
– Mahdi Sorkhmiri

2020-04-27 13:32:48 +00:00
Commented Apr 27, 2020 at 13:32 — Mahdi Sorkhmiri
– Mahdi Sorkhmiri, Commented Apr 27, 2020 at 13:32

Amir · Accepted Answer · 2020-04-27 13:43:18Z

2

you can make a html file e.g. style.html like this

{% load static %}
<style>

{% if your_condition %}

.active{
  /*your styles here*/
 }

{% endif %}
</style>

and include it in your main html file.

{% for category in categories %}
                                <li><a href="{% url 'category' category.id %}"
                                            class="classname">{{ category.name }}</a> 
                                </li>
                        {% endfor %}

you might need js to handle adding and removing active class to your element. it would be something like this

var categories = document.getElementsByClassName('classname');

for (var i = 0; i < tabs.length; i++) {
   tabs[i].addEventListener("click", function () {
    Array.prototype.forEach.call(document.getElementsByClassName("classname"), 
    function (tab) {
       tab.classList.remove('active');
    });
    this.classList.add('active');
   });
   }

I hope this will help you. also I suggest you to read django custom template tag .with template tags you can write a dynamic style tag for your html and call it when you need.

answered Apr 27, 2020 at 13:43

Amir

342 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brandon Evans Over a year ago

Awesome, this is helpful! Thanks @Amir. I will look into this.

saarrooiii · Accepted Answer · 2022-05-20 15:51:19Z

0

The second {% endif %} should be changed for an {% endfor %}. Then everything works the way you expect. I do this in my code all the time and I've had no problems with it.

{% for category in categories %}
  <li>
    <a href="{% url 'category' category.id %}"
      {% if category.id in request.path %} class="uk-text-bold" {% endif %} >
      {{ category.name }}
    </a>
  </li>
{% endfor %}

answered May 20, 2022 at 15:51

saarrooiii

11 silver badge

Collectives™ on Stack Overflow

Dynamic inline CSS styling in Django template

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related