I need rounded tooltips in Qt5 + Windows.
Rounded corners for tooltips cannot be set via stylesheet, the following stylesheet is not working:
QToolTip
{
font-family: Calibri;
font-size: 13pt;
border-radius: 0.5em;
...
}
I cannot override tootip events for widgets, because our application has too many places where tootips are shown.
I'm trying to do it in the following way:
int ThemeStyle::styleHint(StyleHint hint, const QStyleOption* option, const QWidget* widget, QStyleHintReturn* returnData) const
{
switch (hint)
{
case SH_ToolTip_Mask:
{
if (option)
{
if (QStyleHintReturnMask* mask = qstyleoption_cast<QStyleHintReturnMask*>(returnData))
{
static const int cornerRadius = 5;
QPainterPath path;
path.addRoundedRect(option->rect, cornerRadius, cornerRadius);
mask->region = QRegion(path.toFillPolygon().toPolygon()); // Unable to use QPolygonF ?
}
}
}
break;
//....
As a result, I get too angular corners:
Is there some global way to make smooth rounded tootips in Qt5?
You're giving border radius in em, try this style sheet:
QToolTip {
border: 2px solid darkkhaki;
padding: 5px;
border-radius: 10px;
opacity: 200;
}
Related
I have following stylesheet for table.
QHeaderView::section, *[role="mockheader"]
{
min-width:80px;
background-color:#3949ab;
color:#FFFFFF;
border:0px;
outline:none;
height:40px;
}
QHeaderView::section:checked, QHeaderView::section:hover
{
background-color: #3949ab;
color:white;
}
QTableView
{
show-decoration-selected: 1;
border:0px;
background-color: rgba(0, 0, 0, 0);
gridline-color:#454545;
color: #FFFFF8;
}
QTableView::item
{
border: 0px;
min-height:35px;
padding:5px;
color:#FFFFFF;
}
QTableView::item:hover
{
background-color: rgba(255,255,255, 50);
}
QTableView::item:selected
{
background-color: #3949ab;
}
Ideally it should paint header in blue color. it is seems unaffected. see attached snap.
*Left blue space is label, which i added for filling left space. Its not a part of table. Just leave it.
I am not able to figure out any problem in my stylehseet. Please let me know what I am doing wrong here.
I have slide where I set the paginationStyle="progress" how can I change the color of the progressbar?
<ion-slides #exercisesSlider pager paginationType="progress">
Could somebody provide me a way to change the color of the progressbar?
Ionic uses Swiper API slides. So you can select using class names swiper-pagination-progress and swiper-pagination-progressbar like this:
.swiper-pagination-progress .swiper-pagination-progressbar {
background:red;
}
Using only the CSS borders worked for me :
.swiper-pagination-progressbar-fill {
border: 2px solid rgba(175, 240, 122, 0.719);
border-radius: 5px;
}
.swiper-pagination-progressbar {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
}
Simple and maybe obvious follow up from the answer from #Surya Teja . If you separate the classes you can control which color for each part of the progress bar.
.swiper.pagination-progress {
background-color: red
}
.swiper-pagination-progressbar {
background-color: white
}
I want to turn the text green and underline it when the mouse cursor goes over a QLabel, however, it just turns green, it does not get underlined.
QLabel:hover { color: green; text-decoration: underline;}
What am I doing wrong?
EDIT:
Fixed, I used:
void QClickableLabel::enterEvent (QEvent *event)
{
Q_UNUSED (event);
setStyleSheet ("QLabel { color: green; text-decoration: underline; }");
}
void QClickableLabel::leaveEvent (QEvent *event)
{
Q_UNUSED (event);
setStyleSheet ("QLabel { color: black; }");
}
According to Qt documentation (for both Qt 4 and Qt 5), QLabel "Does not support the :hover pseudo-state". Guess it's plain luck that it even changes the color...
To emulate, you could create a QLabel subclass and promote your widget to it. Then implement enterEvent() and leaveEvent() methods, doing necessary changes to the widget, e.g.
void MyLabel::enterEvent(QEvent* event)
{
QFont f = font();
f.setUnderline(true);
setFont(f);
}
void MyLabel::leaveEvent(QEvent* event)
{
QFont f = font();
f.setUnderline(false);
setFont(f);
}
You can use the following construction:
QLabel *text= new QLabel("Your text");
text->setStyleSheet("font-weight: bold; color: green; text-decoration: underline");
I'm using this and it's works wonderfully. ;)
I'm writing an app for a touchscreen, and the default handle is too small to grab reliably, so I want to make it bigger. According to the official documentation, several answers on SE, and a couple of other forums, this ought to work in a QWidget's constructor:
sliderGrandMaster = new QSlider(Qt::Vertical, panelRight);
sliderGrandMaster->setGeometry( appdata->buttonBorder , //Left
buttonTopRight + appdata->buttonBorder , //Top
halfwidth - (2 * appdata->buttonBorder), //Width
buttonRemainingHeight - (2 * appdata->buttonBorder)); //Height
sliderGrandMaster->setRange(0, RANGE_MAX);
sliderGrandMaster->setTickInterval(RANGE_MAX / 10);
sliderGrandMaster->setTickPosition(QSlider::TicksBothSides);
QString temp = QString("handle:vertical { background: green; height: %1px; margin: 0 -%2px; }")
.arg(buttonRemainingHeight / 5)
.arg(halfwidth / 3);
sliderGrandMaster->setStyleSheet(temp);
But it seems to have no effect. The handle is the same small size regardless of what values I put in the stylesheet, and it's not even green.
With my values at runtime, temp ends up being handle:vertical { background: green; height: 66px; margin: 0 -32px; }. The size of the slider is 94px wide by 331px tall.
Am I missing something?
Edit:
This:
QString temp = QString("QSlider::handle { background: green; height: %1px; width: %1px; margin: 0 -%2px; }")
.arg(buttonRemainingHeight / 5)
.arg(halfwidth / 3);
sliderGrandMaster->setStyleSheet(temp);
at least got it green. But the size is still wrong. Qt version 5.4.2
You can change the size of the handle just with a simple stylesheet. Example :
Is done with the following stylesheet :
QSlider::groove:horizontal
{
border:none;
margin-top: 10px;
margin-bottom: 10px;
height: 10px;
}
QSlider::sub-page
{
background: rgb(164, 192, 2);
}
QSlider::add-page
{
background: rgb(70, 70, 70);
}
QSlider::handle
{
background: white;
border: 3px solid black;
width: 60px; // **Change the width here**
margin: -30px 0;
}
Ok, using Qt 5.6.1 I got some progress on this. The following code
QSlider* slider = new QSlider(this);
slider->setOrientation(Qt::Horizontal);
slider->setStyleSheet("QSlider::groove:horizontal { "
"border: 1px solid #999999; "
"height: 20px; "
"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: 30px; "
"margin: -2px 0px; "
"} ");
QVBoxLayout *layout = new QVBoxLayout();
layout->addWidget(slider);
layout->addWidget(new QSlider(Qt::Horizontal, this));
setLayout(layout);
may be placed into an emty QWidget to work. It simply adds two QSliders, one of which is modified using a style sheet.
As you may see, I used to change the groove too and it is working as intended. But there are strange issues which could be a bug at all. Try commenting out some properties of the groove style sheet, like border, background and margin. If there are no effective properties, the width property of the handle is dropped. As I cannot find any constraint in the documentation, I wonder why this happens.
Also note the issues drawing the border around the handle. Seems to need some more fine tuning. ;)
Summing things up the quick solution for you should be added some default properties for the groove.
I have a QStyledItemDelegate with custom painting. Each item comprises some text and a progress bar. The progress bar is circular (radial) so it is custom-drawn too:
Also my application uses QSS for some custom styling.
This item delegate was used in a QListView.
I want be able to set different ProgressBar chunk colors for 100% and non-100% with QSS.
Question
Is there any way to know color for progress bar chunk for current QSS?
Investigation and code I've tried:
QSS:
QProgressBar { border: 1px solid #909090; ; }
QProgressBar[value="100"]::chunk {
width: 10px;
margin: 0.5px;
background-color: rgb(50,145,212);
}
QProgressBar::chunk {
width: 10px;
margin: 0.5px;
background-color: rgb(81,211,49);
}
C++:
QStyleOptionProgressBarV2 pbStyleOption;
{
boost::scoped_ptr<QProgressBar> pb(new QProgressBar());
pb->setStyle(QApplication::style());
pb->setStyleSheet(static_cast<QApplication*>(QApplication::instance())->styleSheet());
pb->setValue(progressPercentage);
pb->setMaximum(100);
pbStyleOption.initFrom(pb);
qDebug() << pbStyleOption.palette.brush(QPalette::Highlight);
}
I'm using QPalette::Highlight because I looked into Qt's source for styles and it uses this ColorRole for PE_IndicatorProgressChunk.
P.S.
QSS above works only for a slightly modified QProgressBar. The only modification is a reimplemented setValue(). Here is its code:
void StyledProgressBar::setValue(int val)
{
QProgressBar::setValue(val);
style()->unpolish(this);
style()->polish(this);
update();
}