add a QStandardItem of type PushButton - c++

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

Related

QSlider Stylesheet

I'm using QT widgets.I want to change the style of SliderBar.I can make it like this at the end of my efforts.
I did this
but I need this
I am sharing the stylesheet codes below. How can I do as shown in the second picture.
QSlider::groove:horizontal {
height: 6px;
width: 350px;
background: grey;
margin: 8px;
border: 1px solid #c17d08;
border-radius: 12px;
}
QSlider::sub-page:horizontal {
background: #c17d08;
height: 6px;
border-radius: 12px;
}
QSlider::add-page:horizontal {
background: #e9e9e9;
height: 10px;
border-radius: 12px;
}
QSlider::handle:horizontal {
background: transparent;
width: 22px;
margin: -10px;
border: 1px solid transparent;
border-radius: 5px;
}
I changed your stylesheet to this :
QSlider::groove:horizontal {
height: 6px;
width: 350px;
background: grey;
margin: 8px;
border: 1px solid #c17d08;
border-radius: 12px;
}
QSlider::handle:horizontal {
background: #c17d08;
border: 1px solid #c17d08;
width: 14px;
margin: -5px 0;
border-radius: 6px;
}
QSlider::add-page:horizontal {
height: 10px;
background: #e9e9e9;
border: 1px solid #c17d08;
border-radius: 12px;
}
QSlider::sub-page:horizontal {
background: #c17d08;
height: 6px;
border: 1px solid #c17d08;
border-radius: 12px;
}
your border-radius should be proportional to the length and width to become a circle.
Result :

QSlider handle ignores border radius when height is reduced

I am trying to create a gui application to control the volume level of my machine using Qt5 and C++.
This is what I kind of want to achieve.
So, I created the basic layouts and added the QSlider, and then used the following stylesheet to style it:
QSlider::groove:horizontal
{
height: 16px;
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -5px 6px -5px 6px;
border-radius:11px;
border: 3px solid #ffffff;
}
I got the following result:
First the handle is an eclipse, and not a circle. But I wanted to reduce the height of the groove, so I modified the above stylesheet:
QSlider::groove:horizontal
{
height: 10px; // modified here
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -5px 6px -5px 6px;
border-radius:11px;
border: 3px solid #ffffff;
}
And now, the handle of the slider became a rectangle.
Can anyone please answer what's causing it to behave like this, or point me to some docs.
your border-radius should be proportional to the length and width to become a circle.
Try this style :
QSlider::groove:horizontal {
border-radius: 1px;
height: 3px;
margin: 0px;
background-color: rgb(52, 59, 72);
}
QSlider::groove:horizontal:hover {
background-color: rgb(55, 62, 76);
}
QSlider::handle:horizontal {
background-color: rgb(85, 170, 255);
border: none;
height: 40px;
width: 40px;
margin: -20px 0;
border-radius: 20px;
padding: -20px 0px;
}
QSlider::handle:horizontal:hover {
background-color: rgb(155, 180, 255);
}
QSlider::handle:horizontal:pressed {
background-color: rgb(65, 255, 195);
}
And This is for your style (I change margin and padding)
QSlider::groove:horizontal
{
height: 16px;
background: yellow;
margin: 2px;
}
QSlider::handle:horizontal
{
background: blue;
width: 16px;
height: 16px;
margin: -4px 0;
padding: -4px 0px;
border-radius:11px;
border: 3px solid #ffffff;
}

QTabWidget round corners for frame (not tabs)

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

QWebView plain text document style

In my app I have several places that use a QWebView and load the content from the server. In addition the app allows the user to select a default or a dark theme. When the content-type of the document to display is text/plain and the application theme is set to dark, the text is displayed as black text on a black background. I can only see the text if I highlight it. text/html documents work well with either theme.
Ideally when the dark theme is selected I want to display white text on a black (or dark gray) background. I have not been able to figured out how to do this.
Here is the code I currently use to set up the theme:
if(Theme == "dark")
{
app.setStyle(QStyleFactory::create("Fusion"));
QPalette darkPalette;
darkPalette.setColor(QPalette::Window, QColor(88,88,88));
darkPalette.setColor(QPalette::WindowText, Qt::white);
darkPalette.setColor(QPalette::Base, QColor(25,25,25));
darkPalette.setColor(QPalette::AlternateBase, QColor(88,88,88));
darkPalette.setColor(QPalette::ToolTipBase, Qt::white);
darkPalette.setColor(QPalette::ToolTipText, Qt::white);
darkPalette.setColor(QPalette::Text, Qt::white);
darkPalette.setColor(QPalette::Button, QColor(53,53,53));
darkPalette.setColor(QPalette::ButtonText, Qt::white);
darkPalette.setColor(QPalette::BrightText, Qt::red);
darkPalette.setColor(QPalette::Link, QColor(42, 130, 218));
darkPalette.setColor(QPalette::Highlight, QColor(150, 200, 255));
darkPalette.setColor(QPalette::HighlightedText, Qt::black);
app.setPalette(darkPalette);
} else {
Theme = "default";
app.setStyle(QStyleFactory::create("Fusion"));
app.setPalette(DefaultPalette);
}
// load the style sheet
QFile file(":/themes/" + Theme + "theme.css");
file.open(QIODevice::ReadOnly);
const QByteArray theme = file.readAll();
app.setStyleSheet(theme);
The default theme style sheet is blank and the dark style sheet is:
QToolTip {
color: #ffffff;
background-color: #2a82da;
border: 1px solid white;
}
QScrollBar:horizontal {
border: 1px solid grey;
background: #606060;
height: 20px;
margin: 0px 20px 0px 20px;
}
QScrollBar::handle:horizontal {
border: 1px solid #909090;
background: #303030;
min-width: 20px;
}
QScrollBar::add-line:horizontal {
border: 1px solid #909090;
background: #303030;
image: url(:/themes/themes/dark/sbright.png);
width: 20px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
border: 1px solid grey;
background: #303030;
image: url(:/themes/themes/dark/sbleft.png);
width: 20px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar:vertical {
border: 1px solid grey;
background: #606060;
width: 20px;
margin: 20px 0 20px 0;
}
QScrollBar::handle:vertical {
border: 1px solid #909090;
background: #303030;
min-height: 20px;
}
QScrollBar::add-line:vertical {
border: 1px solid #909090;
background: #303030;
image: url(:/themes/themes/dark/sbdown.png);
height: 20px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
border: 1px solid grey;
background: #303030;
image: url(:/themes/themes/dark/sbup.png);
height: 20px;
subcontrol-position: top;
subcontrol-origin: margin;
}

QTableView/QTableWidget grid stylesheet - grid line width

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?