styling text regions with class selector from global QSS - qt

How can I style a span that is part of a widget text (e.g.
a QLabel) via global style sheet?
E.g. in below example, both foo and bar should be red.
#include <QtWidgets/QApplication>
#include <QtWidgets/QLabel>
class
some_label : public QLabel
{
Q_OBJECT
public:
some_label(QString text = "") : QLabel(NULL) {
setText(text);
show();
};
};
#include "main.moc"
static const char *css =
"some_label { color : blue; background : black; }"
"span.some_class { color : red; }";
int
main(int argc, char **argv)
{
QApplication a(argc, argv);
a.setStyleSheet(css);
some_label label("before "
"<span style=\"color:red;\">foo</span> " /* works */
"<span class=\"some_class\">bar</span> " /* fails */
"after");
return a.exec();
}
Qmake (Qt 5.1.1) project file:
QT += widgets
SOURCES += main.cpp
I would really appreciate a solution that avoids hardcoding the style as I did
with the foo span.
The goal is for the application look to be determined entirely by a
user-supplied style sheet (represented by css in the example).
At the moment I use a workaround involving separate labels for each element
that is colored and it is a nightmare to maintain.
I have consulted a few online sources as well as Blanchette/Summerfield chapter
19 but those are primarily concerned with styling whole widgets.

If you don't need to change styling after the QLabel loads, you could devise a system where you text-replace the colors you want for each word from a centralized style file:
// These values come from a central, user-supplied style sheet, etc.
QString primary = "red";
QString secondary = "green";
some_label label("before "
"<font color=\"" + secondary + "\">foo</font> "
"<font color=\"" + primary + "\">bar</font> "
"after");
This system is a little hard to read but it could be an improvement over using many QLabels.
(As you may have noticed, Qt doesn't support CSS selection of classes within QLabels.)

Related

How to access QTextEdit "layout" to add "status bar"?

This a modified question I have posted on this forum.
It is not a repost, for two reasons - I cannot edit the other post and I am trying to
resolve this issue from another angle. Besides the other post got derailed by people who mean well but did not really read the post.
I have a working C++ code which is using (QT) QTextEdit class to collect and process text data.
The class - as its name suggest - was designed to collect and analyze text.
The text is displayed in "view " area.
My task is to select ONE word of text and drag it to another GUI object.
I like to put the text being dragged into QT standard "status bar".
Normal QT GUI widgets are designed using QTDesigner. Integral part of such design process
is "layout".
As it stands , QTextEdit DOES NOT HAVE / USE "layout" or use it but it is NOT visible / accessible when QTextEdit is implemented - there is no need for it.
In order to add "status bar" I need to MODIFY the view to hold the current text editing
"layout" and add "status bar " layout.
I am unable to figure out how to get access to the QTextEdit class GUI layout.
I am asking for help to accomplish that- how to add "status bar" to EXISTING QTextEdit.
Please read the post carefully _ I need help with how to add "status bar" to EXISTING QTextEdit.
I do have an option to replace the QTextEdit with basic "widget" class but it "breaks " the working code and I rather not do that.
I did look into setting multiple inheritance - Qwidget and QTextEdit but did not work.
PLEASE Mr Higgins , editing my post for proper English grammar and composition DOES NOT solve the problem. So , please - don't.
I'm not entirely sure but your question seems to imply that inheriting from QTextEdit would be acceptable. If that's the case then you can probably make use of the fact that QTextEdit itself inherits QAbstractScrollArea and use the viewport margins to create an area in which to show a status bar of some sort.
Consider the following code...
#include <QApplication>
#include <QScrollBar>
#include <QStatusBar>
#include <QTextEdit>
namespace {
class text_edit: public QTextEdit {
using super = QTextEdit;
public:
explicit text_edit (QWidget *parent = nullptr)
: super(parent)
, m_status(this)
{
m_status.setStyleSheet("background-color: gray;");
m_status.showMessage("Status text goes here...");
show_status(true);
horizontalScrollBar()->installEventFilter(this);
verticalScrollBar()->installEventFilter(this);
setLineWrapMode(QTextEdit::NoWrap);
}
protected:
virtual bool eventFilter (QObject *obj, QEvent *event) override
{
if (event->type() == QEvent::Show || event->type() == QEvent::Hide)
update_status_geometry();
return super::eventFilter(obj, event);
}
virtual void resizeEvent (QResizeEvent *event) override
{
super::resizeEvent(event);
update_status_geometry();
}
private:
void show_status (bool on)
{
if (on) {
setViewportMargins(0, 0, 0, m_status.height());
m_status.show();
} else {
setViewportMargins(0, 0, 0, 0);
m_status.hide();
}
}
void update_status_geometry ()
{
/*
* Calculate initial geometry of the QStatusBar based on its size hint.
*/
auto s = m_status.sizeHint();
s.rwidth() = width();
QRect geom(QPoint(0, 0), s);
geom.moveTop(height() - s.height());
/*
* Adjust the status bar geometry to allow for the scroll bars.
*/
if (horizontalScrollBar()->isVisible())
geom.moveTop(geom.top() - horizontalScrollBar()->height());
if (verticalScrollBar()->isVisible())
geom.setRight(geom.right() - verticalScrollBar()->width());
m_status.setGeometry(geom);
}
QStatusBar m_status;
};
}
int
main (int argc, char **argv)
{
QApplication app(argc, argv);
text_edit te;
te.show();
return app.exec();
}
Running the code above results in the following widget...

How to maintain default background color of each items inside Qt group box?

When I changed the background color of Qt group box so combobox background color is also changed. Which is inside the group box. I want default color of combobox so this is why i am not changing the bg-color of combobox. Please tell me how can I change the background color of Qt group box without changing default bg-color of inside items. I changed the background of QT group box using style sheet in qt designer (ui). I am beginner please help.
you should follow these steps :
set specific names for your objects :
select parent object and add a stylesheet to the parent like this :
this is the Stylesheet :
QGroupBox#gBox1
{
background-color: rgb(138, 226, 52);
}
first, you should set which kind of class you want like QGroupBox, and for set style, to the specific object you call its object name after #.
out put :
Simple project with styles
#include <QtCore>
#include <QtGui>
#include <QtWidgets>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QGroupBox GroupBox;
GroupBox.setMinimumSize(QSize(400, 400));
GroupBox.setStyleSheet("QGroupBox {background-color: green}");
QComboBox Combo1, Combo2;
Combo1.setStyleSheet("QComboBox {background-color: yellow}");
Combo2.setStyleSheet("QComboBox {background-color: red}");
Combo1.addItem("Test1");
Combo1.addItem("Test2");
Combo2.addItem("Test3");
Combo2.addItem("Test4");
QVBoxLayout vbox;
vbox.addWidget(&Combo1);
vbox.addWidget(&Combo2);
GroupBox.setLayout(&vbox);
GroupBox.show();
return a.exec();
}
also you can change object name 'setObjectName(const QString &)' function and then style different objects using there names
Combo1.setObjectName("TestObject");
Combo1.setStyleSheet("QComboBox#TestObject {background-color: yellow}");

Problems while using gtk+3 and Css

I am using C language to create a GUI with GTK+3 and I want to make the style of the app with CSS. The problem is that the widget doesn't accept the style that I gave to them, unless I use the * selector in my CSS file. At first time I try to make a single CSS file for all the app using gtk_style_context_add_provider_for_screen() but that didn't work. So I tried to set the style widget by widget using a function :
void SetStyleWidget (GtkCssProvider *CssProvider, char *Path, GtkWidget *Widget)
{
gtk_css_provider_load_from_path (CssProvider, Path, NULL);
gtk_style_context_add_provider (gtk_widget_get_style_context(Widget), GTK_STYLE_PROVIDER(CssProvider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
gtk_style_context_save (gtk_widget_get_style_context(Widget));
}
This don't work either. I also see that it could be a priority problem but no matter what priority I add it doesn't work. Do someone got an answer to my problem?
Here's my c file and my css :
#include <stdlib.h>
#include <gtk/gtk.h>
#include <gmodule.h>
#include <gdk-pixbuf/gdk-pixbuf.h>
#include "RandFuncGTK.h"
int main(int argc, char **argv)
{
GtkWidget *pWindow;
GtkWidget *pBoxLevel0;
GtkWidget *pTitreImg;
GtkWidget *pBoiteTitreImage;
GtkWidget *pLabTest;
GtkCssProvider *CssProvider;
gtk_init(&argc, &argv);
CssProvider = gtk_css_provider_new ();
pWindow = CreateWindow(pWindow, "Test", 1000, 1000);
pBoxLevel0 = gtk_box_new(GTK_ORIENTATION_VERTICAL, 100);
gtk_container_add(GTK_CONTAINER(pWindow), pBoxLevel0);
pLabTest = gtk_label_new("Test");
SetStyleWidget(CssProvider, "css/labstyle.css", pLabTest);
gtk_container_add(GTK_CONTAINER(pBoxLevel0), pLabTest);
gtk_widget_show_all(pWindow);
g_signal_connect(G_OBJECT(pWindow), "destroy", G_CALLBACK(gtk_main_quit), NULL);
gtk_main();
return EXIT_SUCCESS;
}
Here's my css file
GtkLabel {
color: blue;
}
GTK stopped using widget type names as CSS node names in version 3.18 or so, and from then on, you have to check the C class documentation to see what node names, classes, and so on are available to theme. In this case, it would be
label { [...] }
I also recommend loading the StyleContext to the Display, not individual widgets. So, basically, use a modern version of GTK (ideally latest point 3.24.x, but at least 3.22) and the documented CSS selectors, and you're good to go.
Once doing that, if you only want to affect individual widgets, then just add CSS classes to them and select on those classes:
gtk_style_context_add_class(my_label_style_context, "the-precious");
and then select in CSS on
label.the-precious { [...] }
or just
.the-precious { [...] }
A fuller example is available in this other answer.
That is better than adding StyleContexts to individual widgets because doing that tends not to work how users expect (in terms of inheritance and such).
You can also set CSS IDs on widgets (like #the-precious), but that is less often used and IMO not really needed in GTK and more of a faff to set up IMO.
Note that the default GTK theme, Adwaita, was refreshed during 3.24 - so if you want to theme your application against that, it's best to do so from the latest available version of 3.24 - and hope it doesn't change again in 3.x...

Styled top-level QPushButton widget does not render properly

I've successfully made a QPushButton the top-level widget/window of an application and am attempting to style the button like so:
#include <QPushButton>
#include <QApplication>
class MyButton : public QPushButton
{
public:
MyButton() : QPushButton( "Button" )
{
setFixedSize( 250 , 65 );
setStyleSheet( "border-radius: 10px;" ); // style
}
};
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MyButton b;
b.setWindowFlags( Qt::FramelessWindowHint | Qt::CustomizeWindowHint | Qt::WindowStaysOnTopHint );
b.setAttribute(Qt::WA_TranslucentBackground); // Fixes opaque BG
b.show();
return a.exec();
}
Unfortunately, as the following image shows, the button is no longer rendered properly when the style is applied. I'd appreciate help getting the button to render the style properly.
Edit
Following Kuber Obas answer, I'd appreciate help styling the edges of the widget, i.e. those that are outside the rounded corner, to transparent as shown below
In most native styles, the border is drawn with the rest of the button using native functionality and its elements cannot be replaced one-by-one. Once you introduce your own styling, the monolithic native styling is gone. So, you'll need to replace all of the functionality provided by the native style, including the border, the background gradient, etc. You will need to tweak it to "match" native style if you so need.
Here, you need to redefine the border completely: at the minimum provide the pen (border:). The radius only makes sense with the pen. You also need to redefine the background, if you care for one, redefine all of the button's state selectors, etc. You start with an unstyled button!
The screenshot below demonstrates it well. On the left you have a Mac-styled native button, on the right you have a button with just its border defined anew. It's obvious that the default state background should also be adjusted to match that of the platform in this case, and some margin needs to be added.
Qt doesn't really re-do modern native styles entirely from scratch, that's why you can't tweak their individual elements. It'd be too much work and a constantly moving target. It used to be done for the old Windows-95/NT style. Starting with the XP style, it was decided to let the platform APIs provide the visual style bitmaps. Similar thing presumably happens on OS X. That's also the reason why you can't use the fancier XP/Aqua/Mac Qt styles outside of their native platform: the relevant native APIs are not present and thus the style is disabled.
// https://github.com/KubaO/stackoverflown/tree/master/questions/styledbutton-20642553
#include <QPushButton>
#include <QHBoxLayout>
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a{argc, argv};
QWidget w;
QHBoxLayout layout{&w};
QPushButton button1{"Default"};
button1.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Maximum);
layout.addWidget(&button1);
QPushButton button2{"Styled"};
button2.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
button2.setStyleSheet(
"* { border: 2px solid #8f8f91; border-radius: 12px; background-color: #d02020; }"
"*:pressed { background-color: #f6f7fa; }");
layout.addWidget(&button2);
auto pal = w.palette();
pal.setBrush(QPalette::Background, Qt::darkBlue);
w.setPalette(pal);
w.show();
return a.exec();
}

QTextBrowser - how to identify image from mouse click position

I'm using a QTextBrowser to display rich text including a number of images, each of them specified with a HTML <img> tag and added as resources using QTextDocument::addResource().
What I'd like to be able to do is, in a context menu handler (i.e. with a mouse click position available), identify the image that the click was over. It's possible to tell whether the click is over an image, because cursorForPosition(event->pos()).block().text() returns a string starting with Unicode 0xFFFC. Unfortunately the same string is returned for every image in the view.
It's possible to get all of the formats in use with QTextDocument::allFormats(), identify which of those are image formats, and get their image resource name. Unfortunately there seems to be no way to get their actual display position or bounding rectangle.
From the documentation:
Inline images are represented by an object replacement character (0xFFFC in Unicode) which has an associated QTextImageFormat. The image format specifies a name with setName() that is used to locate the image.
You can use charFormat().toImageFormat().name() on the cursor to extract the image's URL. Below is a self-contained example. There are two noteworthy details:
The cursor will sometimes point one character prior to the image. Thus the workaround; it seems necessary for both Qt 4.8.5 and 5.1.1.
The pop-up menus should be shown asynchronously so as not to block the rest of the application. The example code provided in the documentation is a source of bad user experience and should be considered an evil abomination. All widgets can automatically delete themselves when they get closed, so the menus won't leak. A QPointer is used only to demonstrate this fact. It tracks the menu's lifetime and nulls itself when the menu deletes itself.
#include <QApplication>
#include <QTextBrowser>
#include <QImage>
#include <QPainter>
#include <QMenu>
#include <QContextMenuEvent>
#include <QTextBlock>
#include <QPointer>
#include <QDebug>
class Browser : public QTextBrowser
{
QPointer<QMenu> m_menu;
protected:
void contextMenuEvent(QContextMenuEvent *ev) {
Q_ASSERT(m_menu.isNull()); // make sure the menus aren't leaking
m_menu = createStandardContextMenu();
QTextCursor cur = cursorForPosition(ev->pos());
QTextCharFormat fmt = cur.charFormat();
qDebug() << "position in block" << cur.positionInBlock()
<< "object type" << cur.charFormat().objectType();
if (fmt.objectType() == QTextFormat::NoObject) {
// workaround, sometimes the cursor will point one object to the left of the image
cur.movePosition(QTextCursor::NextCharacter);
fmt = cur.charFormat();
}
if (fmt.isImageFormat()) {
QTextImageFormat ifmt = fmt.toImageFormat();
m_menu->addAction(QString("Image URL: %1").arg(ifmt.name()));
}
m_menu->move(ev->globalPos());
m_menu->setAttribute(Qt::WA_DeleteOnClose); // the menu won't leak
m_menu->show(); // show the menu asynchronously so as not to block the application
}
};
void addImage(QTextDocument * doc, const QString & url) {
QImage img(100, 100, QImage::Format_ARGB32_Premultiplied);
img.fill(Qt::white);
QPainter p(&img);
p.drawRect(0, 0, 99, 99);
p.drawText(img.rect(), url);
doc->addResource(QTextDocument::ImageResource, QUrl(url), img);
}
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QTextDocument doc;
Browser browser;
doc.setHtml("<img src=\"data://image1\"/><br/><img src=\"data://image2\"/>");
addImage(&doc, "data://image1");
addImage(&doc, "data://image2");
browser.show();
browser.setDocument(&doc);
return a.exec();
}

Resources