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?
I can’t edit the modal like that since it is from a bootbox confirm.
and not a modal element on the page.
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.
Those change the color of the buttons. In my first post the “delete” button has danger color and the “cancel” button has light color.
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”
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>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.
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.
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>
Changed it and it still isn’t working.
I assume because the .bg-white is also set to important?
