I start from this default theme (blucristal)
https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.InputAssisted/preview
Now I want change the background of the editable input from white to (for example) yellow. How Can I do?
I would like use Ui theme designer but I can't find the correct property to change
Any visual customization of standard controls can be done with help of CSS.
Redefine property of standard class
.sapMInputBaseInner{
background-color: yellow !important;
};
It will change background color for every intup. Or you can create your own CSS class
.UserClass .sapMInputBaseInner{
background-color: yellow !important;
};
And using method addStyleClass() add "UserClass" only to specific elements.
You may use CSS pseudo class for this purpose. Like this
form input[type=text]:focus{
background-color:red;
}
It will change the background-color of textbox from white to red whenever you click on it.
Here is the example http://jsfiddle.net/e284q9fv/
Related
I'd like to change the background color of PCManFM-Qt, the file manager of LxQt. I now a custom stylesheet can be used with the option -stylesheet. I found the program Gammaray, a program similar to gtk-inspector. After some trying I got something working with featherpad. The css code:
#centralWidget{ background-color: red; }
works, but I cannot make red the QTextEdit widget. I don't care about featherpad, because I'd like to change the background color of PCManFM-Qt.
Try QTextEdit { background-color: red; }, or similiar
Qt has to know the object to which apply CSS props.
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;
}
When I use Office2007-Skin for the Telerik-Controls, the RadComboBox would have in normal-mode a blue color:
I am searching for a way, that the RadComboBox looks like:
I want only change the blue color of the whole RadComboBox.
I cannot change the Skin, because it is used/necessary for other controls.
Can I change this via styling?
Add these styles to your custom css file:
div.RadComboBox .rcbReadOnly .rcbInputCellLeft,
div.RadComboBox .rcbFocused .rcbReadOnly .rcbInputCellLeft,
div.RadComboBox .rcbHovered .rcbReadOnly .rcbInputCellLeft
{
background-position: inherit;
}
It will override the default background of the combo input
You cannot change it via styling. If you like to change the colors of your control you should override the CSS in the style.
Here you can find the elements of the combobox.
Do not forget to add !important in your CSS lines code otherwhise it may not work.
I want to use a DialogBox within my GWT Application but it is transparent! What do i need to do ?
You can set the Style in your CSS to be not Transparent, the class shout be gwt-DialogBox.
.gwt-DialogBox {
background-color: #FFFFFF //White
}
Have you included a default gwt theme in your module?. Default gwt theme includes some default css-ing for certain widgets.
<inherits name="com.google.gwt.user.theme.standard.Standard"/>
Is it really transparent or are those fields that appear to be seen through it actually in the foreground? I.e. can you click those other fields?
Then it may have to do with the z-index of the dialog box. As a quick and dirty fix, try setting the z-index in the css file or with code like this:
mydialog.getElement().getStyle().setZIndex(1000);
Im trying to override the grey text of a disabled input and textarea. At the moment Im only really concerned with it working in Webkit and Mozilla. At the moment Im currently using every trick in the book that I know of:
input[#disabled=true], input[#disabled],
button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled],input[disabled="disabled"], input[disabled] {
color: black !important;
}
Sure it does change the colour if I change it to something else, however when I choose black it is still greyed out a bit.
Any ideas? I am using Ext JS if I can use that to manipulate it. Thanks.
input.button-control[disabled]
{
color: #cccccc !important;
}
Here button-control is a class on the input element, whose text is overriden to grey when the disabled attribute is set.
I hope this helps.
I would prefer to go the JavaScript way to achieve best browser compatibility. I would use the ExtJS [http://www.extjs.com/deploy/ext-1.1.1/docs/output/Ext.DomQuery.html][DomQuery] and insert the CSS rules by adding specific class or directly injecting them as style attribute values.