This question is locked. New answers and comments are not allowed.
I thought I would share how I managed to change the background colour of a Kendo UI app from the default beige to white. Simply setting a style on the body didn't work, and it took me a little investigation to find out a way (maybe not the best way, but it worked for me, and I couldn't see any other way, so....)
1. Open the file kendo/styles/kendo.mobile.all.min.css (BTW, Icenium, any chance of having the non minified version of this file available?)
2. Search for "km-scroll-container"
3. I think it's the first result that starts:
.km-scroll-container{-moz-user-select:none;-webkit-user-select:none;
4. Modify this so that it reads:
.km-scroll-container{background-color: white;-moz-user-select:none;-webkit-user-select:none;
5. Save the file and you're done.
Would be much easier if Kendo honoured a style on the body though....
If anyone knows of the correct way to achieve this, rather than the "hack" I've outlined, please do say, I'd rather do it correctly, but couldn't find any documentation nor assistance on these forums to point me in the direction.
Stewart
1. Open the file kendo/styles/kendo.mobile.all.min.css (BTW, Icenium, any chance of having the non minified version of this file available?)
2. Search for "km-scroll-container"
3. I think it's the first result that starts:
.km-scroll-container{-moz-user-select:none;-webkit-user-select:none;
4. Modify this so that it reads:
.km-scroll-container{background-color: white;-moz-user-select:none;-webkit-user-select:none;
5. Save the file and you're done.
Would be much easier if Kendo honoured a style on the body though....
If anyone knows of the correct way to achieve this, rather than the "hack" I've outlined, please do say, I'd rather do it correctly, but couldn't find any documentation nor assistance on these forums to point me in the direction.
Stewart
4 Answers, 1 is accepted
0
Hello Stewart,
The Kendo UI Mobile Theme Builder would be an easier way to accomplish such task and would give you the css that you need to apply the desired changes. Open it in Chrome and drag & drop a color to an element you want to style.
Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
The Kendo UI Mobile Theme Builder would be an easier way to accomplish such task and would give you the css that you need to apply the desired changes. Open it in Chrome and drag & drop a color to an element you want to style.
Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Stewart
Top achievements
Rank 1
Rank 1
answered on 23 Oct 2013, 11:10 AM
Thanks Steve, that's really useful!
Where did I miss that in the documentation? Could you tell me so I can check I've seen it all. Much appreciated.
Stewart
Where did I miss that in the documentation? Could you tell me so I can check I've seen it all. Much appreciated.
Stewart
0
Stewart
Top achievements
Rank 1
Rank 1
answered on 23 Oct 2013, 11:15 AM
Actually, I've just tried that and I am not clear about what I have to do with the output, could you assist?
I changed the background color on the iOS to white which give me an output of
.km-ios .km-view .km-content {
background-color: rgb(255, 255, 255);
}
However, where do I put that? I clearly cannot replace all of /kendo/styles/kendo.mobile.all.min.css with these 3 lines as that file contains a lot more CSS! I tried appending these 3 lines to the min.css file, but it had no effect.
Thanks,
Stewart
I changed the background color on the iOS to white which give me an output of
.km-ios .km-view .km-content {
background-color: rgb(255, 255, 255);
}
However, where do I put that? I clearly cannot replace all of /kendo/styles/kendo.mobile.all.min.css with these 3 lines as that file contains a lot more CSS! I tried appending these 3 lines to the min.css file, but it had no effect.
Thanks,
Stewart
0
Accepted
Hi Stewart,
Icenium docs do not contain such information and you should look at Kendo UI site and docs. The Theme Builder is part of the Kendo UI demos (last tab) which open the one for Kendo UI Web. From there you can navigate to the Mobile one. The style changes you make in the theme builder would work if placed after the Kendo UI stylesheet registration.
Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
Icenium docs do not contain such information and you should look at Kendo UI site and docs. The Theme Builder is part of the Kendo UI demos (last tab) which open the one for Kendo UI Web. From there you can navigate to the Mobile one. The style changes you make in the theme builder would work if placed after the Kendo UI stylesheet registration.
Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.