Apply individual appearances to each MessageBox Button

Answered
0
0

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

  • You must to post comments
Great Answer
0
0

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

  • You must to post comments
0
0

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; }
  • You must to post comments
0
0

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?

  • Levie (ITG)
    You can use Chrome dev tools to find the class names of the elements (that’s how we did it). The theming engine builds the (virtually infinite) combination of names based on the appearance and states. If you open dev tools and focus on one of the buttons, you’ll see the class name change to something like “qx-button-focus-hovered” or “qx-button-hovered”, so you can handle those cases. Your CSS will look something like this: .qx-messagebox-modal-active-information [name=’yes’].qx-button-focused-hovered { background-color: orange; }… HTH, Levie
  • Ivan Borges
    Thank you Levie!
  • You must to post comments
0
0

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

  • You must to post comments
0
0

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.

  • You must to post comments
0
0

Oh, you add the to the Default.html .
I think I can play with this now and get the results we need.

Thank you!

  • You must to post comments
0
0

Hi Ivan,

Please see the attached sample.

HTH,

Levie

  • You must to post comments
0
0

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

  • You must to post comments
0
0

Hi Levie.

Got it.
Thanks.

Ivan

  • You must to post comments
0
0

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

  • You must to post comments
Showing 10 results
Your Answer

Please first to submit.