Hi I'm trying to change the font color of my calendar footer like below. But it is not working. Can someone figure out what is the issue here? Except color remaining style are working like background, font etc.
#calendar.k-footer {
color: #ff0000;
font-family: cursive;
}
same thing is not working for selected date also
#calendar .k-state-selected{
color: #ff0000;
background: transparent;
}
Anything wrong in the above style?
You need to add a space between #calendar and .k-footer:
#calendar .k-footer a {
}
Here is a live demo:http://jsbin.com/akibeh/3/edit
Related
I would like to style the p-dialog's Close Icon. The default 'x' button is in grey color and I would like to change it to white color with font-size increased. I found that we could use .p-dialog-titlebar-close but haven't been successful. I used it in the following way-
::ng-deep .p-dialog .p-dialog-titlebar-close {
color: #fff;
font-size: 16px;
}
Please let me know how can I change the 'X' to show in white color. ( Since it currently is barely visible). Greatly appreciate any help. Thank you in advance.
Attaching the screenshot for detailed explanation.
I tested with the following and it works as expected:
:host ::ng-deep .p-dialog-header-close-icon {
color: red;
font-size: 2rem;
}
Am using PrimeReact DataTable in my React application.I have a requirement to change the background colour from white to grey in the DataTable..I tried custom style in the component. But not working..
Can you please help me?
If you want to override the style of the Datatable then use this css
.p-datatable-tbody tr {
background: gray !important;
}
or, in order to avoid !important
.p-datatable .p-datatable-tbody > tr {
background: gray
}
I want to use the primary color from the ant design theme. I believe the less tag is: #primary-color . How do I use this value for a custom div that I want the border color to match? Also this is with an app made by create-react-app.
I want to be able to do something like:
border: '2px solid #fff' // Instead of white, it uses the theme's primary color
In the very top of your .less file import Ant Design styles: #import '~antd/dist/antd.less';
And then you can use any antd color variable:
#import '~antd/dist/antd.less';
.box {
border: 2px solid #primary-color;
}
I am working with React-Js Application and using ChartistJs Library to show the Charts.
I am trying to change the color and Font of Lables in Bar Chart but unable to find any options to achieve that.
I think you can do something like this in your CSS file:
.ct-label {
color: red;
font-size: 15px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
I hope it helps.
For instance, there is a label (without textfield!):
Ext.create('Ext.form.Label', {
id: "lb1",
height: 20,
html: "Title"
cls: 'cls1'
})
How can I change the background color dynamically without a CSS?
There are couple of ways to achieve that, but all of them use manipulate CSS.
1. Change css class on label
CSS classes
.cls1 {
background-color: #fff;
}
.cls2 {
background-color: #ccc;
}
ExtJS
label.removeCls('cls1');
label.addCls('cls2');
2. Change style on DOM Element
label.getEl().setStyle('background', '#CCC');
Good Luck!