Twitter Bootstrap Question posted in

Twitter bootstrap – Unable to change the background Carousel color

I am trying my luck with Twitter Bootstrap. I am in the beginning stages and just want to customize the original Carousel pre-defined theme – http://getbootstrap.com/examples/carousel/ which I have downloaded and put in my localhost.

I used Chrome developer tools to see if I can change the dark background to a more pleasant color as per my requirement. I couldn’t even find which color it was without using the color picker – #777777. This the same color as in the circles. But this color is nowhere mentioned in the css as probably the color is a darker one with opacity set to show the lighter color.

I was able to change the carousel navigation background gradient but I have been struggling to find how to change the background color.

I tried to search for background in the css and also checked http://bootstrap-live-customizer.com/ (BLC) to see if I can customize it. But this particular color is nowhere in the list of things to customize. I then downloaded the bootstrap.min.css from BLC but the results are same

I am using the default page as available in Github docs/examples/carousel

Relevant section

  <!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div><!-- /.carousel -->

CSS is the default bootstrap.min.css with no changes. I’ve tried to change the background on the css items and their variants on .item, .containter, .carousel.

As I understand that Twitter Bootstrap is very famous, I’m sure I’m just missing something very simple and the more advanced users will be able to show me right way to do this. The css would be the same for any iteration of bootstrap from the initial stage itself so I have not provided any css (as it’s TOO much to show).

I searched around and found a few stackoverflow q & a but didn’t help me.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer when I wanted to update my circles which had the same color into actual images. The css was not working because the background was generated via the src itself. 

    src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="

    This code created the gray colored background. Changing this to nothing resolved the issue.

    Here's a good tool for converting rbg colors to base64


  2. 0

    I believe the CSS selector for the carousel background is the following:

    .carousel .item {
  background-color: #777;
}

    I don’t think as default, a background colour is defined within the bootstrap.css file but from looking at the Bootstrap examples off their website, this appears to be the selector they are using.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search