Highlighting link of currently opened category tab in css

Question

I am trying to highlight a link of a currently opened category tab, here is what i have already done:

globs.py

def globs(request):
    cats = Category.objects.all()
    return {'cats': cats}

views.py

def news_by_category(request, slug):
    c = Category.objects.get(slug=slug)
    news = News.objects.filter(category=c, status='p').order_by('-id')
    #news = c.news_set.all().order_by('-id')
    return object_list(
        request,
        news,
        paginate_by = 5,
        extra_context = {'c':c},
        template_name = 'news_by_category.html')

base.html #bodyclass

<body class="{% block bodyclass %}{% endblock %}">

news_by_category.html

{% block bodyclass %}{{c|cut:" "}}{% endblock %}

base.html

<li><h4>Categories:</h4></li>
{% for i in cats %}
<li class="{{i.name|safe|cut:" "}}_li"> 
    <a href="myurl">{{ i.name }}</a>
</li> {% endfor %}

What i need to do now is to create style for every category, in category list, I could achieve this easily by styling inside a html file, but I'm not sure wether that would be proper (Would it?). I came up with some css styling,

{% for i in cats %}
body.{{ i|safe|cut:" "}} li.{{i|safe|cut:" "}}_li {
    color: red;
}

but as I can't use django template tags inside my .css file, this wont work.

My questions: 1) How could i make this css file work for me. Any chance for a little step by step?

2) If I failed step1, how improper would it be to style those few li elements inside html file?

EDIT: /trying another way

I tried using: base.html

{% for i in cats %}
<li class="{% ifequal 'request.get_full_path' '/k/{{ i.slug }}/' %}active{% endifequal %}">                 
<a href="#######">{{ i.name }}</a>
</li> {% endfor %}

.css

.active {{color:red;}

When i compared {{ request.get_full_path }} and /k/{{i.slug}}/ both returned same thing... but if its inside ifequal it doesnt seem to work.

score 1 · Answer 1 · answered May 09 '13 at 00:01

1

If you have a url:

{% url app:home i.slug as home %}

<li {% ifequal request.get_full_path home %}class="active"{% endifequal %}>

answered May 09 '13 at 00:01

Aleck Landgraf

1,545
14
13

score 1 · Accepted Answer · answered Feb 01 '12 at 16:55

1

You can create a simple class named "active" or something along those lines and add it to the current tab. Then, in your CSS you apply the active styles to that class. So you just append the active class and it'll automatically take the active style.

answered Feb 01 '12 at 16:55

Alex Morales

1,166
9
13

Could you please elaborate on that? I am not sure how could this work as the list of categories is not static. – mmln Feb 01 '12 at 17:36
1

Well, it really doesn't matter if it's dynamic. You're setting the class on the link that's currently active. For example, if the user clicks on a tab to make it active, you can grab the class attribute's value, append the active class name and update the active tab's class attribute. You can also do it client-side using jQuery's toggleClass method. The problem with this approach is if the page refreshes when you click on a tab, you need to set a cookie and store the active tab's identifying information. – Alex Morales Feb 01 '12 at 18:42
I checked some blogs related to this subject, now i know what you mean.I added .active {color: red} class, then I tried to append it to li's using a "if" template tag, but i failed, could you check on the code I attached in my question and help me out a bit more? – mmln Feb 01 '12 at 19:43
How are you adding the class name? I really don't know much about Django and python but if you show that code maybe we can figure it out. – Alex Morales Feb 01 '12 at 20:35
I found a hack that works... {% ifequal request.get_full_path|cut:"/k/"|cut:"/" i.slug %}active{% endifequal %} – mmln Feb 01 '12 at 23:42
No worries, at least you got it working. That's what matters. – Alex Morales Feb 02 '12 at 00:26

Highlighting link of currently opened category tab in css

2 Answers2