Modification de la couleur des pilules de navigation Twitter bootstrap

Question

J'essaie de changer la couleur active (une fois qu'il a cliqué, il reste la couleur bleu clair de twitter) pour chaque onglet:

  <ul class="nav nav-pills">
   <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
   <li><a href="#tab2" data-toggle="tab">Sample</a></li>
   <li><a href="#tab3" data-toggle="tab">Sample</a></li>
 </ul>
 

(Comment) puis-je faire cela en CSS?

Answer 1

Vous pouvez fournir votre propre classe pour l' nav-pills conteneur avec votre couleur personnalisée pour votre lien actif, de cette façon, vous pouvez créer autant de couleurs que vous le souhaitez sans modifier le fichier de bootstrap couleurs par défaut dans d'autres sections de votre page. Essayez ceci:

Balisage

<ul class="nav nav-pills red">
    <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
    <li><a href="#tab2" data-toggle="tab">Sample</a></li>
    <li><a href="#tab3" data-toggle="tab">Sample</a></li>
</ul>

Et voici le code CSS de votre couleur personnalisée:

.red .active a,
.red .active a:hover {
    background-color: red;
}

Aussi, si vous préférez remplacer la couleur par défaut pour l' .active élément dans votre nav-pills vous pouvez modifier l'original de la sorte:

.nav-pills > .active > a, .nav-pills > .active > a:hover {
    background-color: red;
}

Answer 2

J'utilise cette copie pour changer la classe active pour toutes les pilules dans le même ul (appliqué au document prêt):

 $('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});
 

Answer 3

Il y a beaucoup de code dans le fichier index.php de votre modèle:

     <?php
// Template color
if ($this->params->get('templateColor'))
{
?>
<style type="text/css">
    body.site
    {
        border-top: 3px solid <?php echo $this->params->get('templateColor');?>;
        background-color: <?php echo $this->params->get('templateBackgroundColor');?>
    }
    a
    {
        color: <?php echo $this->params->get('templateColor');?>;
    }
    .navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
    .btn-primary
    {
        background: <?php echo $this->params->get('templateColor');?>;
    }
    .navbar-inner
    {
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
    }
</style>
<?php
 

Éliminez-le et vous pourrez tout spécifier vous-même dans le fichier template.css sans être annulé.

à votre santé!