Jak zmienić kolor Bootstrap CSS na Twitterze?

Question

Nie zużyłem mniej wcześniej niż dzisiaj.

Zmieniłem kolor w preboot.less do:

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

I wtedy spełnione tym mniej plików. Wszystko wyszło, ale wszystko było jeszcze niebieskie.

Więc spróbowałem trasy js.less. Nadal niebieskie.

Answer 1

Jeżeli masz ustawić zmienną @orange do koloru, jak ten

@orange: #FF2400;

Answer 2

Jeśli używasz wersji 2.0-wip, jest to sprawa.

klasa .primary używa zmiennych @blue i @blueDark do tworzenia gradientu przycisku. Te zmienne są ustawiane w pliku variables.less.

W pliku buttons.less pozostałe klasy przycisków są zakodowane za pomocą wartości szesnastkowych.

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

Musisz zmienić te wartości szesnastkowe lub utworzyć zmienne, które zastąpią wartości szesnastkowe. Jestem nowy w używaniu bootstrapu z Twittera, ale wydaje się, że to sytuacja.

Answer 3

Może się przydać użyteczna Bootstrap Generator - pozwala wybrać kolory itp. I wygeneruje dla Ciebie skompilowany plik CSS Boostrap.

Answer 4

Oto generator motywów bootstrap, który działa z obrazka .... Możesz więc zrobić zdjęcie swojej "starej" strony, załaduj ją tutaj, a wygeneruje motyw pasujący do starej kolorystyki!

Uwaga: ta strona jest w tej chwili niedostępna. Jeśli nadal chcesz tę funkcję, you can install the site from it's Github repo, i wypróbuj ją z tego miejsca.

http://www.lavishbootstrap.com/

i oczywiście bootstrapu sobie pozwala dostosować kolory, gdy go pobrać teraz, ale to wymaga dużo cięcia i oklejania kolorystycznych .... Narzędzie Powyższe dane to wszystko za ty ...

http://getbootstrap.com/customize/

Answer 5

To jeden dla # 01a4d9 kolorze 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

Aby dostosować kolor linków i .btn-podstawowej (czyli to, co myślę, że pytanie na myśli), wyregulować @linkColor:

@linkColor: @orange;