Changing fc-highlight when dragging events on calendar - css

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/

Related

FullCalendar.js - How Do You Style the Monthly Forward and Back Buttons?

I have an instance of FullCalendar that looks like:
How do I style the back and forward buttons on the calendar here?
The key was to change both the background color and the background image of the buttons if you want to change the color of the buttons:
.fc-right .fc-prev-button, .fc-right .fc-next-button{
background-color: #b1d583;
background-image: none;
}
If you inspect the forward and back buttons FullCalendar gives them classes by default. On mine there is fc-prev-button and fc-next-button respectively. You can just target these with js after the calendar is loaded to style them.

Codename one: Why does the android button have a different appearance than the IOS button

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");

Make Default Buttons Look Like Normal Buttons

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;
}

Change background of Input

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/

Change Color of RadComboBox

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.

Resources