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.
Related
When dragging an event on the calendar there's a light blue-ish color that appears, I think it's .fc-highlight class that determines the color but trying to override it with css doesn't seem to work, neither does there appear to be any draggable callbacks I can use to change it
The CSS property is set in the fullCalendar CSS file using background, rather than background-color so you need to use that to override it:
.fc-highlight
{
background: red;
}
See demo at: http://jsfiddle.net/sbxpv25p/948/
I'm using a button with bootstrap, something like:
I want to disable the style change when the button is hovered or click. I figured I could do this by overriding btn-default:focus or btn:focus but I also have other <a> tags styled as buttons that I would like to keep the effects of click or focus. Is there a way that I could just override the standard bootstrap css in just this case?
add an id to this particular
then add this css
#overrideBS:focus {
//whatever unique properties you want
}
Add your own class myclass, then set myclass:focus with whatever changes your need adding !important at the end of the overridden value.
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/
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
In richfaces for inplace input component <rich:inplaceInput defaultLabel="click to edit"> there is a defaultLabel attribute(show default text if is no ouput) i want set color text for it, i trying to set with style="" but dont know how to do it.
e.g for value="" i can set it via style="margin-left:80;background-color:#fff...etc but for this defaultlabel i cant set it, may i use styleClass and there i defined color text for default Text?
if is somebody who is familiar with css for advanced styling or knows use it in jsf,please let me post i'll be very grateful.
Cheers
Use styleClass for sure.
And in your CSS file define
.yourClass .rf-ii-dflt-lbl {
color: red;
}
.rf-ii-dflt-lbl is the RichFaces-generated class for the default label.
In case the above is not working add !important to the rule:
color: red !important;