1

Olá pessoal do Stackoverflow,

Estou usando o bootstrap, porém tem alguns estilos do bootstrap que não acho legal.

Estou colocando o meu estilo personalizado em um arquivo css, no entanto prevalece o estilo do bootstrap mesmo linkando o meu arquivo de estilos css depois do arquivo de estilos css do bootstrap.

Somente consigo alterar quando coloco a definição de estilo de forma inline no elemento.

Tem alguma outra forma de organizar os estilos sem conflitar com o bootstrap?

Esta seria uma amostra do código.

<!DOCTYPE html>
<html>

<head>

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

    <style>
        .panel-title-azul { color: blue; font-size: 24px; }
    </style>

</head>

<body>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title panel-title-azul">Cadastro</h3>
        </div>
    </div>

</body>

</html>

CSS:

.panel-title-azul { 
    color: blue; 
    font-size: 24px; 
}

HTML:

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">

<head>
    <meta charset="utf=8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="icon" href="{{ asset('images/icones/icone-logo.png') }}">

    <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    @stack('linkLayout1')
    @stack('linkLayout2')
    @stack('linkLayout3')

    <script src="js/jquery-3.2.0.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Scripts -->
    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
        ]) !!};
    </script>
</head>

<body>



</body>

</html>

<!-- Este código faz parte de um outro arquivo que faz uso do layout principal por meio do framework Laravel -->

@push('linkLayout1')
    <link rel="stylesheet" href="{{ asset('css/auth/register.css') }}">
@endpush

@extends('layout')

@section('content')

<section class="blocoPrincipal">
    <div class="divisaoPrincipal">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title panel-title-azul">Faça seu cadastro no site</h3>
            </div>
        </div>
    </div>
</section>
8
  • Deve ter feito alguma confusão ou algum tema extra que esta usando, isto responde a tudo de CSS (mesmo bootstrap): pt.stackoverflow.com/a/143893/3635
    – Syzoth
    Commented 23/04/2017 às 1:00
  • Seria bom vc colocar um trecho de código com o problema.
    – Largato
    Commented 23/04/2017 às 1:01
  • Obrigado pela ajuda. Commented 23/04/2017 às 1:43
  • 1
    A propósito, tem um : sobrando no seu código. Seria .panel-title-azul { sem os : entre o azul e o { ... experimentou tirar ele já?
    – Largato
    Commented 23/04/2017 às 1:45
  • Considerando as regras previstas sobre especificidade e considerando que o exemplo enviado tem supostamente a mesma especificidade e está como último na cascata, deveria prevalecer a cor azul do título, ou então o estilo do bootstrap é mais importante? Commented 23/04/2017 às 1:48

1 Resposta 1

3

Olá. Você atribuiu a classe panel-title-azul à uma div, sendo que dentro dessa div possui um h3 com outra classe. Logo, esse h3 respeitará primeiro à classe dele, e depois à classe da div pai. Então, o correto seria:

<!DOCTYPE html>
<html>

<head>

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

    <style>
        .panel-title-azul { color: blue; font-size: 24px; }
    </style>

</head>

<body>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title-azul">Cadastro</h3>
        </div>
    </div>

</body>

</html>

Demo: https://jsfiddle.net/9fagq0eb/2/ Além disso, aquele ":" (dois pontos) depois do .panel-title-azul gerava um conflito.

6
  • Realmente, havia colocado ":" a mais. Porém no meu código original já fiz todas as correções e ainda tô me deparando com esse erro. Umas classes que personalizei estão funcionando e essa especificamente que altera o panel-title não. Commented 23/04/2017 às 2:09
  • Mas valeu pela ajuda de vocês, já deram uma força tremenda. Vou quebrar a cabeça mais um pouco até achar onde esta a falha. Commented 23/04/2017 às 2:10
  • Mostre seu código original então. Pois, no meu exemplo utilizando o seu código disponibilizado, a cor está sendo aplicada ao título. Commented 23/04/2017 às 2:11
  • Oi VME, coloque parte do código que estou usando, porém ele não funciona direito porque tem que fazer a injeção do template e do arquivo css, devido estar usando o framework Laravel. Commented 23/04/2017 às 2:28
  • 1
    @JansenMagalhães se a resposta do colega VME resolve seu problema, vc pode clicar no ao lado dela para marcar como aceita, assim na página principal também aparece que o problema teve uma solução. E assim que vc tiver uns pontinhos de reputação no site, além de poder aceitar respostas, vai poder dar votos em todas as publicações que gostar.
    – Largato
    Commented 23/04/2017 às 2:42

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