I have a question regarding the QGroupBox stylesheet. I want a custom stylesheet for QGroupBox that looks similar to the image below:
Can you please tell me how to look "Device Info" Style with white background?
Use setStyleSheet function to set any style for any state programmatically.
For your case, first obtain the QGroupBox object and let us assume "pGroupBox".
As you need title's back ground color to be white, you can set it as shown below.
pGroupBox->setStyleSheet("::title{background-color:white}");
Almost you can style anything check below link:
(you can set based on different psuedo states for different sub controls.)
http://doc.qt.io/qt-5.8/stylesheet-examples.html
You need to change style for QGroupBox::title subcontrol. http://developer.qt.nokia.com/doc/qt-4.7/stylesheet-examples.html#id-e7d01e98-168f-4c8a-ac7f-77233a406ba4
You can change the color here
QGroupBox {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E0E0E0, stop: 1 #FFFFFF);
border: 2px solid gray;
border-radius: 5px;
margin-top: 1ex; /* leave space at the top for the title */
}
specify the color whatever you want at the place of red.
Look at the Qt Style Sheets Examples.
Related
I have a small qt application written in c++. I want the same application to run in small embedded device with a touchscreen but the size of few QToolButton was too small to be visible comfortably. I have tired to increase the size by modifying following function (adding setfont member call):
QToolButton* ColorToolBar::setupToolButton(QString name, QString iconPath, bool isCheckable)
{
QToolButton *p_btn = new QToolButton(this);
p_btn->setCheckable(isCheckable);
p_btn->setIcon(QIcon(iconPath));
p_btn->setIconSize(QSize(ICON_WIDTH, ICON_HEIGHT));
p_btn->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
QFont font = p_btn->font();
font.setPointSize(10);
p_btn->setFont(font);
if (!name.isEmpty())
p_btn->setText(name);
p_btn->setMinimumWidth(MINIMUM_WIDTH);
p_btn->setMinimumHeight(MINIMUM_HEIGHT);
return p_btn;
}
I am able to change the Icon size using setIconSize member function but setPointSize and setFont doesn't do anything. I want to have larger text and icon.
I have a class AdvancePlotToolBar which has all the QToolButton.My qss file looks like :
AdvancePlotToolBar QToolButton {
border: none;
padding-right: 10px;
padding-bottom: 5px;
}
AdvancePlotToolBar QToolButton:hover {
border-bottom: 3px solid #52ce90;
padding-bottom: 5px;
}
AdvancePlotToolBar QToolButton:pressed {
border-bottom: 3px solid #52ce90;
}
AdvancePlotToolBar QToolButton:checked {
border-bottom: 3px solid #52ce90;
margin: 0px;
}
EDIT:
The code below shows how I add QToolButton to the layout of AdvancePlotToolbar.
AdvancePlotToolBar::AdvancePlotToolBar(QWidget *parent) : QWidget(parent)
{
transformationButton_ = setupToolButton("Transformations", "://images//summation.png", true);
QHBoxLayout *layout = new QHBoxLayout;
layout->addWidget(transformationButton_);
setLayout(layout);
}
Setting a style sheet is overriding the font size you're setting in the C++ code. Try it w/out any style sheet applied (even to QApplication) and check. (Also How to set the font size of the label on pushbutton in Qt? )
I have the same issue with a completely custom QToolButton which overrides initStyleOption() and sets own font details in there (so it happens each time just before the button is painted, unrelated to setFont() at all). This works until an app-wide style-sheet is applied (even if it doesn't affect QToolButton directly! *), or a style sheet is applied specifically to the button instance or to its parent. I haven't tracked down where exactly this is happening (somewhere in QStyleSheetStyle I imagine), so I do not have a workaround yet **. In your case since you're using CSS for the tool button anyway, that would probably be best place to set the font size as well.
* The reason setting a style sheet may affect elements which are not styled specifically in the CSS rules is that the whole underlying QStyle is replaced with QStyleSheetStyle, and the original style (Fusion, WindowsVista, Macintosh, etc) becomes a proxy/fallback for QStyleSheetStyle. Or IOW all painting is filtered through the CSS style first. This includes setting style sheet on individual elements as well as globally on QApplication.
** I suspect this is a Qt bug.
I need to align elements on GUI: actually, a single label, but at the specific position. I know how to use QGridLayout, QHBoxLayout, I know how to change the font to have the specified size. However, I don't know how to align the label like on this picture below. Any advices?
Here is the most direct, but hardcoded way.
#include "widget.h"
#include <QLabel>
#include <QFont>
Widget::Widget(QWidget *parent)
: QWidget(parent)
{
QSize frameSize = this->frameGeometry().size() - this->geometry().size();
this->resize(frameSize + QSize(250, 125));
QLabel * label = new QLabel(this);// parenting instead of layouts
label->resize(130, 32);
label->move(60, 40);
QFont f = label->font();
f.setPointSize(16);
label->setFont(f);
label->setText("Sample");
label->setFrameStyle(QFrame::Box);
}
Widget::~Widget()
{
}
Layouts and alignments are a much better solution, but if you really want to give numbers to everything... Also look into using forms. It makes "hardcoding" sizes and layouts a lot easier.
Hope that helps.
If you want the proportions, but have it resizeable, you can use QBoxLayouts and the addStretch() method. Roughly you have a 1/2/1 proportion, so you first add a stretch with stretch 1, then your widget with stretch 2 and then another stretch with stretch 1. That would be for the horizontal layout, you would then take that layout and put it in a vertical layout with 1/1/1 stretches.
If you know abut layouts and how to use them than great.
To tweak this after you have a layout you should use a style sheet. Here are some examples. You can set a style sheet on QApplication.
QPushButton#buttonName {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 60px;
margin-right: 60px;
min-width: 130px;
min-height : 32px;
}
PS. I know this is student homework :P
I'm trying to style the pop-up of a QComboBox.
Right now I have this pop-up:
I want to give it a border, so I insert the following code in my QComboBox class:
QWidget* popUp = findChild<QFrame*>();
popUp->setStyleSheet("QWidget {border: 1px solid rgb(74, 74, 74);}");
which gives me this result:
A pop-up with two borders: an internal one and an external one. And I only want the external one. Any ideas, thoughts or corrections?
Like Theolodis said, you just have to specify which QWidget you want to modify with your CSS.
popUp->setStyleSheet("QWidget#popUp {border: 1px solid rgb(74, 74, 74);}");
I want to change to color in which text is highlighted when the findText() method is used. This color has nothing to do with user selected text. I have tried CSS as well as setting a QPalette. All occurences are always highlighted in yellow.
I've been searching for this as well, and it seems like it's hardcoded deep inside WebKit:
Color RenderTheme::platformInactiveTextSearchHighlightColor() const
{
return Color(255, 255, 0); // Yellow.
}
I really have the same problem. But the good news: Setting the style sheet helps at least to change the fg/bk color.
m_browser->setStyleSheet("QWebView {
selection-background-color: blue; selection-color: white; }");
But this is not the whole truth because it only changes the fg/bk color of the currently found text. No idea how to change the fg/bk color of all occurences.
Axel
I'm trying to make a simple design to select a color and I'm using a QToolButton to open a QColorDialog.
My problem is that I would like the QToolButton to be of the selected color but I've only suceeded to set the background color, which is not what I want.
Here is a picture:
My code:
QColor color = QColorDialog::getColor(m_couleur);
if (color.isValid()) m_couleur=color;
m_labelCouleur->setPalette(QPalette(m_couleur));
m_labelCouleur->setAutoFillBackground(true);
m_buttonCouleur->setPalette(QPalette(m_couleur));
m_buttonCouleur->setAutoFillBackground(true);
Basically I would like the QToolButton to look something like this:
edit: Can anyone explain to me why the website won't let me add "Hi everybody" at the beginning?
QColor color = QColorDialog::getColor(m_couleur);
QPixmap px(20, 20);
px.fill(color);
m_buttonCouleur->setIcon(px);
No CSS involved in this case is (for me ofcourse) big pro
Use the setStylesheet function in order to change the background color of your button
m_buttonCouleur->setStyleSheet(QString("QToolButton{ background: %1; }").arg(m_couleur.name()));
I've done exactly that by using a QPushButton and setting its style sheet to the result from the color picker. I guess a tool button should probably be the same.
button->setStyleSheet(QString("background-color: %1; "
"border: 1px; "
"border-color: black; "
"border-style: outset;").arg(color.name()));