Twitter Bootstrap Question posted in

Twitter bootstrap cerulean color panels

I am using the Twitter Bootstrap Cerulean template.

In this theme I use the different panels: panel-primary, panel-panel-success, panel-info and panel-warning.

While the panel-primary is clearly visible, I find that the other types of panels are very bright and hardly visible.

Therefore I would like to modify them by keeping the same color (e.g. green for panel-success) but making them as visible as the panel-primary.

I tried for example to copy/past the .panel-success css from the Twitter Bootstrap paper theme in the Cerulean one but without any success.

Is there something to changer higher than the .panel to get modifications?

Thanks.

EDIT 1

I just noticed that my brightness problem came from the fact that I was adding the stylesheets in the wrong order. The color is fine with this order: 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.css">

But to stay on the original question which was: ‘how to modify the panel color’ here is the css and html code. I tried unsuccessfully to modify it with .panel-success{} in red for example, but I porbably write it wrong.
Also, wgat would be the css to only modify the panel heading color?

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.css">

    </head>

    <style>
    .panel-success{

        background-color: red !important ;
    }
    </style>

    <body><br><br>

    <div class="container">
        <div class="panel panel-success">
            <div class="panel-heading">
               <h2 class="panel-title">Title</h2>
            </div>

            <div class="panel-body">
               <p>Paragraph</p>
            </div>
        </div>
    </div>


    </body>
Tags:

2

Answers


  1. 0 
    .panel-success{
    // css you copied from paper theme and add !important
    background-color: green !important;
}

    Or just paste this code in your custom css and it will override the css code of .panel-success in cerulean theme.

    Login or Signup to reply.
  2. 0

    This is a more detailed version of @John Louie’s answer.

    .panel-success .panel-heading {
  background-color: blue !important;
}
.panel-success .panel-title {
  color: white;
}
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Panel using default primary class -->
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h2 class="panel-title">Title</h2>
    </div>
    <div class="panel-body">
      <p>Paragraph</p>
    </div>
  </div>
</div>

<!-- Panel using overridden success class -->
<div class="container">
  <div class="panel panel-success">
    <div class="panel-heading">
      <h2 class="panel-title">Title</h2>
    </div>
    <div class="panel-body">
      <p>Paragraph</p>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search