Change Modal Header Color

[Eric_F]

I am using a bootbox confirm and wanted to change the color of the modal it opens.

You can change the button colors when setting up the action and I changed the body and footer by changing the “modal content bg” property in theme manager, but I can’t find anything for the header.

This is what it looks like when the modal pops up from an action.

Am I just blind or does the option not exist? And if it doesn’t exist how else can I style the header?

[revjrblack]

[Eric_F]

I can’t edit the modal like that since it is from a bootbox confirm.

and not a modal element on the page.

[revjrblack]

When using Bootbox in the Flow Editor you can change backgrounds in the Confirm Properties panel. Try changing the Color under Confirm Label and/or Cancel Label.

In your screenshot it appears the setting is set to Danger and Light.

[Eric_F]

Those change the color of the buttons. In my first post the “delete” button has danger color and the “cancel” button has light color.

[revjrblack]

Oh yeah… sorry I forgot. You’re right.

Try this… go to your custom css file or hard code it in the page and add the bootstrap background color there: class=“modal-header bg- your choice”

[Eric_F]

Not sure where to add it. The only mention of it in the code is

<button id="btn2" class="btn bg-danger" dmx-on:click="run({'bootbox.confirm':{message:'Delete this site?',title:'Delete Site',buttons:{confirm:{label:'Delete',className:'btn-danger'},cancel:{label:'Cancel',className:'btn-light'}},then:{steps:[{serverConnect:{url:'/api/admin/site/delete',site:'SkinsClickCom',params:{site_id:`site_id`},name:'sc'}},{run:{action:`serverconnect1.load({})`}}]},name:'Delete'}})"><i class="far fa-trash-alt fa-2x" dmx-on:click=""></i></button>

[revjrblack]

Here’s an example:

.modal-header { background-color: rgb( 222, 222, 222 ); }

You can put this beneath the head tag or under the body tag.

[Eric_F]

Do you mean above the head tag in the layout page? I did

and it didn’t seem to change.
Looking at

I think that the bg-white is overwriting the change, but im not sure how to disable it.

[revjrblack]

No place the <style> script beneath the </head> tag. You can force the class by adding !important at the end of the color.

</head>

<style>
.modal-header { background-color: rgb(23,85,173) !important;
</style>

[Eric_F]

Changed it and it still isn’t working.

I assume because the .bg-white is also set to important?