How do you change the colour of Twitter's Bootstrap CSS?

I've not used 开发者_开发技巧less before today.

I changed the colour in preboot.less to:

// Color Scheme
@baseColor:         @orange;                  // Set a base color

I then complied the less files. It all came out, but everything was still blue.

So I tried the js.less route. Still blue.

Here's a bootstrap theme generator that works from a picture.... So you can just take a picture of your "old" website, upload it here, and it'll generate a theme that matches your old color scheme!

Note: This site appears to be offline at the moment. If you still want this feature, you can install the site from it's Github repo, and try it from there.

http://www.lavishbootstrap.com/

and of course Bootstrap itself allows you to customize the colors when you download it now, but that involves lots of cutting and pasting of color schemes.... The tool above figures it all out for you...

http://getbootstrap.com/customize/

You might find the Bootstrap Generator useful - it lets you choose colours etc and generates a compiled Boostrap CSS file for you.

If you are using 2.0-wip version, this is the deal.

the .primary class uses the @blue and @blueDark variables for creating the button's gradient. Those variables are set in the variables.less file.

In the buttons.less file, the other button classes are hard-coded with hex values.

// Danger and error appear as red
  &.danger {
    .gradientBar(#ee5f5b, #c43c35);
  }
  // Success appears as green
  &.success {
    .gradientBar(#62c462, #57a957);
  }
  // Info appears as a neutral blue
  &.info {
    .gradientBar(#5bc0de, #339bb9);
  }

You have to change those hex values or create variables that you replace the hex values with. I'm new to using bootstrap from twitter myself, but this appears to be the situation.

Have you set the @orange variable to a color, like this

@orange: #FF2400;

This one for the #01a4d9 color btn

.btn {
    border-color:#c5c5c5;
    border-color:rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
 }

.btn-primary {
    color:#ffffff;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color:#007cc5;
    background-image:-moz-linear-gradient(top, #01a4d9, #0193c5);
    background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#01a4d9),  to(#0193c5));
    background-image:-webkit-linear-gradient(top, #01a4d9, #0193c5);
    background-image:-o-linear-gradient(top, #01a4d9, #0193c5);
    background-image:linear-gradient(to bottom, #01a4d9, #0193c5);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0096c5', endColorstr='#ff0054c5', GradientType=0);
    border-color:#0193c5 #0193c5 #003479;
    border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color:#0193c5;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }

.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] {
    color:#ffffff;
    background-color:#0193c5;
    *background-color:#0049ac;
 }

.btn-primary:active,.btn-primary.active {
    background-color:#003f92 \9;
 }

To customize the color of your links and .btn-primary (which is what I think the question was referring to), adjust the @linkColor:

@linkColor: @orange;