Replicating the functionality of one class to another class in Twitter Bootstrap

Question

Replicating the functionality of one class to another class in Twitter Bootstrap

In the Twitter-bootstrap framework, it searches for the active class within an li element to determine which navigation element should be highlighted.

However, I am using django-cms, which by default uses a selected class to indicate the same thing (i.e. "this tab is where you currently are"). Is there a way to achieve something like this:

class "selected" = class "active"

The li element generated by django-cms is created using the template tag show_menu, so I do not have direct access to the element to manually add the active class myself.

css django twitter-bootstrap

Answer 1

Answer №1

There is an option to assign multiple CSS classes to your HTML elements for styling purposes...

<div class="highlighted visible">
    ...
</div>

Answer 2

There is an option to assign multiple CSS classes to your HTML elements for styling purposes...

<div class="highlighted visible">
    ...
</div>

Answer 3

Answer №2

Consider adjusting the bootstrap mixin to search for "selected" rather than "active" - this approach prevents overloading your markup with superfluous classes.

Answer 4

Consider adjusting the bootstrap mixin to search for "selected" rather than "active" - this approach prevents overloading your markup with superfluous classes.

Answer 5

Answer №3

In the scenario where you have your own server hosting Twitter Bootstrap instead of linking directly from Github, a modification to the Bootstrap .active class selector could involve updating it to:

.active, .chosen {
    ...
}

If this is not feasible, an alternative approach would be to utilize LESS CSS, which allows for the desired type of inheritance whether executed on the client side or server side.

.chosen {
    .active;
}

Answer 6

In the scenario where you have your own server hosting Twitter Bootstrap instead of linking directly from Github, a modification to the Bootstrap .active class selector could involve updating it to:

.active, .chosen {
    ...
}

If this is not feasible, an alternative approach would be to utilize LESS CSS, which allows for the desired type of inheritance whether executed on the client side or server side.

.chosen {
    .active;
}

Answer 7

Answer №4

To avoid duplicating a class, simply create a new class and add the desired styles along with the .active class. For example:

.navigation a:hover, .navigation .active a,  .navigation .chosen a {
  background-color: #f5f5f5;
}
.navigation .active a, .navigation .chosen a {
  color: #999999;
  cursor: default;
}

This approach allows the .chosen class to inherit all properties from the .active class.

Answer 8

To avoid duplicating a class, simply create a new class and add the desired styles along with the .active class. For example:

.navigation a:hover, .navigation .active a,  .navigation .chosen a {
  background-color: #f5f5f5;
}
.navigation .active a, .navigation .chosen a {
  color: #999999;
  cursor: default;
}

This approach allows the .chosen class to inherit all properties from the .active class.

Answer 9

Answer №5

If you're looking for a simple solution, one way I've discovered is to set a custom menu template in the show_menu function.

{% show_menu 0 100 0 0 "bootstrap_menu.html" %}

For the bootstrap_menu.html file, you can start with the original django-cms menu template, duplicate it, and ensure that it also adds the 'active' class:

{% load menu_tags %}
{% for child in children %}
    <li class="{% if child.selected %}selected active{% endif %}{% if child.ancestor %}ancestor{% endif %}{% if child.sibling %}sibling{% endif %}{% if child.descendant %}descendant{% endif %}">
        <a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">{{ child.get_menu_title }}</a>
        {% if child.children %}
            <ul>
                {% show_menu from_level to_level extra_inactive extra_active template "" "" child %}
            </ul>
        {% endif %}
    </li>
{% endfor %}

You can locate the django-cms menu template in the ../menues/templates/menu directory within your site packages if you installed it via pip/easy_install, etc.

Answer 10

If you're looking for a simple solution, one way I've discovered is to set a custom menu template in the show_menu function.

{% show_menu 0 100 0 0 "bootstrap_menu.html" %}

For the bootstrap_menu.html file, you can start with the original django-cms menu template, duplicate it, and ensure that it also adds the 'active' class:

{% load menu_tags %}
{% for child in children %}
    <li class="{% if child.selected %}selected active{% endif %}{% if child.ancestor %}ancestor{% endif %}{% if child.sibling %}sibling{% endif %}{% if child.descendant %}descendant{% endif %}">
        <a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">{{ child.get_menu_title }}</a>
        {% if child.children %}
            <ul>
                {% show_menu from_level to_level extra_inactive extra_active template "" "" child %}
            </ul>
        {% endif %}
    </li>
{% endfor %}

You can locate the django-cms menu template in the ../menues/templates/menu directory within your site packages if you installed it via pip/easy_install, etc.

Replicating the functionality of one class to another class in Twitter Bootstrap

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is there a way to apply the style property only when a component is hovered in Next.js?

Using the onclick event in JavaScript to create transition effects for swapping images

Two floating elements collide as the first one drifts over the second

The Vue Swiper does not support inline containers in my code

CSS translation animation fails to execute successfully if the parent element is visible

Learn how to dynamically add a class to an element when hovering, and ensure that the class remains even after the mouse has

Is it possible to create this layout using Bootstrap 5? I want to stack spans, with one inside the container and one outside

Is there a way to adjust the height of one div based on the height of another div in Bootstrap?

What is the best way to incorporate a background image that complements my content?

Updating a Django query dynamically based on a string field

Unable to adjust column width and margin in fixed layout mode

Encountering the HTTP Error 502 Bad Gateway when running Django and Satchmo with nginx and FastCGI after a period of time

Tips for eliminating the margin in a bootstrap navigation bar when hovering?

What is the ideal location for storing my CSS files?

"Font Awesome icons are only visible online on the -dev website, not visible anywhere

The communication between Ajax and django views appears to be incomplete as the data is

How do I align the Close button to the right in a Bootstrap 5 toast message?

Understanding the discrepancy between Django's admin `save_model()` method and the `post_save` signal

Layer several divs inside a main div

What is the best way to combine a radio button with a dropdown button in Bootstrap?