Use Bootstrap's color classes instead of custom CSS

[joebandenburg]

As far as I can see, bootstrap3-dialog does not support customized Bootstrap because the project includes it's own CSS file that includes a copy of the colors from vanilla Bootstrap. This means that if I try to use bootstrap3-dialog with a customized Bootstrap I cannot have the dialog colours consistent with the rest of the site.

I think a better solution would be to make use of Bootstrap's helper classes (e.g. bg-danger, text-danger) and apply these to the dialog header based on the type of the dialog. For example, using the "danger" dialog type would create a dialog that add the "text-danger" class to the header.

Users could still override these classes with custom CSS if they wished. For my use case, I need to allow my users to provide a custom bootstrap CSS.

[nakupanda]

Hi,

Will do this soon, thank you very much for the suggestion.

[nakupanda]

I found the colors set by 'bg-{type}' classes are different from those have been used on buttons.

For example, color set in .bg-danger is #f2dede, while it's #d9534f in .btn-danger, actually I would think button's one looks more 'dangerous'.

I'm creating bootstrap-dialog's owned 'bg-{type}' to make itself looks the same as previous, and if you would like to override those colors with your theme's ones, I think you can just easily load your theme after loading bootstrap-dialog.

Anyway you will see a modified version soon, and let me know what to keep improving then.

[nakupanda]

Please see http://jsfiddle.net/o5k0eaws/3/

Not looking good...

[baconbrad]

Will this ever be finished and pushed to the repo? I would like the dialog to inherit the colors as well. This way I can import Bootswatch and other themes and not have to add more CSS rules to them to make them look properly with Bootstrap Dialog.

[fabn]

+1 for this.

[ivantcholakov]

I think, there must be vertical margin between the buttons. If you shorten the dialog width this will become visible. Probably it is a Bootstrap glitch though.

[nakupanda]

Like it's demonstrated here http://jsfiddle.net/o5k0eaws/3/

The problem is the colors don't fit those used on buttons and used on the dialog heading, any good idea?

[ivantcholakov]

Before targeting the concrete problem (I got it), I would suggest a structural change.

You can split bootstrap-dialog.less into 3 files:

• bootstrap-dialog.less - its compiled result remains as it is now, it just includes files and provides BC;
• bootstrap-dialog-styles.less - it will contain the style definitions that are currently within bootstrap-dialog.less;
• bootstrap-dialog-variables.less - it contains only values for customization.

bootstrap-dialog-variables.less may define custom colors (and other things) since those from BS don't fit well:

@dialog-header-default-color @dialog-header-default-bg-color @dialog-header-primary-color @dialog-header-primary-bg-color etc. ...

The names maybe should be prefixed, for example with "bsd-" for avoiding name conflicts.

A theme creator will include within his/her less file:

• Boostrap mixins, variables, custom mixins, custom bs variables
• bootstrap-dialog-variables.less (the original, from your project)
• bootstrap-dialog-variables.less (customized, from another location, it overwrites some or all the variables)
• bootstrap-dialog-styles.less (the original, from your project)

Thus in the result css the dialog styles could be deeply customized and polished by a theme creator.