Adding custom class based on Bootstrap CSS 2.3.2

Question

I've included Bootstrap CSS, and now want to add a custom class in my own CSS file.

It is simply an exact copy of .btn-success with modified colors and class name only:

.btn-mine {
    color: #ffffff;
    background-color: #ff8d53;
    border-color: #ef8343;
}
.btn-mine:hover,
.btn-mine:focus,
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
    color: #ffffff;
    background-color: #ea793e;
    border-color: #dc5930;
}
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
    background-image: none;
}
.btn-mine.disabled,
.btn-mine[disabled],
fieldset[disabled] .btn-mine,
.btn-mine.disabled:hover,
.btn-mine[disabled]:hover,
fieldset[disabled] .btn-mine:hover,
.btn-mine.disabled:focus,
.btn-mine[disabled]:focus,
fieldset[disabled] .btn-mine:focus,
.btn-mine.disabled:active,
.btn-mine[disabled]:active,
fieldset[disabled] .btn-mine:active,
.btn-mine.disabled.active,
.btn-mine[disabled].active,
fieldset[disabled] .btn-mine.active {
    background-color: #ff8d53;
    border-color: #ff6314;
}
.btn-mine .caret {
    border-top-color: #fff;
}
.dropup .btn-mine .caret {
    border-bottom-color: #fff;
}

Unfortunately, this does not work, as shown here: http://jsfiddle.net/qG2n6/.

I know there are many 3rd-party Bootstrap button makers which can create buttons of any colors.

But I am more interested in knowing why my approach above does not work.

I copy all the styles that contains .btn-success in the original Bootstrap CSS, and only modify the colors and the class name, and I expected it to work.

What am I missing here?

Is the CSS file loaded into the web-page? Are you using the class? — Lajos Arpad, Aug 29 '13 at 01:04

score 1 · Accepted Answer · answered Aug 29 '13 at 00:40

1

.btn-success contains

.btn-success {
background-color: #5BB75B;
background-image: linear-gradient(to bottom, #62C462, #51A351);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

While your class contains just some border and background color

answered Aug 29 '13 at 00:40

majorhavoc

2,385
1
24
26

searching for `.btn-success` in this file: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css, I don't see any of the above for the class. – MLister Aug 29 '13 at 09:43
1

It is in bootstrap-theme.css https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap-theme.css Accept the answer if it helped. :) – majorhavoc Aug 29 '13 at 09:47
Ah! what's the relationship between `bootstrap-theme.css` and `bootstrap.css`? Are they merged into one file for the actual Bootstrap css in release? – MLister Aug 29 '13 at 09:50
1

They've taken out all theme related from main css file to bootstrap-theme.css So that you can easily customize the color related stuffs. This happened when they updated to v3 of bootstrap. – majorhavoc Aug 29 '13 at 09:54
that explains it all! Thanks a lot! – MLister Aug 29 '13 at 10:02

score 1 · Answer 2 · answered Aug 29 '13 at 05:28

You will need to override the background-image as well. That is where the slight gradient of the buttons in Bootstrap 2.3.2 comes from. See here:

.btn-mine {
    color: #ffffff;
    background-image: none;
    background-color: #ff8d53;
    border-color: #ef8343;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

http://jsfiddle.net/qG2n6/1/

If you add background-image: none;, add the IE filter and alter the text shadow you will get your button. However, if you want a gradient to match the style of your version of Bootstrap you will need you own CSS gradient. You can use this tool to make one of your own:

http://www.colorzilla.com/gradient-editor/

Which might look something like this:

.btn-mine {
    color: #ffffff;
    border-color: #dc5930;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background: #ff8d53;
    background: -moz-linear-gradient(top,  #ff8d53 0%, #ff732d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8d53), color-stop(100%,#ff732d));
    background: -webkit-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: -o-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: -ms-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: linear-gradient(to bottom,  #ff8d53 0%,#ff732d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8d53', endColorstr='#ff732d',GradientType=0 );
    background-repeat: repeat-x;
}

http://jsfiddle.net/qG2n6/3/

i searched for `.btn-success` in this file: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css, and I didn't see `background`, `filter`, etc defined for the class, are they defined somewhere else? — MLister, Aug 29 '13 at 09:47
@MLister that is version 3.0.0 you are linking to. They went with a more flat, and customizable, design. If you look through 2.3.2 you will find it. — willi, Aug 29 '13 at 15:21

Adding custom class based on Bootstrap CSS 2.3.2

2 Answers2