color of QPushButton or QToolButton - qt

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.

Related

Getting QTabWidget to lay flat

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.

How can I remove drop shadow from menu items?

Problem
I have a MenuItem that by default is initialized with drop shadow—which I’d rather not have. I’ve got a css file set up, but can’t seem to figure out what’s necessary to remove the drop shadow.
See how there's a rather ugly drop shadow down below that? I'd like the whole menu button to be flat, containing no borders nor shadows whatsoever.
The reason the background color of the various different elements in the image are red is due to my attempts in styling it differently—the background color does indeed work the way I’d expect it to.
What I’ve tried so far
.menu-item
{
-fx-effect: null;
-fx-drop-shadow: null;
}
Neither one of the properties seem to effect the outcome of my program.
I've also tried styling the menu, but that only appears to style the actual “Plugins” button.
Moreover
I can’t seem to think of any better solutions compared to those I’ve already tried. Perhaps someone can point me in the right direction?
Once again, I’m attempting to make the menu items look flat.
You need to add the effect to the context menu, e.g.
.menu-bar .context-menu {
-fx-effect: null;
}
BTW: There is no -fx-drop-shadow property.

Trying to fix the background image on label:checked

I'm trying to fix something another developer did on this site: http://alamodecreamery.com/products-page/accessories/girls-atom/
If you hover over the sizes a waffle icon appears, however when the item is checked (radio button) the background disappears. I need a label:checked background to show the waffle. I found the CSS selector on line 1150 of wpsc-default.css and added a label:active for testing which works fine (aqua on active).
Can anyone figure out why the :checked background isnt working? Ive tried a few different things which all failed to work:
label + input[type="radio"]:checked {
background:pink !important;
}
input[type="radio"]:checked {
background:pink !important;
}
.wpsc_variation_forms label:checked {background-color: green !important;}
Thanks in advance!
What you are attempting cannot work. You have a structure in which the radio input is contained inside the label. The label is sized to match the waffle, and on hover changes its background. When the radio button is checked, the input gets the :checked state, not the label! And in CSS, right now, it is regrettably not possible to select an element based on a descendant's state. As such, it is not possible with pure CSS to change the appearance of the label based on a pseudoclass of one of its contained elements.
I would recommend adding a bit of Javascript which toggles a class on the label when the radio button is toggled, would be the easiest fix.
Techy sidenote: there have been multiple proposals in the past for 'parent selectors', and all have been shot down by the browser developers because it was unfeasible from a performance perspective due to the way the DOM and CSS are matched up. Nowadays the engines are so efficient the discussion has been restarted, but still in very preliminary stage. Don't expect anything before CSS4 surfaces.
label:checked is invalid. checked is for inputs only.
Something like
wpsc_variation_forms label + input:checked
might work better

How to prevent the default blue border being drawn on QLineEdit focus

I am trying to achieve a borderless QLineEdit through CSS. It works fine when the QLineEdit is not in focus but when in focus the default blue border always comes up. The simple CSS I am using:
QLineEdit, QLineEdit:focus { border: none; }
I have tried with different background color through CSS for focus and not-in-focus, it works but I am unable to remove the blue border while in focus. Just to inform, I am working on a Mac.
You might get rid of the focus border by setting:
QLineEdit.setAttribute(Qt::WA_MacShowFocusRect, 0)
Read the documentation, there are plenty of other Mac specific settings
WidgetAttribute-enum
There is rather a similar question too
Refer this question
Maybe also like this way:
ui->treeView->setAttribute(Qt::WA_MacShowFocusRect, 0);
Reference: http://doc.qt.digia.com/4.6/demos-interview-main-cpp.html

(CSS?) Eliminating browser's 'selected' lines around a hyperlinked image?

The attached screenshot is from OS X/Firefox 3. Note that the center tab (an image) has a dotted line around it, apparently because it was the most-recently selected tab. Is there a way I can eliminate this dotted line in CSS or JavaScript? (Hmmm...the free image hosting service has reduced the size of the image. But if you could see it, you'd notice a dotted-line select area around the block.)
Screen Shot http://www.freeimagehosting.net/uploads/th.fadf78173b.png
You'll want to add the following line to your css:
a:active, a:focus { outline-style: none; -moz-outline-style:none; }
(Assuming your tabs are done using the a element, of course.)
[edit] On request from everyone else, for future viewers of this it should be noted that the outline is essential for keyboard-navigators as it designates where your selection is and, so, gives a hint to where your next 'tab' might go. Thus, it's inadvisable to remove this dotted-line selection. But it is still useful to know how you would do it, if you deem it necessary.
And as mentioned in a comment, if you are only dealing with FF > v1.5, feel free to leave out the -moz-outline-style:none;
In your onclick event, this.blur()
or, specifically set focus somewhere else.
For starters, try this
*,*:hover,*:focus,*:active { outline: 0px none; }
This will however decrease usability.
You'll want to selectively apply alternative effects where relevant to give people such as those whom navigate primarily with the TAB key have an idea of what currently has focus.
div.foo:active,
div.foo:focus,
div.foo:hover
{
/* Alternative Style */
}
You can start by looking at the :focus and :active pseudo classes, although you probably shouldn't be completely removing any formatting from these cases, since they are an invaluable usability aid.
using
*:focus {outline:0px;}
will remove styling for inputs and textareas when selected with the mouse. Make sure you append these styles with a border for these form items if you choose to remove all outlines on :focus.

Resources