Styling QTabWidget background with CSS - css

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
}

Related

How do I make qtreewidget header transparent?

I want the treewidget header to look as if it's a label, so, I guess, I have to make it transparent? How do I do it?
I tried treeWidget->setStyleSheet("QTreeWidget::header {background-color: transparent}"); but it doesn't work.
The header is not a subcontrol of an itemview, thus QTreeWidget::header will not work. The header rather is a children widget of the view.
That means you could access the header via stylesheets with QTreeWidget QHeaderView {/*style here*/ }
For the background color of a header view you can check out the official Qt example.
In your case as you are setting the stylesheet directly to the view you can omit the parent so the following will do what you asked for:
treeWidget->setStyleSheet("QHeaderView::section { background-color: transparent; }");
In order to set the headers transparent, you have to add the following to the widget stylesheet:
QAbstractItemView QHeaderView {
show-decoration-selected: 0;
background: transparent;
}
QAbstractItemView::section QHeaderView::section {
show-decoration-selected: 0;
background: transparent;
}

QRadioButton color change on Selected and deselected Qt

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");
}
}

Color tag not working on QPushButtons

I am in the process of styling buttons in my user interface, using the UI designer in QT Creator 3.0.1 (with QT 4.8). I am trying to have these buttons behave more like links on a website--without borders, and responding to mouse hovers. Here is the stylesheet I am currently using:
QPushButton {
border: none;
color: #a8a8a8;
}
QPushButton:hover {
color: #ffffff;
}
I thought it was pretty straightforward, but for some reason the color tag is not functioning on hovers. To test, I tried changing the button in other ways, such as changing the background color, and that worked flawlessly.
I also tried changing the selectors to something more specific, by including an ancestor (QWidget QPushButton:hover) and by using the ID (QPushButton#templateButton), but neither have worked.
Is this a problem with the color tag, or am I missing something obvious?
It is also possible to use QLabel to create clickable links. Create custom class ClickableLabel which inherits QLabel and handles mousePressEvents
class ClickableLabel : public QLabel
{
Q_OBJECT
public:
explicit ClickableLabel(QWidget *parent = 0);
signals:
void clicked();
protected:
void mousePressEvent(QMouseEvent * event) ;
};
And
void ClickableLabel::mousePressEvent(QMouseEvent * event)
{
Q_UNUSED(event);
emit clicked();
}
It is also probably possible to handle mouse hover events and change style of the label based on them. However, I have not tested it.
This solution has been copied from somewhere but I do not remember anymore the original source.
Try this :
#templateButton {
border: 0px;
color: #a8a8a8;
text-decoration: underline;
text-align: right;
}
#templateButton:hover {
color: #FFFFFF;
}
#Anthony Hilyard I show you some pictures so I post another answer here.
1.normal
2.hover
#pushButtonForgetPassword {
border: none;
color: #0066ff;
text-decoration: underline;
text-align: right;
}
#pushButtonForgetPassword:hover {
color: #FFFFFF;
}
pushButtonForgetPassword would be the ID of my link button

Tab close button position

I want to style my tabs in my Qt app as follows:
I used following style sheet:
QTabBar{background-color: #fff; border-top: 0px;}
QTabBar::tab {
border-image: url(:/New_UI/tab_inactive.png) 7 17 7 2;
margin-left: 2px;
border-right: 17px;
border-top: 5px;
border-bottom: 5px;
font: 400 9.2pt "Segoe UI";
color: #ccc;
padding: 0px 13px 0px 5px;
max-height: 26px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
border-image: url(:/New_UI/tab_active.png) 6 17 6 2;
}
QTabBar::close-button {
image: url(:/New_UI/tab_close.png);
subcontrol-origin: padding;
subcontrol-position: right;
width: 13px;
height: 13px;
}
The result is as follows (close button position is not as I wanted):
What am I doing wrong & how could I get my desired result ?
EDIT : I know this post is old, but I hope it could help someone else.
After a couple of tests, I think there is one way to do this, but it does not use Qt style sheets :
Subclass your QTabWidget to have complete access to the protected features
Create your own QWidget or QPushButton as your close button
Manage the position of your button with the stylesheet property (margin-right for example)
Add your button to the tab tabBar()->setTabButton(index, QTabBar::RightSide, closeButton);
The code I used for the test :
MyTab::MyTab(QWidget *parent) : QTabWidget(parent)
{
/// Create your button
QPushButton *close = new QPushButton(this);
// Add a tab
addTab(new QWidget(), QIcon(), "Tab 1");
setStyleSheet("QTabBar::tab { width : 150px;}");
// Size and move your button
close->setStyleSheet("max-height: 14px; max-width: 15px; margin-right: 50px;");
// Add your button to the tab
tabBar()->setTabButton(0, QTabBar::RightSide, close);
}
Finally, in the MainWindow, I added my own TabWidget to a layout :
ui->layout->addWidget(new MyTab(this));
The result :
But now you will have to handle the close action manually by connecting the button and get the index for a removeTab(index) call.
I am doing the same thing as you do, here is my stylesheet:
QTabBar::close-button{
image:url(:tabclose.png);
margin-right:4px;
}
Do not use "width" and "height" property, those two doesn't work here, setting a "image:url()" on sub controls implicitly sets the width and height of the sub-control (unless the image in a SVG).
Use "margin-right" property to control the distance from the right edge of the tab;
Add a custom button is a good answer.but if you use margin to decide close-button's position,the close-button's mouse area will be abnormal,so I add a SpacerItem and button in a widget,finally add this widget to TabWidget.
void TabBarCloseable::tabInserted(int index)
{
QWidget *widget = new QWidget(this);
QHBoxLayout *layout = new QHBoxLayout(this);
widget->setLayout(layout);
QToolButton *closeBtn = new QToolButton(this);
layout->addWidget(closeBtn);
layout->insertSpacing(1, 15);
closeBtn->setStyleSheet("max-height: 16px; max-width: 16px;");
this->setTabButton(index, QTabBar::RightSide, widget);
QTabBar::tabInserted(index);
}
You have wrong padding
Top
QTabBar::tab {
min-width: 25ex;
padding: 10px 50px 10px 10px;
}
buttom
QTabBar::tab {
min-width: 25ex;
padding: 10px 0px 10px 10px;
}
This is a pure stylesheet solution, without creating the buttons manually:
QTabBar::close-button {
image: url(:/tab-close.png);
padding-left: -13px;
}
If you check the Qt source, the image painting code uses only the padding values, not the margin values.

How to Set style sheet for a Phonon::SeekSlider in Qt

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.

Resources