I have a Flex Spark Button that I've changed the background to a dark color using
s|Button {
color: #66ffff;
chromeColor: #333333;
}
The problem is that when the button is disabled, it's very hard to read (the text color and background color are very close). I've tried setting the disabled color to something lighter
s|Button:disabled {
color: #ffffff;
}
But the disabled text's color is not #ffffff. It's some combination of the text color and the background. Is there someway to disable this behavior (ie, specify the exact disabled state's text color)?
You are battling with the default skin of the button. If you were to create a new button skin based on ButtonSkin, you would see that the alpha for the entire skin is set: alpha.disabled="0.5".
Setting the value to 1.0 solves your problem, but it seems overkill to define this entire skin just to modify this single value.
Hopefully, there is a more elegant way. I tried setting alpha: 1.0; in the disabled style, but it doesn't take. The only thing I have been able to do is create a new button style, set alpha.disabled="1.0" and telling the button to use that slightly modified style.
You can create 2 .css files, one for the standard view and one for the "disabled" view and set your own button properties. Write a function which changes the .css file to use.
Related
I am new to Angular using Angular 8 - I want to change the mat-form-field outline color from black to grey when the control is set to read-only (similar to when I field is disabled) - fields are set to read-only dynamically - I have found snippets of code that partially do what I need but nothing that works entirely
The following snippet will set the background color for read-only controls however I want to set the outline color:
input[readonly], input:read-only {background-color: red!important;}
The following snippet will set the outline color like I would like however it sets for all controls:
.mat-form-field-appearance-outline .mat-form-field-outline (color: red!important;}
I already have attributes set for .mat-form-field-appearance-outline .mat-form-field-outline in my style sheet that sets the default look and field for all controls so I either need to have an additional entry for .mat-form-field-appearance-outline .mat-form-field-outline that is combined with the read-only entry or I need to modify the existing entry so that is takes into account fields that are read-only
please excuse any misuse of terminology
I am currently styling my App with the css plugin for codename one and I cannot figure out why the default look of the Button is different for android and IOS.
In IOS it looks like this:
In Android it looks like this:
It should look like it does in IOS for all devices.
In the Css file, I have this entry for Button:
Button {
cn1-derive: Button;
background-color: #005EA8;
color: white;
}
Button.unselected {
cn1-derive: Button.unselected;
background-color: #005EA8;
color: white;
}
Button.pressed {
cn1-derive: Button.pressed;
background-color: white;
color: #005EA8;
}
Its not just the Login Button that should look like this, but All buttons. None of the Buttons looks like they should on Android, but all look like it in IOS.
In Addition, as you might notice, the look changes on click. In IOS this works as expected, In Android the text color changes on click to #0005ea8, but the background is still this grey.
What am I missing here?
This is one of the ugly parts of CSS meets CN1 themes. The problem is that your CSS theme is being applied over top of the CN1 native theme. Any properties that you set on Button will override whatever those properties were in the native theme, but there are other properties of Button from the native theme that you are not overriding.
Further, CN1 styles offer three ways to set the "background" of the component. In ascending order of priority, they are:
Background color
Background (image)
Border (9-piece borders effectively set the entire background).
If you apply two of these in the same style, then the one lower on the list (higher in number) will take priority. E.g. if you set both the background color and a 9-piece border, then you won't see the background color at all - you'll just see the 9-piece border.
So what is happening here is that you've set the background color for your button in CSS, but the native theme likely set a background image, or a 9-piece border on the Button style which is still overriding your settings.
There are a couple of solutions to your problem:
Solution 1: Override the other "background" properties
Set border: none (to ensure that you override any 9-piece border) (or set border to something). And specify the cn1-background-type: none to ensure that there isn't an image background being applied to it:
Button {
background-color: #005EA8;
color: white;
border: none;
cn1-background-type: none;
}
NOTE: You also don't need to specify cn1-derive: Button because your style name actually is Button.
Solution 2: Create your Own Button classes from the ground up
If you don't want the baggage of the native theme, just create your own style, and set it exactly how you want.
e.g.
MyButton {
...
}
And in your Java code:
btn.setUIID("MyButton");
I have a JavaFX button that has been set as Default Button so the user can select it with the Enter key. Currently, it has a blue background:
But I'd like to make it look like a normal button:
I took a look at the JavaFX CSS Guide and it looks like there's only one feature to override (-fx-base).
But changing this feature has unpredictable effects—sometimes it eliminates the button's gradient; sometimes it makes the button transparent.
Is there a simple way to just get rid of the Default Button styling?
My guess is that you are looking in the wrong style sheet. The old default style sheet caspian.css was replaced with modena.css. So setting default value for -fx-base from modena.css should fix the issue:
.button:default {
-fx-base: #ececec;
}
Simply put, I have a JavaFX Textfield that I wish to 1) change the text color on, and 2) change it back to that specified in CSS. Does anyone know how to (generally) access css colors etc. from within the JavaFX code?
AnyFxElement.setStyle(String elementCss);
For source of all the css capabilities I reccomend looking up caspian css.
To remove a style use the code:
// remove the background color on the button
yourElement.setStyle(null);
To set it back to it's default style:
// set the button style back to the default class
yourElement.setStyle(".yourStyle");
I'm trying to create a QPushButton that's just got an icon and a constant background color.
So that I can swap out the icon when the user clicks it, without any other apparent effects (this is for a roll-up/roll-down feature). I've added an entry like this to my stylesheet:
QPushButton.ToggleButton {
background-color: #8af;
}
and set the button's class to match, and this does indeed give me the look I want, except that when I click on it the background color changes to a lighter blue, which I don't want. What am I missing?
Edit: I guess I should mention I'm using Qt 4.5 and PyQt 4.6 to do this...
I know people like using stylesheets, but in this situation I think it is just as easy to make a custom button. Define a class that inherits from QAbstractButton, and override the paint() method. In the paint method, fill the rect with your desired background color, and then paint the current icon on top. It might be slightly more complicated if you want the border around the button as well, but not a lot.
Alternately, you could also look at the roles for QPalette, specifically QPalette::Light and QPalette::Midlight, which might be used to adjust the color of the button when pressed.
Answer
Try giving the button an ID with QObject::setObjectName and then applying the style with #idSelector?
In Python the code would probably look something like this:
button = QPushButton(self)
button.setObjectName("ToggleButton")
and stylesheet like this:
#ToggleButton:pressed {
background-color: #8af;
}
Further reading
The QFriendFeed example application at Forum Nokia is using Qt style sheets heavily to customize the UI.
I'm guessing doing background-color: #8af !important; would be too obvious so I'm assuming that doesn't work. It's worth a try if you haven't done it yet.
Otherwise, as noted in this question, there are specific states you can style. Try setting the same background color for the pressed state:
QPushButton.ToggleButton:pressed { background-color: #8af; }
Sorry if I misunderstood. Hope that helps.
open the button's stylesheet in Qt designer and try this:
QPushButton:pressed {
image: url(/path/to/your/file/fileName.png);
}