1

Quero alterar a cor de quando um tab está selecionado, ele é azul, quero mudar para preto, também quero mudar a cor das letras dentro do tab, quando não estão selecionadas, para cinza. Como devo proceder? vou deixar um link com o código que estou usando para verem: https://www.codeply.com/go/rv3Cvr0lZ4

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

<div class="container">
    <div class="row">

        <div class="col-md-6">
            <h3>Pills left</h3>
            <!-- tabs left -->
            <div class="tabbable">
                <ul class="nav nav-pills nav-stacked col-md-3">
                    <li><a href="#a" data-toggle="tab">One</a></li>
                    <li class="active"><a href="#b" data-toggle="tab">Two</a></li>
                    <li><a href="#c" data-toggle="tab">Twee</a></li>
                </ul>
                <div class="tab-content col-md-9">
                    <div class="tab-pane active" id="a">Lorem ipsum dolor sit amet, charetra varius rci quis tortor imperdiet venenatis quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
                    <div class="tab-pane" id="b">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</div>
                    <div class="tab-pane" id="c">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum auctor accumsan. Duis pharetra
                    varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae. </div>
                </div>
            </div>
            <!-- /tabs -->
        </div>

        <div class="col-md-6">
            <h3>Pills right</h3>

            <!-- tabs right -->
            <div class="tabbable">
                <ul class="nav nav-pills nav-stacked col-sm-3 col-sm-push-9">
                    <li class="active"><a href="#d" data-toggle="tab">One</a></li>
                    <li><a href="#e" data-toggle="tab">Two</a></li>
                    <li><a href="#f" data-toggle="tab">Twee</a></li>
                </ul>
                <div class="tab-content col-sm-9  col-sm-pull-3">
                    <div class="tab-pane active" id="d">Lorem ipsum dolor sit amet, rci quis tortor imperdiet venenatischaretra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
                    <div class="tab-pane" id="e">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor rci quis tortor imperdiet venenatis. Aliquam in felis sit amet augue.</div>
                    <div class="tab-pane" id="d">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae. </div>
                </div>
            </div>
            <!-- /tabs -->

        </div>

    </div>
    <!-- /row -->
</div>

<hr>

1
  • Olá Marcelo! Por favor edite sua pergunta e adicione o código no corpo dela. Além disso, faça o tour para conhecer melhor como o SOpt funciona! Aqui você pode saber mais sobre como melhorar suas perguntas! ;)
    – Daniel
    Commented 29/04/2017 às 17:58

1 Resposta 1

3

No código que você mandou você pode usar o seguinte código:

.nav>li>a { // para todos os links
  color: gray;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:hover, 
.nav-pills>li.active>a:focus { // para hover e focus do elemento ativo
  background-color: #000; 
}

Mas recomendo você colocar uma classe no pai dos seus tabs e colocar isso antes das regras no css para mudar somente do lugar que você quer, caso queira sobrescrever todas as regras do bootstrap, pode usar o css de cima.

5
  • Oi amigo, coloquei esse código mas não funcionou :/ Commented 29/04/2017 às 18:07
  • Coloca como últimos css, depois de todo o código css que você tiver. Commented 29/04/2017 às 18:15
  • eu tentei, não deu certo, também tentei colocar esse código naquele link que roda tudo direto no navegador, também não funcionou: codeply.com/go/rv3Cvr0lZ4 Commented 29/04/2017 às 18:23
  • Tenta remover os comentários, as vezes tá dando algum problema no copy paste, fiz o teste aqui e funcionou. codeply.com/go/uYcCIm3BGq Commented 29/04/2017 às 18:37
  • deu certo agora, muito obrigado Commented 29/04/2017 às 18:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .