How to change the background colour of Kendo UI app

5 posts, 1 answers
  1. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 22 Oct 2013 Link to this post

    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
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 22 Oct 2013 Link to this post

    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.
  3. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 23 Oct 2013 Link to this post

    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
  4. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 23 Oct 2013 Link to this post

    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
  5. Answer
    Steve
    Admin
    Steve avatar
    10941 posts

    Posted 23 Oct 2013 Link to this post

    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.
Back to Top