There are two QTreeViews in the screenshot below. For the one on the right, I've add a css customization:
setStyleSheet(
"background-color: #EAF5FF;"
"alternate-background-color: #D5EAFF;"
);
Notice however, the scrollbar appearance has changed. It went to the "windows" style, not the "windowsxp" style (which is the default, since I'm developing under Xp).
How can I use the above style settings without changing the scrollbar appearance?
I'm using QT 4.5 and Windows XP.
Do you need one of the abilities the css customization gives you, beyond what you can do directly? For changing the colors, you can do that directly with the palette of the widget, which should preserve your style.
Also, remember that style changes are inherited, so if any widget containing the tree on the right has a different style than any one containing the tree on the left, that may cause the changes as well.
Beyond that, I would think that this appears to be a Qt bug, if indeed the only difference is the css style sheet.
The advice of going the QPalette route worked out. Here is the solution:
#if 0 // this causes the problem
setStyleSheet(
"background-color: #EAF5FF;"
"alternate-background-color: #D5EAFF;"
);
#else // this works correctly
QPalette p = palette();
p.setColor(QPalette::Base, QColor(qRgb(0xEA, 0xF5, 0xFF)));
p.setColor(QPalette::AlternateBase, QColor(qRgb(0xD5, 0xEA, 0xFF)));
setPalette(p);
#endif
Both methods should work according to the docs, so I'd say its a Qt bug.
Edit: After working with this new method over the past few days, I've noticed there may be a performance improvement also.
Related
I am working with a freelance client on the side that wants to utilize Angular Material throughout the project. However, they do not like the way that the underline looks in the angular material input. I have tried a variety of approaches to change this, but I haven't found any success yet.
To be honest, I haven't even been able to find the tag in the DOM that would let me alter that border.
Here are the Angular Material docs, as you can see all of the available options have at least some form of a bottom border.
Some approaches I've tried:
This one is from the old angular material and no longer works for the new angular material
The accepted answer here is for the new angular material, but I was not able to get it to work. I implemented exactly as described and no styling changed.
This approach looked like it would work. Unfortunately, I could not get it to work either.
Any help or input on this topic would be appreciated.
For reference, the client said that any changes that deviated from the desired design would be denied. So I have to get this to work. I believe I could maybe, possibly lobby to build a custom input component as a solution, but I know that they are dead set on Angular Material.
Edit. Added a pic of desired look:
this little code did it for me. I didn't want to display it and just set height and width to 0.
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
However I think its kinda hard to style the Angular Material Components and for me its sometimes better to built my own.
First of all, you'll need a .scss to be imported either within the default theme.scss or after the import of the material stylesheet in main.scss.
Now, Material offers you the option of customising colours and some of the styles by overriding their #mixins found somewhere in the Material folder ( I don't have the folder in front of me.. very sorry for the vague pointing... ).
Back to the newly added file; You can override material's default styling by checking the DOM for certain classes and then adding them in said file with the desired changes. Because the file is loaded after Material's, the default styling in overridden. Same thing applies for the #mixin you chose to override. Just have a look in the file, copy-paste the whole #mixin and change accordingly.
Now if you wish to go even further, my colleagues and I have a custom library that uses Material BUT the whole styling is stripped off leaving you with the bear input within the mat-form-group and then using a <input disabled/> with a position:absolute over it. That way you get to benefit from material without using their style.
I've just started my adventure with Qt. After installation of QtCreator 3.6.0, the project compiled without any problems, but when I try to change PushButton colour through GUI (palette), nothing happens.
Similarly, when I substitute my own class for just added to work place (containers) widget, there's no file to swap in options. Where's the problem?
You can use CSS styles. Add the following CSS style to styleSheet of your button.
QPushButton{
background-color:yellow
}
Click on the styleSheet property button (...). Then select a menu item "Add gradient/background-color". You can try default cover or create another one.
More detailed info here http://doc.qt.io/qt-4.8/style-reference.html
#Domino Jachas, Warning: Some styles do not use the palette for all drawing, for instance, if they make use of native theme engines, according to the Qt Docs.
QPalette palette = ui->pushButton->palette();
palette.setColor(QPalette::ButtonText, Qt::red); // It's ok
palette.setColor(QPalette::Button, Qt::yellow); // but, not ok. Use theme.
ui->pushButton->setPalette(palette);
I've read the documentation thoroughly and searched the familiar domains like google and stackoverflow for quite some time now. Unfortunately all this without any solutions to be found. So I'm hoping that someone out here might be my savior..
The Situation:
What I am using: PyQt4, Python 2.6, Windows 7
I'm trying to style a QLabel (using a CSS file which I import in my program). The QLabel is in a QListWidgetItem.
So the structure I have is as follows:
QListWidget
+QListWidgetItem
+QLabel
So according to the documentation the way to access the QLabel would be as follows. No problem here.
QListWidget::item QLabel
{
background-color:#000
}
The Problem:
However, I would like the QLabel styling to ONLY change when I hover the QListWidgetItem. Using the following code, the pseudo-state just gets ignored for some reason. The background-color thus gets applied to the QLabels, but it isn't respecting the pseudo state.
QListWidget::item:hover QLabel
{
background-color:#000
}
This situation persists when I run my application stand-alone.
What isn't the solution:
Setting the QLabel pseudo-state to hover won't work because the QListWidgetItem is taller than the QLabel.
Main Question:
Is there a way to change the style properties of the QLabel when, and only when, the QListWidgetItem is hovered and how can this be achieved?
The goal here is to do it ONLY through the css (or qss if you prefer), which is a separate file that gets imported into the program.
Sources:
qss documentation: http://doc.qt.digia.com/4.6/stylesheet-syntax.html
You can't do this at least in Qt 4.7 (did not tested Qt5)
here is good explanation: How to set color of child QLabels while hover parent QFrame with QSS?
it seems that Qt css does not support pseudo-states for descendant elements but original CSS does:
http://codepen.io/anon/pen/olwHs
You should write some code to support such style. Use Enter/LeaveEvent to handle hover and then set style in your code via setStyleSheet()
You may also use dynamic property for that to leave styles in .ui
QLabel[hover="true"] {}
and then set and reset this value in code
Also you may use dynamic property for main widget
[hover="true"] QLabel {}
It's the red marked "navigator" I am talking about. I need to move them away so they don't mess up my design. I have tried to change a lot of different settings without no success.
Here is the View for it:
What should I do?
I am using the following themes: Pixture Reloaded 7.x-2.2 and AT Core 7.x-2.2
Modules: Calendar, chaos tools, views, date modules..
It is obvious some mix up in css. It is a large possibility that elements created by calender inherit some css properties.
Easy fix is to view the source code of he page. Using FireBug(for firefox) or some alternative will make it easier to find. You will find some css rules being applied to your menu. Just try to enable and disable some css rules and see what happens.
When you find mischief just write a css function with higher priority which would negate that other global rule.
I got the same problem and i solved just yesterday hacking some css. I share you here what i have done in my case that i think i will help you also or at least work around there.
First to fixing the big buttons of the calendar navigation you should look in your theme css files at some css class called "ul.pager li a" or "ul.pager li span" there must be a property like "display:block" that is causing this buttons see that way. i just commented that property and they look as normal them should be.
In my case the theme css file was "navigation.css" and this property inside that file is found at line 375. Maybe in yours could be similar, anyway you can check and find where is using the firebug extension for firefox inspecting that buttons.
Second for fix the position of this navigation buttons is something similar but in the css file of the calendar module itself, after modifying the core css file of the module i recommend you to override it placing a copy of it in your template css folder and declaring it on the .info file of the template. In my case the file was calendar_multiday.css, in the line 778 and 818 there are the classes ".view .date-nav-wrapper .date-prev" and ".view .date-nav-wrapper .date-next" inside them with the property "right" and "left" i controlled the positions where must be this buttons.
This is the work around on how i solved it, hope this works for you also but if not anyway the problem is close there.
I have about 40 buttons that are also indicators (On or Off) and once a second I refresh the color of these indicators depending on the state. I do this by changing the stylesheet. Is it over kill to do this and if so should I only set a new stylesheet when it the indicator has changed state or should I use something like QBrush?
Do not dynamically set complete stylesheets. Instead, define an application wide stylesheet using dynamic stylesheet that you parse once at application startup. Then, in the stylesheet, define dynamic stylesheet properties as detailed in the documentation:
There are many situations where we need to present a form that has mandatory fields. To indicate to the user that the field is mandatory, one effective (albeit esthetically dubious) solution is to use yellow as the background color for those fields. It turns out this is very easy to implement using Qt Style Sheets. First, we would use the following application-wide style sheet:
*[mandatoryField="true"] { background-color: yellow }
In your case, you could probably do something like this:
QPushButton[state="on"] {
background-color: green;
}
QPushButton[state="off"] {
background-color: red;
}
Then update the button 'state' property:
pushButton->setProperty("state", "on");
pushButton->setStyle(QApplication::style());
Unfortunately, for Qt 4.6 you will need to force a recomputation of the stylesheet by resetting the style of the widget, hence the setStyle() call.
Using dynamic stylesheets in this way is very fast. I am working on an application that makes heavy use of dynamic stylesheet properties and have not noticed any performance degredation.
Yes. I found that with Qt 4.6.2 on Linux, setting a stylesheet to change the colour of the text on a QLabel is very slow.
The dynamic stylesheet looked like a great solution but for me, the necessary setStyle() was just as expensive as setStyleSheet()!
After much experimentation, I found this alternative to be at least twice as quick, and usually more than 50 times as quick:
QPalette palette = lbl->palette();
palette.setColor(QPalette::WindowText, Qt::gray);
lbl->setPalette(palette);
Depending on how your (static) stylesheet is set up, you'd have to replace QPalette::WindowText with QPalette::Window or QPalette::Button. See the QPalette documentation for details.
In my experience stylesheets consume too much resources, better to avoid them if you can.