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.
Related
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:
I am trying to make a QSlider that has an absolute gradient and a chunked style in the QSlider::add-page part of the slider.
Following Style Sheet code:
QSlider::groove:vertical {
background: #021017;
BORDER-radius: 5px;
position: absolute;
left: 10px;
right: 10px;
}
QSlider::handle:vertical {
height: 10px;
background: #0b1707;
border: 1px solid #46992b;
margin: 0px -10px;
/* expand outside the groove */
border-radius: 5px;
}
QSlider::add-page:vertical {
BORDER-radius: 5px;
border: 1px solid #0e566d;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);
}
QSlider::sub-page:vertical {
background: #021017;
BORDER-radius: 5px;
border: 1px solid #0e566d;
margin: 0px 1px 0px 1px;
}
QSlider::handle:vertical:hover {
background-color: #46992b;
}
And I get the following output:
But as I move the handle the gradient changes based on the height from the bottom of the slider to the handle. I would like the gradient to be based on the height from the bottom of the slider to the top. Meaning changing the handle position will not change the look of it.
Also is it possible to have a chunked out gradient-- like this progress bar?
For the first question: yes, it is possible. I adjusted the style sheet you provided (uncommented things, you will notice them):
QSlider::groove:vertical {
width: 10px;
/* background: #021017;*/
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);
border-radius: 5px;
position: absolute;
left: 10px;
right: 10px;
}
QSlider::handle:vertical {
height: 10px;
background: #0b1707;
border: 1px solid #46992b;
margin: 0px -10px;
/* expand outside the groove */
border-radius: 5px;
}
QSlider::add-page:vertical {
border-radius: 5px;
border: 1px solid #0e566d;
/*background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);*/
}
QSlider::sub-page:vertical {
background: #021017;
border-radius: 5px;
border: 1px solid #0e566d;
margin: 0px 1px 0px 1px;
}
QSlider::handle:vertical:hover {
background-color: #46992b;
}
Summary: style the groove with the gradient and skip the add-page background color.
For the second question, ::chunk is not working, so I think it is not working with the default QSlider. Feel free to implement your own class, which can handle chunks.
I'm creating an application in C++, using QT and stylesheets to design my app. It's working just fine. But I have a quick question,
I'm wondering if there's any way I can throw away the highlighting of a tab when it's selected. I'm building a Qt application and the result is gross :
My qss looks like this :
QTabWidget::tab-bar {
alignment: center;
}
QTabBar::tab {
background-color: #F5FCFE;
border-bottom-color: #C2C7CB;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
height: 60px;
width: 200px;
margin: 10px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #CFEFFC;
}
Thanks for you help
This is a focus frame. To remove it, you should set the tab bar's focus policy to "NoFocus":
tabWidget.tabBar()->setFocusPolicy(Qt::NoFocus);
I currently have a QToolBar that has the following style sheet
QToolBox::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border-radius: 3px;
color: darkgray;
width: 70px;
}
QToolButton { /* all types of tool button */
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
}
QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
padding-right: 30px; /* make way for the popup button */
}
QToolButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button {
border: 2px solid gray;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
/* 16px width + 4px for border = 20px allocated above */
width: 30px;
}
Now the problem with the above style sheet is that the QToolButton tag applies to every toolbutton that I add to the QtoolBar. Is there anyway to restrict the application of tis design to certain QToolButton that I add dynamically. The stylesheet is added at design time to the QToolBar ?
You could use the objectName of the instancied QToolButton. In a QStyleSheet you can target specific instances of QtWidget inherited classes with #ObjectName.
exemple in sources :
QWidget *pWidget = new QWidget(parent);
pWidget->setObjectName("myWidget");
example in qss :
QWidget {
background-color: red;
}
#myWidget {
background-color: green;
}
for your widget with object name set as "myWidget", the background will be green, for all the others it will be red.
You will eventually need to polish() your widget if you dynamically update your stylesheet too. for this look at Qt doc : polish()
According to CSS Tricks, the following CSS syntax would result in left border gradient.
.left-to-right {
border-width:3px 0 3px 3px;
-webkit-border-image:
-webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
-o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
-moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
}
I'm trying to get the border gradient on the bottom of the element.
I tried changing this
border-width:3px 0 3px 3px;
to this
border-width:0 0 3px 0;
this
border-width:0 3px 3px 3px;
And it doesn't work, can anybody help me with getting that bottom border to work?
You may need a WebKit browser to do this.
Here would be a fiddle for one to work with; http://jsfiddle.net/HsTcf/
Thanks.
border-width: 0 0 3px 0;
is correct.
However, the following changed needed to be made:
... -gradient(right, ...
needed to be changed to
... -gradient(top, ...
and 1 100%; to 100% 1;.
Demo: jsfiddle.net/HsTcf/3
Here is another way that works for bottom borders. This is the complete class declaration from a site example.
#header_bg {
position: fixed;
top: 0px;
width: 100%;
height: 121px;
top: 0px;
background-color: #fff;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
z-index: 10;
}
<div id="header_bg"></div>
I am assuming above you are trying to make a fixed header. The most important part of course is the box-shadow property. This will work in most modern browsers as well.