Hi.
With Buttons, we can use their AppearanceKey and apply different styles to them, like button-ok, button-cancel and so on.
In order to keep visual integrity, we would like to follow the same settings to the MessageBox buttons. So we could have the OK button looking the same throughout the application, for example.
Using the Theme Builder, I noticed there is only Button under ButtonsPane, and its style will be used for all buttons in that pane, like OK, Cancel, Yes, No, etc.
Is there a way to set individual styles to each of the buttons in the MessageBox?
Thanks in advance.
Ivan
Hi Ivan,
As another workaround, you can add an old-fashioned CSS stylesheet to your project with something like the following:
.qx-messagebox-modal-active-information [name='ok'], .qx-messagebox-modal-active-warning [name='ok'] { background-color: red; }
You’ll need to do it for each style of MessageBox, but if you’d like the buttons to have different styles and still use a MessageBox, this is the way to go!
Best,
Levie
If anyone lands here in the future, here is a sample of what could be done to change the MessageBox buttons to follow the Buttons Variants already existing in the Themes available:
.qx-messagebox-modal-active-information [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-information [name='ok'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-information [name='ok'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-information [name='ok'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-information [name='ok'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-information-move [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-information [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-information [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-information [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-information [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-information [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-information [name='cancel'].qx-button-focused { background-color: Snow; }
.qx-messagebox-modal-active-information [name='cancel'].qx-button-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-information [name='cancel'].qx-button-hovered-pressed-focused { background-color: #E6E6E6; }
.qx-messagebox-modal-active-information [name='cancel'].qx-button-focused-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-information-move [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-information-move [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-information-move [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-information-move [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-information-move [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-information [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-information [name='yes'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-information [name='yes'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-information [name='yes'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-information [name='yes'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-information-move [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-information [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active-information [name='no'].qx-button-focused { background-color: #D9524E; }
.qx-messagebox-modal-active-information [name='no'].qx-button-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-information [name='no'].qx-button-hovered-pressed-focused { background-color: #C92F2B; }
.qx-messagebox-modal-active-information [name='no'].qx-button-focused-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-information-move [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active-warning [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-warning [name='ok'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-warning [name='ok'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-warning [name='ok'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-warning [name='ok'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-warning-move [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-warning [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-warning [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-warning [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-warning [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-warning [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-warning [name='cancel'].qx-button-focused { background-color: Snow; }
.qx-messagebox-modal-active-warning [name='cancel'].qx-button-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-warning [name='cancel'].qx-button-hovered-pressed-focused { background-color: #E6E6E6; }
.qx-messagebox-modal-active-warning [name='cancel'].qx-button-focused-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-warning-move [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-warning-move [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-warning-move [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-warning-move [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-warning-move [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-warning [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-warning [name='yes'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-warning [name='yes'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-warning [name='yes'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-warning [name='yes'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-warning-move [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-warning [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active-warning [name='no'].qx-button-focused { background-color: #D9524E; }
.qx-messagebox-modal-active-warning [name='no'].qx-button-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-warning [name='no'].qx-button-hovered-pressed-focused { background-color: #C92F2B; }
.qx-messagebox-modal-active-warning [name='no'].qx-button-focused-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-warning-move [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active-error [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-error [name='ok'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-error [name='ok'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-error [name='ok'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-error [name='ok'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-error-move [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-error [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-error [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-error [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-error [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-error [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-error [name='cancel'].qx-button-focused { background-color: Snow; }
.qx-messagebox-modal-active-error [name='cancel'].qx-button-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-error [name='cancel'].qx-button-hovered-pressed-focused { background-color: #E6E6E6; }
.qx-messagebox-modal-active-error [name='cancel'].qx-button-focused-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-error-move [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-error-move [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-error-move [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-error-move [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-error-move [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-error [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-error [name='yes'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-error [name='yes'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-error [name='yes'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-error [name='yes'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-error-move [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-error [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active-error [name='no'].qx-button-focused { background-color: #D9524E; }
.qx-messagebox-modal-active-error [name='no'].qx-button-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-error [name='no'].qx-button-hovered-pressed-focused { background-color: #C92F2B; }
.qx-messagebox-modal-active-error [name='no'].qx-button-focused-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-error-move [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active-stop [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-stop [name='ok'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-stop [name='ok'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-stop [name='ok'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-stop [name='ok'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-stop-move [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-stop [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-stop [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-stop [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-stop [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-stop [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-stop [name='cancel'].qx-button-focused { background-color: Snow; }
.qx-messagebox-modal-active-stop [name='cancel'].qx-button-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-stop [name='cancel'].qx-button-hovered-pressed-focused { background-color: #E6E6E6; }
.qx-messagebox-modal-active-stop [name='cancel'].qx-button-focused-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-stop-move [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-stop-move [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-stop-move [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-stop-move [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-stop-move [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-stop [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-stop [name='yes'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-stop [name='yes'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-stop [name='yes'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-stop [name='yes'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-stop-move [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-stop [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active-stop [name='no'].qx-button-focused { background-color: #D9524E; }
.qx-messagebox-modal-active-stop [name='no'].qx-button-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-stop [name='no'].qx-button-hovered-pressed-focused { background-color: #C92F2B; }
.qx-messagebox-modal-active-stop [name='no'].qx-button-focused-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-stop-move [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active-question [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-question [name='ok'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-question [name='ok'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-question [name='ok'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-question [name='ok'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-question-move [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-question [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-question [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-question [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-question [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-question [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-question [name='cancel'].qx-button-focused { background-color: Snow; }
.qx-messagebox-modal-active-question [name='cancel'].qx-button-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-question [name='cancel'].qx-button-hovered-pressed-focused { background-color: #E6E6E6; }
.qx-messagebox-modal-active-question [name='cancel'].qx-button-focused-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-question-move [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-question-move [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-question-move [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-question-move [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-question-move [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-question [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-question [name='yes'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-question [name='yes'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-question [name='yes'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-question [name='yes'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-question-move [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-question [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active-question [name='no'].qx-button-focused { background-color: #D9524E; }
.qx-messagebox-modal-active-question [name='no'].qx-button-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-question [name='no'].qx-button-hovered-pressed-focused { background-color: #C92F2B; }
.qx-messagebox-modal-active-question [name='no'].qx-button-focused-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-question-move [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active [name='ok'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active [name='ok'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active [name='ok'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active [name='ok'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-move [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active [name='cancel'].qx-button-focused { background-color: Snow; }
.qx-messagebox-modal-active [name='cancel'].qx-button-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active [name='cancel'].qx-button-hovered-pressed-focused { background-color: #E6E6E6; }
.qx-messagebox-modal-active [name='cancel'].qx-button-focused-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-move [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-move [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-move [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-move [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-move [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active [name='yes'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active [name='yes'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active [name='yes'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active [name='yes'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-move [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active [name='no'].qx-button-focused { background-color: #D9524E; }
.qx-messagebox-modal-active [name='no'].qx-button-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active [name='no'].qx-button-hovered-pressed-focused { background-color: #C92F2B; }
.qx-messagebox-modal-active [name='no'].qx-button-focused-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-move [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active-hand [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-hand [name='ok'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-hand [name='ok'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-hand [name='ok'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-hand [name='ok'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-hand-move [name='ok'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-hand [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-hand [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-hand [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-hand [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-hand [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-hand [name='cancel'].qx-button-focused { background-color: Snow; }
.qx-messagebox-modal-active-hand [name='cancel'].qx-button-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-hand [name='cancel'].qx-button-hovered-pressed-focused { background-color: #E6E6E6; }
.qx-messagebox-modal-active-hand [name='cancel'].qx-button-focused-hovered { background-color: #E6E6E6; }
.qx-messagebox-modal-active-hand-move [name='cancel'] { background-color: Snow; }
.qx-messagebox-modal-active-hand-move [name='cancel'].qx-button [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-hand-move [name='cancel'].qx-button-focused [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-hand-move [name='cancel'].qx-button-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-hand-move [name='cancel'].qx-button-focused-hovered [name='label'] { color: windowText !important; }
.qx-messagebox-modal-active-hand [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-hand [name='yes'].qx-button-focused { background-color: #5BB85B; }
.qx-messagebox-modal-active-hand [name='yes'].qx-button-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-hand [name='yes'].qx-button-hovered-pressed-focused { background-color: #439D43; }
.qx-messagebox-modal-active-hand [name='yes'].qx-button-focused-hovered { background-color: #439D43; }
.qx-messagebox-modal-active-hand-move [name='yes'] { background-color: #5BB85B; }
.qx-messagebox-modal-active-hand [name='no'] { background-color: #D9524E; }
.qx-messagebox-modal-active-hand [name='no'].qx-button-focused { background-color: #D9524E; }
.qx-messagebox-modal-active-hand [name='no'].qx-button-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-hand [name='no'].qx-button-hovered-pressed-focused { background-color: #C92F2B; }
.qx-messagebox-modal-active-hand [name='no'].qx-button-focused-hovered { background-color: #C92F2B; }
.qx-messagebox-modal-active-hand-move [name='no'] { background-color: #D9524E; }
That was cool.
I am able now to set the colors for each Theme we have created. Thanks!
Sooooo, how do I set the “hovered” style now? 🙂
And by the way, where do I find all these “qx-” properties?
Hi Ivan,
After talking to my colleagues, you have one more option for embedding it within the theme 🙂
You can insert any custom CSS into the theme by editing the rules under the “Stylesheet” option in the theme builder (see attached screenshots).
You can also add the rules through a mixin:
{ "stylesheet": { "rules": [ ".qx-messagebox-modal-active-information [name='ok'],", ".qx-messagebox-modal-active-errorg [name='ok'],", ".qx-messagebox-modal-active-hand [name='ok'],", ".qx-messagebox-modal-active-stop [name='ok'],", ".qx-messagebox-modal-active-warning [name='ok'],", ".qx-messagebox-modal-active-question [name='ok']", "{", " background-color: red;", "}" ] } }
If you have any questions about this, please let me know!
Levie
Last question (yeah, right).
We offer 3 themes to the users: Normal, Light and Dark. The buttons follow these themes. For such, I have created new Colors in the Wisej Theme Builder to be able to set them to the Buttons for each theme created. Now, using your old-fashioned CSS style sheet, instead of setting the button’s background-color to pre-existing system colors, would I be able to use the color name added to the .theme file, like when we set the ApperanceKey of a control? Otherwise, I can’t see how I could set different colors to the buttons depending on the Theme chosen.
Oh, you add the to the Default.html .
I think I can play with this now and get the results we need.
Thank you!
Hi Ivan,
Please see the attached sample.
HTH,
Levie
Hey Levie.
That sounds great. I wouldn’t mind doing it for each MessageBox style… but… I have no idea on how to do it. 😀
Would you mind throwing a small sample for one MessageBox style only so I could replicate it from my side?
Thanks a lot.
Ivan
Hi Levie.
Got it.
Thanks.
Ivan
Hi Ivan,
It’s not currently possible, but I will log an enhancement to request the feature of having different appearances for each button.
The alternative right now is to create a custom MessageBox with your own buttons.
I’ll keep you updated on the status of this!
Best regards,
Levie
Please login first to submit.