I'm trying to implement a complex UI in QT with a lot of customization.
This is what I'm trying to achieve (photoshop file)
This is my current screen, I just discovered that the original CSS sheet which was developed by someone had a global color setting for Qwidget, this color is being rendered in a lot of widgets, but the problem is that it's overiding the Scroll, which prevents me from changing the color on the left side (please see the blue dot)
The code for this is:
QWidget {
background-color: #1a1d21; /* software canvas background color */
border: 0px solid black;
}
QScrollArea {
background-color: #262a30;
border: 1px solid black;
}
I tried removing the color code in the CSS for QWidget which effected Qscrollarea and the color chosen was properly rendered, but some problems came up:
It removed color for a lot of widgets that I had and now it's all white, now I will have to specify individually which worries me, because it's not just time consuming considering the size of my application but also because it sometimes it doesn't work.
What also worries me is that I tried specifying background color to the specific widget and it didn't work, I've tried the placeholder object and class together and separated - QDockWidget / QDockWidget and also the real widget that is being called : QTabWidget / tabWidget. So I don't know whether it's because I'm doing something wrong in the code and not using still the correct object to change the color or if Qwidget is actually overriding the color (which makes me confused because I thought that child always overrides parent in CSS)
Note: I'm a designer and newbie in Qt and programming.
For every Qt widget you can provide an unique name. Then you can use that name to setup the desired widget style in the stylesheet (CSS)
If you're not using Qt Creator, widget name can be set using i.e. QWidget::setObjectName("scrollArea");
Related
I have a QHBoxLayout with several items in it. In the space occupied by the QHBoxLayout, I want a vertical gradient from black to white (behind the items in the QHBoxLayout). However:
QHBoxLayouts do not have style sheets, so that's out
QHBoxLayouts do not have palettes, so that's out
And these are the only two methods of setting gradients that I've found (they were all intended to work on widgets). I tried setting the stylesheet of the parent widget to include:
QHBoxLayout {
background-color: red;
}
to see if css could be worked in that way, but this does nothing.
Is it possible to give a layout a background gradient with Qt?
(I am using PyQt5, if that's relevant)
I'm not expert to PyQt, but in plain Qt you can put your QHBoxLayout inside a QWidget and then apply a layout to the widget (the buttons above the designer).
This is what the object tree looks like when done (the selected item has the gradient)
And this is how my little mock up came out. (If you like the buttons to be non-transparent, add a stylesheet for the background)
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'm trying to create vertical lines in a QTreeView; rather than painting over lines as suggested by some answers I am using a stylesheet to modify the right border of the cells in the treeview like so:
ui->tripsTreeView->setStyleSheet ("QTreeView::item:!last { border-right: 0.5px solid lightgray ;}");
Unfortunately this resets all other stylesheet properties on the treeview, making it unusable (white on white text, the expand triangle gets a blue background, custom background colours disappear, etc).
Questions:
Has someone managed to set a stylesheet for a single property in Qt?
Or found a way to extract the current applied stylesheet? I would then do a search-and-replace to add/set the proper border. Unfortunately ui->tripsTreeView->styleSheet() returns only an empty string (meaning it uses the deault stylesheet, but what the heck is the default stylesheet?)
When no stylesheet is set Qt uses a style which matches the style of the OS. When you try to change the stylesheet of even a single property the whole stylesheet of the control is replaced with a default one. I am not sure if the default stylesheet can be extracted. Probably a custom delegate with paint() function reimplemented can do the trick.
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.
I am using a Qstylesheet to control the behavior of some QPushButtons and QToolButtons. When I hover over them, they turn black, as I want them to. However, once I press them, they turn a funny greyish reddish color, and there is a red box drawn inside of them.
What is the property or pseudo state that I have to set in order to avoid this behavior? I have been through all the properties related to selection, and background, and cant get this to go away
Without seeing your style it's a little difficult to fix your problem. So what I'll do is explain a little how things work, and hopefully you can decide how best to address your problem.
First, it's important when your styling your button to ensure that you cover all your bases. I'm sure you know most of this, but just in case...
A QPushButton and QToolButton have a number of states that can be styled, so you want to make sure that you make your button noticeably different for each state so that the user can tell the difference.
QPushButton
{
// The default look of your button
}
QPushButton:disabled
{
}
QPushButton:pressed
{
}
QPushButton:focus
{
}
QPushButton:hover
{
}
QPushButton:checked
{
}
Use things like the background color, foreground color, border color, and generally you are good to go.
background-color: red;
color: white; // foreground color
border-width: 1px;
border-color: black;
The second thing to know is this, styles can be inherited. So be really careful when you add a style to a widget. When you create a style try to be specific. If you give this style to something in your UI, the background color will be blue, but the dangerous thing, is that all child widgets of this one will also inherit this style.
QWidget
{
background-color: blue;
}
Maybe that's what you want, but often not. So if you are styling buttons always put the QPushButton or QToolButton selector around them, the same should apply for other things you are styling too. So it's possible that's where your greyish reddish color is coming from.
Now, the last thing to know about styling buttons is the focus rectangle. It is the irritating dotted line that appears when your button has been focussed. See the picture below.
The unfortunate thing is that there is there is no way to style the focus rectangle using style sheets. But you can get rid of it, if that's what you want. See the following link:
Getting rid of the focus rectangle
So, in summary...
Make sure that your button style covers all the states that you
need.
Make sure that your button isn't influenced by any other
styles you have added to other widgets.
Either change, or get rid
of the focus rectangle as needed.
I hope that helps. If you want more specific help, then please post your style, and I'll take a look at it.