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
Related
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;
}
I have created a vertical progress bar and an trying to style it with rounded edges. No matter what I do, I don't seem to be able to get the progress or chunk of the progress bar (QProgressBar::chunk) with rounded edges. Please help me out, I am new to QT.
Please find my code below:-
progressbar_V = new QProgressBar;
progressbar_V->setParent(this);
progressbar_V->setMinimum(0);
progressbar_V->setMaximum(5);
progressbar_V->setValue(3);
progressbar_V->setStyleSheet("QProgressBar{ border: solid grey; border-width: 6; border-radius: 12; color: black; text-align: centre; margin-right: 12; }, QProgressBar::chunk:vertical {background-color: #05B8CC; width: 20px;}");
progressbar_V->setGeometry(250,250,60,300);
progressbar_V->setOrientation(Qt::Vertical);
The Progress Bar text is at the top in the output as well. How will I get it to the middle of the vertical progress bar
You're right, you can use this parameter:
border-radius: 50px;
to get round borders !
but you just forgotten to specify px at the end
So, once your code is updated, it looks like this :
progressbar_V->setStyleSheet("QProgressBar{ border: solid grey; border-width: 6; border-radius: 12px; color: black; text-align: centre; margin-right: 12; }, QProgressBar::chunk:vertical {background-color: #05B8CC; width: 20px;}");
You need to change your style sheet into something like this:
progressbar_V->setStyleSheet("QProgressBar{ border: solid grey;border-bottom-right-radius: 12px;border-bottom-left-radius: 12px; color: black; text-align: centre; },QProgressBar::chunk {background-color: #05B8CC;border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;}");
happy coding..
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 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);
}
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%;