¿Cómo se cambia el color de Bootstrap CSS de Twitter?

Question

No he usado menos hoy.

que cambió el color en preboot.less a:

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

luego de cumplirse los menos archivos. Todo salió, pero todo seguía siendo azul.

Así que probé la ruta js.less. Todavía azul.

Answer 1

se ha marcado la variable @orange a un color, como este

@orange: #FF2400;

Answer 2

Si está utilizando la versión 2.0-WIP, este es el trato.

la clase .primary usa las variables @blue y @blueDark para crear el degradado del botón. Esas variables se establecen en el archivo variables.less.

En el archivo buttons.less, las otras clases de botones están codificadas de forma rígida con valores hexadecimales.

// 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); 
    } 

Tiene que cambiar esos valores hexadecimales o crear variables con las que reemplace los valores hexadecimales. Soy nuevo en el uso de bootstrap de twitter, pero esta parece ser la situación.

Answer 3

Puede resultarle útil Bootstrap Generator - le permite elegir colores, etc. y genera un archivo compilado de Boostrap CSS para usted.

Answer 4

Aquí hay un generador de temas bootstrap que funciona a partir de una imagen .... ¡Así que puedes tomar una foto de tu "viejo" sitio web, subirlo aquí y generará un tema que coincida con tu viejo esquema de color!

Nota: este sitio parece estar desconectado en este momento. Si aún desea esta función, you can install the site from it's Github repo, y pruébelo desde allí.

http://www.lavishbootstrap.com/

y por supuesto Bootstrap sí le permite personalizar los colores al descargar ahora, pero que implica un montón de cortar y pegar de esquemas de color .... La herramienta por encima de las cifras todo para usted ...

http://getbootstrap.com/customize/

Answer 5

Ésta es para el # 01a4d9 de 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; 
} 

Answer 6

Para personalizar el color de los enlaces y .btn-primaria (que es lo que creo que la pregunta se refería a), ajuste el @linkColor:

@linkColor: @orange;