I have been trying to change the background color to all the listview elements in my Kendo-ui mobile application without any luck, I have tried:
.km-list>li {
background: transparent;
}
.km-root .km-ios .km-list>li {
background: transparent;
}
.km-root .km-ios .km-content .km-list>li {
background: transparent;
}
I will appreciate any help!
Thanks!
Try using the Kendo UI Mobile ThemeBuilder, it may help.
Related
I am working on SPFx with React and I used a Kendo Panel Bar as given- https://www.telerik.com/kendo-react-ui/components/layout/panelbar/
I wanted to override the Panel Item's header CSS like this-
.k-panelbar>.k-item>.k-link {
color: black;
font-size:large;
font-weight: bolder;
background-color: pink;
}
This works fine while working on Stackblitz but not in my SPFx solution's module.scss file. What am I doing wrong?
What is the best way to change the background color of bootstrap-sweetalert ?
this is my code
.sweet-alert
{
background-color: #2f2f2f96;
}
$(".sweet-alert").css("background-color","#2f2f2f96");
update your sweetalert.css with your coding and hard refresh your web browser. It should work.
.sweet-alert {
background-color: #2f2f2f96;
...other codings...
}
I've been having difficulty changing the active colour of an icon in my tabpanel item in Sencha Touch 2.2. I've tried lots of variations of CSS and SASS but have not managed to change it. The CSS I have tried:
.x-tabbar.x-docked-bottom .x-tab-active {
color: #000000;
background-color: #000000;
}
.x-tab-active {
background-color: #000000;
color: #000000;
}
I've also tried setting the active colour in SASS, but this doesn't seem to work either. The only bit of CSS that seems to have that blue in it is this bit:
.x-tabbar-light .x-tab-active .x-button-icon::before {
color: #1da2ff;
}
...but when I try setting that to black, nothing happens! Anyone have any ideas how I can change it??
EDIT: I tried the first suggestion changing the CSS to this:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #000000;
}
...but this is what I see:
Applying color: #1da2ff; to the :before pseudo-element is the right thing.
The reason why it doesn't work for you is that the rule get overridden by another one with a more specific selector:
.x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon:before {
color: #50b7ff;
}
This is the exact situation where using !important is appropriate and not shameful:
.x-button-icon:before {
color: #1da2ff !important;
}
You have the right idea by selecting the icon, which is a span, and not the wrap, which is a div.
The div wrap .x-tab-active has a background color that decides the background of the active box. The icon has an image mask so background color or background-image gradient will determine the color of the icon. There is an additional span that wraps the text, like "x-button-label, for which a color style will change its color.
For changing the color of the icon try:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #1da2ff;
}
Thanks a lot, it was enough to add this in my CSS:
.x-tabbar-light.x-docked-bottom .x-tab-active .x-button-icon:before {
color : #000;
}
There was no need to add !important for me as I was using the new base theme for ST 2.2, but your solution worked great!
:-)
hi i have been trying for hours to get the image links inside the slider to work in IE 9 they work fine in Chrome can any one help
Yes, This is well-known and documented. I found your question with the same problem, this fixed it for me:
.nivoSlider a {
border:0;
display:block;
background-color: #fff;
filter:alpha(opacity=0);
opacity: 0;
-webkit-opacity:0;
-moz-opacity:0;
-khtml-opacity:0;
}
I am using kendo ui dropdown list and some other pickers. I want to style the selected item background color.
I had tried .k-dropdown .k-state-selected{ background-color: red} but the color of selected item is not changing. It is set to default orange only. But the same code is working for grid and list view.
How can i able to do that.
Regards,
Sri
The following CSS should work for date(time)picker and the dropdownlist:
.k-widget .k-state-selected,
.k-list .k-state-selected
{
background: red;
}
Here is a live demo: http://jsbin.com/efozol/5/edit
KendoUI defines background not just as a background-color: XYZ; but using background-image: none, -webkit-linear-gradient(top, #ffc0cb 0px, #ffc0cb 100%); too
So, start overwriting this definition saying background-image: none;