I'm new on Qt and I'm looking for some way to modify the form of a QPushButton, but I didn't find something on the web.
Is it possible and if so, how can I do this?
Thx
If you want to change how the QPushButton looks, you can use the Qt style sheets. If you want to put an image on the button, you can take advantage of the "background-image" property of the QPushButton
QPushButton
{
background-image: url("alpha.jpg");
}
You can change other properties like "border", "background-color", etc. Your question needs to be more specific as to what visual elements you need. Go through the documentation, it will help you.
One way to go about getting a different for the QPushButton is to make the necessary image available. Get the necessary image and make sure it has a transparent background. Use could use other attributes of QPushButton like, "background-color: transparent" and without any border - "border: none".
Hope it helps!
Related
I have an application which uses a QTreeWidget next to a QTabWidget. On the frame that contains the two and the QTreeWidget I can set the properties:
frameShape : NoFrame --and-- frameShadow : Plain
This gives a nice flat look. But the QTabWidget does not have these properties and it has a shadow and is raised.
How do I get the QTabWidget to look flat?
Picture is attached.
You can use stylesheet to customize the look of the border.
Using stylesheet often resets some of the default/native style like the background so you will need to define it explicitely depending on your needs.
QTabWidget::pane { border: none; } // No border at all
QTabWidget::pane { border: 1px solid black; } // Simple black border
See the examples.
Based on your question and screenshot, your QTreeWidget is not actually flat, it has an inset style, while the QTabWidget has an outset. It's not very clear what you want to achieve exactly. But I fully agree with #ypnos in the comments, you seem to need a QStackWidget and not a QTabWidget.
I also think you should probably keep the native style, which will change depending on the OS and the user preferences. If you want to customize the look and feel of your application you generally need to customize all of it and make something consistent, not just a widget that does not please you.
I have a problem when trying to change the color of QTabBar's top line (blue line in the picture below).
Is this a separate part of tabBar (like scroller or tear) or its top border ? And how can I change its color with styleSheet and leave the other parts of tabBar unchanged?
P.S. : My tabBar::styleSheet returns an empty string, so I can't get current style and make changes in it.
If you're using a "system" style, you may not be able to change the color of the line (cause representation of UI elements is not handled by Qt but by the system).
You should define a complete style for QTabBar (and maybe QTabWidget too) that you can customize as you wish.
See the Qt Style Sheets Examples page.
Problem solved:
setStyleSheet("QTabBar::tab:selected { selection-background-color: red; }");
I am developing an IM tool,as a part of it I have to develop a BubbleChatWidget on which all message items have a bubble-like background-image.I thought I could achieve my goal with QTextEidt,but I don't know how to give 'QTextFrame' or QTextBlock a background-image.
So my question is that how to give QTextFrame or QTextBlock a background-image in QTextEdit?If QTextEdit can't satisfy my demands, how to achieve my goal with other Qt techniques?
The BubbleChatWidget may contains clickable texts or pictures.And you can't forget the fact that the BubbleChatWidget may contains thousands of items.
The picture below displays what I want.
Qt Style Sheets are a perfect fit to achieve what you want.
The solution is to use a border image. Fortunately you can do that with style sheets and you can style QTextEdits.
About styling the QTextBlocks or QTextFrames: A QTextEdit is a widget that displays a QTextDocument which can contain QTextBlocks and QTextFrames. Frames and blocks are text containers that provide structure for the text in a document but they're not rendered by separate widgets. For that reason they can not be styled independently. What I recommend is to use a QTextEdit or other widget for each message and properly manage the consequent increase in memory use.
I'll expose how to style a text edit.
First, take a clean image of your desired border. With a little Photoshop I've prepared my own image (not as clean as it should for a production app):
Lets style objects of the class QTextEdit and its subclasses.
QTextEdit {
background-color: #eaedf2; /* Same gray in your background center */
border-image: url(":/images/bkg.png"); /* The border image */
border-top-width: 11px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 11px;
}
Setting the previous style sheet to the container of the text edits will turn all of them into this
Something quite similar to your desired look. Of course you have to prepare a good border image and better adjust the border dimensions but I think this could be of help.
If you want different styles for incoming and outgoing messages then you will have to
properly differentiate and select them in the style sheet. Check this for reference.
You need to modify Qt's source code for this.
I've done this last year.
You could set a background image (the bubble image ) for a frame.
If you r using Qt 4.8.6, locate qtextdocumentlayout.cpp, at line 402:
The default fill fillBackground implementation is
p->fillRect(rect, brush);
You could change to qDrawBorderPixmap instead to draw a bubble background.
You can use QBalloonTip which is an internal class defined in
QtDir/5.*/Src/qtbase/src/widgets/util/qsystemtrayicon_p.h
QBalloonTip inherits QWidget and it is implemented in qsystemtrayicon.cpp at the same directory. It has the following method to show a balloon tip:
void QBalloonTip::balloon(const QPoint& pos, int msecs, bool showArrow)
You can modify the source code of this class to have your desired balloon tip.
If you are interested in open source project that implements the same thing(I call it 'Bubble Chat'), you can search Telegram Desktop and Cutegram in Github.
They are both clients of Telegram or its variant implemented by Qt/Qml.
I think Cutegram is better.
Hope this tip will help you.
Is there a way to set a tool tip text for the close button & float button in a QDockWidget ?
As ixSci mentioned, using setTitleBarWidget() is a potential way of solving this problem. Having said that I was looking for a much simpler solution, ideally using QSS (Qt Style Sheets). So after digging into the source code of QDockWidget I found an alternative way which suits my requirement better.
I wanted to find the place these float and close buttons are created. That is inside QDockWidgetPrivate::init() method in QDockWidget.cpp.
As for an example, the float button is created like this:
QAbstractButton *button = new QDockWidgetTitleButton(q);
button->setObjectName(QLatin1String("qt_dockwidget_floatbutton"));
QObject::connect(button, SIGNAL(clicked()), q, SLOT(_q_toggleTopLevel()));
layout->setWidgetForRole(QDockWidgetLayout::FloatButton, button);
Now all I need is to use the flexibility of Qt Style Sheets, for that I need only the Object Name, in this case it's "qt_dockwidget_floatbutton"
So all you need to do, to set tooltips for Close and Float buttons of a QDockWidget, is to add following two lines of styles in your application style sheet
QAbstractButton#qt_dockwidget_closebutton{qproperty-toolTip: "Close";}
QAbstractButton#qt_dockwidget_floatbutton{qproperty-toolTip: "Restore";}
You can implement whatever title widget you want and set it with setTitleBarWidget(). In that widget you can add whatever buttons with tooltips you need.
I have a QToolbar which I have applied style to:
sMainWindowStyle += "QToolBar::handle { image: url(:/icons/toolbar_handle.png); }\n";
However as well as changing the toolbar's handle I want to change the expand arrow >>
I am unable to find a list of properties, so that I can look up what the toolbar expand arrow is. Does anybody know of a definitive list of style properties in Qt?
You can change the expand button with the following CSS.
QToolButton#qt_toolbar_ext_button
{
qproperty-icon: url(:/path/to/image.png);
}
Unfortunately the best way I know to find out which properties you can set, is to browse through the Qt source code. Some styles can even not support some properties, other styles do.