I used QSS to style a QPushButton. I wanted to use two images to be set as the background-image. One for normal state & one when the button is pressed. But image shows with a border around it.
My code:
QPushButton{
background-image: url();
border-image: url(images/back/up.png);
color:rgb(255,255,255);
border-width: 2px;
border-radius: 22px;
}
QPushButton::pressed {
border-image:url(images/back/up1.png);
border-width: 2px;
background-image: url();
color:rgb(255,255,255);
}
Try following style snippet. You only need to change the background-image during the :pressed state.
QPushButton{
background-image: url(images/back/up.png);
color:rgb(255,255,255);
border-width: 2px;
border-radius: 22px;
}
QPushButton::pressed {
background-image:url(images/back/up1.png);
}
Related
I have the styleSheet of QPushbutton
QPushButton
{
background-image: url(:/image.png);
background-position: left center;
background-repeat: no-repeat;
color: rgb(255,255,255);
border-radius: 5px;
background-color: rgb(120,120,120);
border: none;
text-align: left;
}
Now I require a 10px image padding.
QPushButton
{
background-image: url(:/image.png);
background-position: left center;
background-repeat: no-repeat;
color: rgb(255,255,255);
border-radius: 5px;
background-color: rgb(120,120,120);
padding-left: 44px;
border: none;
text-align: left;
border-left: 12px solid rgb(120,120,120);
}
Now my left side no longer has border-radius. So how do I have the border-radius and padding the image at the same time? Thanks!
Look at this documentation, you can notice in the image how border is placed above the content.
https://doc.qt.io/qt-5/stylesheet-customizing.html#the-box-model
One thing I observed in your code is you made border: none;, which might have ignored your borders.
Just using padding-left should help....
May be something like below (not tested)
background-image: url(:/image.png);
background-position: left center;
background-repeat: no-repeat;
color: rgb(255,255,255);
border-radius: 5px;
background-color: rgb(120,120,120);
padding-left: 10px;
This question already has an answer here:
QTabBar strange line doesn't disappear
(1 answer)
Closed 2 years ago.
here's is the style sheet I used for a modified version Qt Mainwindow example:
QWidget { background: #757575 }
QTabWidget { padding: 0px; border: 0px; background-color: #757575; }
QTabWidget::pane { border: 0px solid #C2C7CB; top: -3px; background: #757575; }
QTabWidget::tab-bar {
subcontrol-position: top left;
subcontrol-origin: margin;
padding: 0px 0px 0px 0px;
border: 0px;
background: transparent;
}
QTabBar { background-color : #757575; }
QTabBar::close-button {
subcontrol-position: right;
}
QTabBar::tab {
color: white;
background: #757575;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
min-width: 8ex;
padding: 10px;
min-width: 100px;
}
QTabBar::tab::selected{ border-bottom: 0px solid #757575; background-color: darkgrey; }
The pic below shows the output of the above stylesheet on QDockWidget example
Here's a link for the Project
https://drive.google.com/open?id=0B6cx8jGbgXo7Z0xucXBaSEljMGc
QTabBar::setDrawBase(false); this function can solve the problem.hope this may help you.
This is a default border that was not redefined. Although I cannot reproduce the problem with your style sheets (things show up correctly to me), the solution is to redefine the border property, probably from the QToolBar
QToolBar {
border: 0;
background-color: #757575;
}
How can i get the appearance of QDateEdit as shown on the image?
I tried changing the stylesheet, but I dont know how to achieve the spacing between the button and the edit, nor how can I change the down arrow button.
It comes close to the image you've posted:
QDateEdit
{
background-color: white;
border-style: solid;
border-width: 4px;
border-color: rgb(100,100,100);
spacing: 5px;
}
QDateEdit::drop-down {
image: url(:/new/myapp/cbarrowdn.png);
width:50px;
height:15px;
subcontrol-position: right top;
subcontrol-origin:margin;
background-color: white;
border-style: solid;
border-width: 4px;
border-color: rgb(100,100,100);
spacing: 5px;
}
Maybe the key-word here is "sub-control". The arrows of the DateEdit or Combo-Box or anything else, don't apply all the style definitions defined in parent-control. You have to find out, how to address these sub-controls for each Qt-Class and customize the styles for each.
I hope these links will be helpful:
http://doc.qt.io/qt-4.8/stylesheet-customizing.html
http://doc.qt.io/qt-4.8/stylesheet-examples.html
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?
Using a stylesheet I manage to set the background for the title element as shown in the image above (1.) using:
QGroupBox::title
{
background-color: rgb(255, 255, 0);
subcontrol-origin: margin;
subcontrol-position: bottom center;
}
Now I want the title to expand to the maximum size of the hosting QGroupBox as shown in image 2.. How do I accomplish this?
Thanks!
Edit: I wish to do this using style sheets only.
It turns out my efforts to find a solution on Google failed due to incorrect search terms...
http://www.qtcentre.org/threads/43232-customizing-QGroupbox-title purposed setting
QGroupBox::title
{
padding-left: 2000px;
padding-right: 2000px;
}
Not very pretty but at least It could be done using stylesheets only.
You can set background-image to expand the title.
QGroupBox {
border: 1px solid #90c6dd;
border-radius: 0px;
margin: 8px 8px 7px 7px;
padding: 56px 10px 10px 10px;
background-image: url(:/res/svg/group-bg.svg);
background-repeat: repeat-x;
background-position: top left;
}
QGroupBox::title {
font-size: 24px;
font-weight: bold;
subcontrol-origin: padding;
subcontrol-position: top left;
min-height: 39px;
padding: 0 10px 0 10px;
}
if you can get pointer on the QGroupBox parent you can get its width and knowing its parameter do the following:
this->setWidth(pOnParent->width());
padding-left: 100%;
padding-right: 100%;