setStyleClass to WDialog
Added by Pat Ivory about 11 years ago
Hi,
I have successful created modal dialog using the WDialog class. I would now like to carry out some styling on the pop up itself.
I have managed apply WCssDecorationStyle to my dialog, but am failing miserably when trying to set styles using an external CSS sheet and MyDialog~~container()~~>setStyleClass("pop-up-class");
My WApplication has successful load the CSS file that the style classes are to extract from, and I have applied to the other elements in my webpage.
I guess my understanding of this may not be complete. So I have a two questions.
- Can you set style features of a WDialog such as background color, border, default fonts etc. using the setStyleClass?
- If so, how?
I have attached the section of code that creates and shows the dialog
{
WDialog *passdlg = new WDialog("Management Access Authorisation");
WLabel *label = new WLabel("Manager Password",passdlg->contents());
WLineEdit *edit = new Wt::WLineEdit(passdlg->contents());
edit->setEchoMode(WLineEdit::EchoMode::Password);
label->setBuddy(edit);
Wt::WPushButton *ok = new Wt::WPushButton("OK", passdlg->footer());
Wt::WPushButton *cancel = new Wt::WPushButton("Cancel", passdlg->footer());
passdlg->rejectWhenEscapePressed();
ok->clicked().connect(std::bind([=] () {
passdlg->accept();
}));
cancel->clicked().connect(passdlg, &Wt::WDialog::reject);
passdlg->finished().connect(std::bind([=] () {
if (WString("admin")==edit->text())
{
LoadMngrPage();
}
else
mResult->setText("Incorrect");
delete passdlg;
}));
passdlg->show();
passdlg~~contents()~~>setStyleClass(WString("pop"));
return;
}
Thanks,
Patrick
Replies (2)
RE: setStyleClass to WDialog - Added by Koen Deforche about 11 years ago
Hey Patrick,
Yes you can change the style of a dialog. E.g.
dialog->addStyleClass("pop-up-class");
And then have a stylesheet with (assuming a default CSS theme):
.Wt-dialog.pop-up-class .titlebar {
background-color: #ff0000;
}
Or (for a bootstrap 2 CSS theme):
.Wt-dialog.pop-up-class modal .modal-header {
background-color: #ff0000;
}
The best tip I can give you though is to learn how to use the Web Inspector (in Chrome or Firefox) to investigate the style being applied to a particular element, which also shows why they are being applied.
Regards,
koen
RE: setStyleClass to WDialog - Added by Pat Ivory about 11 years ago
Hi Koen,
Thanks for your help :)
This information has been very helpful, I was unaware of the default CSS theme.
Is there a rough list that outlines each of the default CSS class types?
I've had a further dig through the doxygen, and the tutorial on CSS in Wt. If not I can just use the tools you mentioned.
Regards,
Patrick