Comment changer la couleur du lien actif dans le bootstrap css?

Je suis à l'aide de joomla 3 et bootstrap.min.js
Je suis la création de menu et en donnant classe spéciale afin de changer hover, active, les liens visités et le style du menu.
Je ne pouvais pas trouver comment changer la couleur du lien actif de menu.
Supposons que j'ai 2 menu. Accueil et Contact.
Quand je suis dans la Maison, il est rouge, je veux changer cette couleur.
Je pourrais changer a:active, et a:hover.
Voici le code;

.topmenu .active a,
.topmenu .active a:hover {
    background-color: white;
}
.topmenu > li > a{
    color: orange;
    font-weight:bold;
}
.topmenu > li > a:hover {
    color: black;
    background:white;
}

Même j'ai utilisé les div à changer la couleur du lien actif.
Voici le code

#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
    color: orange;
}
#top-menu a:hover{
    color: black;
}

À chaque fois quand je clique pour la Maison, il est activé et la couleur est rouge. Ce que je veux le changer pour orange. Ne pouvez pas trouver comment le faire.

Voici mon code de balisage

<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="item-109 current active"><a href="/joomla3/">Home</a></li>
<li class="item-138"><a href="/joomla3/?Itemid=138"> Russian </a></li>
<li class="item-110"><a href="/joomla3/?Itemid=110"></a></li></ul>
</div>

Que suggérez-vous de moi?

ne pas modifier bootstrap. Inclure bootstrap,css et ci-dessous, qui comprennent votre css personnalisé , où u overrride le style existant
Comment remplacer les actuels couleur du lien actif?
Ouvrir dans firefox--> Inspecter dans firefox , Voir la classe qui affecte la couleur dans le panneau CSS, copiez cette classe, changer la couleur et le mettre dans ur nouveau css
N'a pas aidé. Il me donne class="item-109 active en cours"
Jusqu'à présent tous les 3 réponses vous ont devrait fonctionner.

OriginalL'auteur Firdavs Kurbonov | 2013-05-15

css twitter-bootstrap

10

Enfin, les expériences, j'ai trouvé la façon de le capturer.
```
#top-menu .current a
{
    color: orange !important;
}
```
Merci à vous tous pour votre temps et votre aide.
Beaucoup apprécié!

OriginalL'auteur Firdavs Kurbonov
6

Je vous suggère la création d'un ID (#) sélecteur localement pour la Div qui contient le a liens, puis prendre que id nom dans votre feuille de style et de remplacer la règle existante.

Par exemple,
```
#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}
```
Espère que cette aide.

Même histoire avec des div. J'ai mis à jour ma question voir.
pouvez-vous fournir un violon lien ou le lien de démonstration sur le site (si possible) d'où le code? - @FirdavsKurbonov
Le site est dans ma machine locale. À propos de violon lien, je suis désolé, j'en ai entendu parler pour la première fois.
jsfiddle.net Vous pouvez coller votre code dans ce site, cliquez sur mettre à jour et de nous envoyer la mise à jour des URL qui mettra en valeur votre question.
Voici jsFiddle jsfiddle.net/Pb7U6

OriginalL'auteur Nitesh
3

Pour changer la couleur du lien actif, nous pouvons utiliser le code dans le fichier css externe ou css
```
.active a
{
background-color:#ff0000;
}
```
OriginalL'auteur Ranvir gorai
1

Si vous souhaitez modifier globalement le lien de couleurs (ou n'importe quoi d'autre), de créer un environnement personnalisé télécharger: http://twitter.github.io/bootstrap/customize.html

En réponse à votre commentaire, si vous souhaitez remplacer le CSS fourni, vous devez créer une règle qui est plus spécifique. Donc, soit créer un sélecteur comme #my-custom-container .item-109 .current .active ou ajouter un !important à votre règle(s) pour .item-109 .current .active

Non, je veux le modifier localement. Ne peut pas trouver la façon de le capturer. Si je inspecter l'objet se montrant comme ce "point-109 active en cours".
Ne fonctionne pas. J'ai essayé de le changer à l'aide !important. Pas de changements.
"Ne fonctionne pas" n'est pas très utile. Pouvez-vous mettre à jour votre question inclure ce que vous avez essayé jusqu'à présent?
Mise à jour de ma question.
Les sélecteurs que vous utilisez sont moins précis que ce que Bootstrap est d'utiliser, de sorte que même si votre CSS est inclus après, Bootstrap gagne toujours. Donnez-moi un instant et je vais créer un jsFiddle pour vous. Est-ce pour la barre de navigation ou de la valeur liquidative?

OriginalL'auteur Tieson T.

//Fix navigation menu active links
$(document).ready(function(){
    var path = window.location.pathname,
        link = window.location.href
    ;
    $('a[href="'+path+'"], a[href="'+link+'"]').parent('li').addClass('active');
});

Au lieu de simplement le dumping un bloc de code, pouvez-vous essayer d'expliquer ce que fait le code et pourquoi ça marche?

OriginalL'auteur user3552895

0

Essayez de modifier votre CSS pour .item-109 { color: white !important; }.

Voici un lien avec plus d'informations sur !important.

Quelque chose d'étrange qui se passe avec mon css. Il n'est pas de travail.
Cette page a vivre? Si oui PM moi un lien et je vais voir si je peux dire ce qui se passe.
Il est dans ma machine locale. En cours de développement. Je peux vous envoyer une image. Mais je pense qu'il ne vous aide pas.
Comment sur le chargement de la page, l'ouverture de l'inspecteur et de téléchargement d'une capture d'écran de la fenêtre d'inspection afin que nous puissions voir les noms de classe et tel? Qui peut aider.

OriginalL'auteur Lucky Kleinschmidt

        $(function (){
            $('nav ul li a.sub-menu').each(function(){
                var path = window.location.href;
                var current = path.substring(path.lastIndexOf('/')+1);
                var url = $(this).attr('href');
                if(url == current){
                    $(this).addClass('active');
                };
            });     
        });

OriginalL'auteur Anbarasan

Vous devez vous connecter pour publier un commentaire.