I need badly to increase size of handle for my slider, but no css options can do this(styleSheet()).
The default example from Qt docs didn't help me as well.
I have a slider like this:
I wish to increase the height of its handle, as shown on explanation image below, but I can't guess how to do it. Probably the only way is to subclass QAbstractSlider?
Here is the stylesheet from my code:
"QSlider::groove:horizontal {"
"border: 1px solid #999999;"
"height: 32px;" /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
"background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);"
"margin: 2px 0; }"
"QSlider::handle:horizontal {"
"background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);"
"border: 1px solid #5c5c5c;"
"width: 40px;"
"margin: -20px 0;" /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
"border-radius: 3px;}"
);
Use this stylesheet:
.QSlider {
min-height: 68px;
max-height: 68px;
background: #5F4141;
}
.QSlider::groove:horizontal {
border: 1px solid #262626;
height: 5px;
background: #393939;
margin: 0 12px;
}
.QSlider::handle:horizontal {
background: #22B14C;
border: 5px solid #B5E61D;
width: 23px;
height: 100px;
margin: -24px -12px;
}
It will produce the following:
Please note the the height of the slider is made constant by setting both min-height and max-height to the same value.
I copied your exact code into a form in Qt Designer. The slider handle looks large enough.
However, when adding a layout, the whole slider's size isn't large enough to show the complete handle. I simply added this:
QSlider {
height: 80px;
}
And get this result:
Related
How can i make QTabWidget's corners rounded? Not Tab's, but frame's (?)
I tried:
QTabWidget{
border-radius: 7px;
}
But it isn't working.
QSS for tabs:
QTabBar::tab {
background-color: qlineargradient(x1:0.5, y1:1, x2:0.5, y2:0, stop:0 rgb(253,250,250), stop:0.2 rgb(253,250,250), stop:1 rgb(255,249,234));
border-top-left-radius: 7px;
border-top-right-radius: 7px;
min-width: 8ex;
padding: 5px;
}
QTabBar::tab:selected {
background-color: rgb(253,250,250);
}
QTabBar::tab:!selected {
margin-top: 5px;
background: qlineargradient(x1:0.5, y1:1, x2:0.5, y2:0, stop:0 rgb(253,250,250), stop:0.2 rgb(253,250,250), stop:1 rgb(250,244,229));
color: rgb(93, 109, 109)
}
Just tested this (black color and thick frame just to see something) and should thus work:
QTabWidget::pane {border: 3px solid black; border-radius: 7px;}
I have the following stylesheet:
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #2A2A2A, stop: 0.4 #E1E1E1,
stop: 0.5 #E1E1E1, stop: 1.0 #2A2A2A);
background-image: url(:/metal_toolbar);
border-left: 1px solid #9B9B9B;
border-right: 1px solid #9B9B9B;
border-bottom: 1px solid #9B9B9B;
border-top-color: #5A5A5A;
font: bold 12pt;
/*min-width: 20ex;
max-width: 1000ex;*/
padding: 2px;
}
If I don't declare the font in the style sheet, my tabs are sized appropriately for the text they contain, however when I increase the font size, the tab size remains constant and the text gets cut-off. I've tried all the width settings but I want the tab width to scale to what it contains.
Anyone know a work-around or fix for this?
I'm loading the style sheet file into my program as a skin, so I'd prefer stylesheet solutions over programmatic solutions if they exist
EDIT:
Here's the working version with proper tab sizes
QTabBar
{
font: bold 9pt;
}
QTabBar::tab
{
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #2A2A2A, stop: 0.4 #E1E1E1,
stop: 0.5 #E1E1E1, stop: 1.0 #2A2A2A);
background-image: url(:/metal_toolbar);
border-left: 1px solid #9B9B9B;
border-right: 1px solid #9B9B9B;
border-bottom: 1px solid #9B9B9B;
border-top-color: #5A5A5A;
min-width: 20ex;
padding: 2px;
}
Set the font from the QTabBar then. Rough pseudocode below.
font = tabbar.font()
font.setPointSize(12)
font.setBold(true)
tabbar.setFont(font)
You should be able to access the QTabBar from the QTabWidget, and just set your style sheet without the font. I hope this can help.
I would like to display table in Qt with specific style. I want to draw all grid lines with same color and same width.
Problem is, that it is hard to style QHeaderView. All the time, I get 2px grid width or no grid at all.
I Have folowing window with one QTableWIdget
and asociated styleSheet
QWidget {
background-color: #333333;
color: #fffff8;
}
QHeaderView::section {
background-color: #646464;
padding: 4px;
border: 1px solid #fffff8;
font-size: 14pt;
}
QTableWidget {
gridline-color: #fffff8;
font-size: 12pt;
}
QTableWidget QTableCornerButton::section {
background-color: #646464;
border: 1px solid #fffff8;
}
Are there any tricks to have all grid lines 1px width? I'm using 4.8.5 and I can't upgrade to version 5.x.
The trick is border-style: none; in QHeaderView::section after witch border-left, border-right, border-top and border-bottom starts working. Correct style for QHeaderView::section should be
QHeaderView::section {
background-color: #646464;
padding: 4px;
font-size: 14pt;
border-style: none;
border-bottom: 1px solid #fffff8;
border-right: 1px solid #fffff8;
}
QHeaderView::section:horizontal
{
border-top: 1px solid #fffff8;
}
QHeaderView::section:vertical
{
border-left: 1px solid #fffff8;
}
I think what you did is you added additional border for section cells, and the section properties should look like that ( although I did not try this solution )
QHeaderView::section {
background-color: #646464;
padding: 4px;
border: 0px;
font-size: 14pt;
}
For more information how to style your headers, see:
http://pastebin.com/svReqHr3
HowTo draw correct CSS border in header?
I currently have something like this in my QtableView stylesheet
QTableView::item
{
selection-background-color: rgb(85, 85, 127);
border-bottom: 1px double #8f8f91;
}
Now the problem is the selection-background-color: rgb(85, 85, 127); takes effct only if border-bottom: 1px double #8f8f91; is disabled. Any suggestions ??
You should specify any border attribute if you want suck customization. Is't specific of QSS:
border: 0px solid transparent; // Or any other border
I am attempting to add items to QStandardItemModel all of these items are of type QStandardItem. I wanted to know if there was a way to attach a QPushButton to the model.
In other words are they any properties of QStandardItem that I could alter to make it appear as a push Button
Using style sheets is your best bet. Here is an example where I styled the items in a QListWidget to look like tabs. A little massage can give it a button look.
/* make the property editor list look like tabs */
QListWidget#PropertyEditor_List
{
background-color: Transparent;
padding-right: 0px;
padding-top: 2px;
padding-left: 2px;
}
QListWidget#PropertyEditor_List::item
{
padding: 3px;
margin-left: 3px;
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 white, stop:1 Transparent);
border-left: 1px solid rgb(145,155,155);
border-top: 1px solid rgb(145,155,155);
border-bottom: 1px solid rgb(145,155,155);
border-right: 0px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
QListWidget#PropertyEditor_List::item:hover, QListWidget#PropertyEditor_List::item:selected
{
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgb(255,200,60), stop:0.039 rgb(255,200,60), stop:0.04 white, stop:0.4 white, stop:1 Transparent);
border-left-color: rgb(230,139,44);
}
QListWidget#PropertyEditor_List::item:selected
{
margin-left: 0px;
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgb(255,200,60), stop:0.039 rgb(255,200,60), stop:0.04 white);
border-left-color: rgb(230,139,44);
color: black;
}