How can I define multiple styles for one kind of control in one stylesheet? So later developer can select, what kind of style control should looks like.
For example, I need to define two styles for QPushButton: for normal button (on the left) and for action button (on the right)
For the first button I wrote the following style:
QPushButton {
background-color: #DCDCDC;
border: 1px solid #BEBEBE;
}
...
And this would apply to all QPushButtons in the project. Next I need to define another action style for QPushButtons also, but which should be selected by developer. How can I do this?
I expect something like this:
QPushButton#ActionButton* {
background-color: blue;
border: 1px solid darkerblue;
}
And then if developer will specify objectName of his button starting with "ActionButton" (example "ActionButtonSendRespond") then it will use the second style.
You can subclass QPushButton into ActionButton so you can write specific CSS :
C++
#include <QPushButton>
class ActionButton : public QPushButton
{
Q_OBJECT
public:
using QPushButton::QPushButton;
};
CSS :
QPushButton {
background-color: #DCDCDC;
border: 1px solid #BEBEBE;
}
ActionButton {
background-color: blue;
border: 1px solid darkerblue;
}
Then when developers use one class or the other, they know which style will apply. And it can be useful if you also need to change the behaviour in the subclass.
Related
So I want to add some styles to my button. So I've created a class that derives from QPushButton. I have overriden mousePressEvent and mouseReleaseEvent functions. So far so good. Everything works as expected and buttons change color when pressed and released.
The problem comes When in my MainWindow I try to implement on_button_clicked(). It just wouldn't work.
I have experimented a bit with event->accept and event->ignore. that did not work.
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
}
void MainWindow::on_characters_clicked()
{
qDebug("Hello");
}
void Button::mousePressEvent(QMouseEvent* event)
{
setStyleSheet(defaultStyle + "Background-color: gray;");
}
void Button::mouseReleaseEvent(QMouseEvent* event) {
setStyleSheet(defaultStyle + "Background-color: darkgray; border: 1px solid gray; color: white;");
}
I want my button to have both styles on press and release and functionality. I can write an observer class and solve this, but I feel like there has to be an easier solution.
When you override a method you are modifying the behavior of the class, in this case the clicked signal is issued in mouseReleaseEvent, but mouseReleaseEvent is only invoked if mousePressEvent accepts the event, but when modifying code you have eliminated it. The solution is to call the implementation of the parent.
void Button::mousePressEvent(QMouseEvent* event)
{
setStyleSheet(defaultStyle + "Background-color: gray;");
QPushButton::mousePressEvent(event);
}
void Button::mouseReleaseEvent(QMouseEvent* event) {
setStyleSheet(defaultStyle + "Background-color: darkgray; border: 1px solid gray; color: white;");
QPushButton::mouseReleaseEvent(event);
}
On the other hand I do not see any need to override the mousePressEvent methods since the Qt Style Sheet supports the pseudo-states:
setStyleSheet(R"(
Button{
// default styles
background-color: darkgray;
border: 1px solid gray;
color: white;
}
Button::presed{
// default styles
background-color: gray;
}
)");
i am trying to change the color of radiobutton on selected and deselected as
QtStylesheet :Qt Stylesheet
but In this link it only refer to Loading a Image but how could I change it color and without loading Image and change border color or styling radiobutton
the requirement is attached in the Image :
Read documentation carefully. It describes all you need. It even almost described your case, the only difference is images instead of colours.
Style sheet for your case is like this:
QRadioButton {
background-color: gray;
color: white;
}
QRadioButton::indicator {
width: 10px;
height: 10px;
border-radius: 7px;
}
QRadioButton::indicator:checked {
background-color: red;
border: 2px solid white;
}
QRadioButton::indicator:unchecked {
background-color: black;
border: 2px solid white;
}
Setting style sheet to next works for me:
QRadioButton:checked{
background-color: red;
}
QRadioButton:unchecked{
background-color: black;
}
Setting style sheet to QRadioButton::indicator:checked doesn't work, because this only changes the settings of the indicator.
If you want to change the background color of your radiobutton when he's selected you should use both slots and stylesheet.
I will name your button MyButton.
In your .h you will find :
private :
QRadioButton MyButton;
private slots:
void changeColorMyButton();
and in your .cpp add in the setup of your Mainwindow :
QObject::connect(MyButton,SIGNAL(clicked(bool)),this,SLOT(changeColorMyButton));
Your button is now connected to the signal clicked and when you will click on your button, the slot changeColorMyButton will be executed. You can now customize your slot.
void Mainwindow::changeColorMyButton()
{
if(this.MyButton.isChecked())
{
this.MyButton->setStyleSheet("background-color: black");
}
else
{
this.MyButton->setStyleSheet("background-color: yellow");
}
}
I have a global file.css for ma Qt application
He works fine !
but I have a Custom widget for my titleBars of DockWidget
myDockWidget.setTitleBarWidget(myWidgetTitleBar(myDockWidget))
I don't find how to change styleSheet of this widget in my file.css
if I write in my class :
myWidgetTitleBar.setStyleSheet("Border:2px solid green; background-color:red;")
it doesn't works.
I tried :
file.css :
myWidgetTitleBar { Border:2px solid green; background-color:red; }
or, after have set in my class setObjectName("toto")
Widget#toto { Border:2px solid green; background-color:red; }
that's strange because all other widget with toto name works (green border and red bg), but this specific widget in my titlebar doesnt't.
(is the same when floating or not)
I tried this but same, doesn't work.
myDockWidget::title { Border:2px solid green; background-color:red; }
any Idea ? a Qt bug ?
I work with pyqt 4 on linux opensuse
I want to know how can I set a style sheet for a Phonon::SeekSlider as like as a QSlider in Qt. With QSliders we can assign so many attributes by easily calling something like this.
QSlider::handle:horizontal {
background:white;
border: 1px solid white;
width: 6px;
margin-top: -2px;
margin-bottom: -2px;
border-radius: 0px;
}
But how can I do this same with SeekSlider.I cannot set attributes by calling Phonon::SeekSlider or QSlider. Only I can do is set attributes by calling QWidget {} and it has no use on SeekSlider. I must be able to customize the handle,page etc...
Please anyone has ideas...Help me !!!
You can access Phonon::SeekSlider slider control like that:
Phonon--SeekSlider > QSlider {
}
Phonon--SeekSlider > QSlider::handle {
}
etc.
I wish to set a custom background color for active QTabWidget tab. Unfortunately, I can't figure out the desired selector.
On Linux the following hack works:
QTabWidget::tab > QWidget > QWidget {
background: #fff;
}
But on Windows I have to use one more QWidget:
QTabWidget::tab > QWidget > QWidget > QWidget {
background: #fff;
}
Is there a "real" solution?
You have to use QTabBar and not QTabWidget. The selectors you should use are the following:
// Control the tab-bar with respect to the QTabWidget
QTabWidget::tab-bar {
left: 5px;
}
// Control the look of the tab in general
QTabBar::tab {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
// Control the look of the tab when it is selected
QTabBar::tab:selected
{
// Add css parameters
}
// Control the look of the tab when hovering over it
QTabBar::tab:hover
{
// Add css parameters
}
// Control the look of the tab when it is not selected
QTabBar::tab:!selected
{
// Add css parameters
}