CODEWITHSUNDEEP
htmlcsskendo-uikendo-mobile
lnelson92
lnelson92

Reputation: 621

Kendo ui mobile set default theme to flat ui

Im just starting out with kendo ui and am running a very basic example below.

It currently displays as ios but i want to set it to be the flat ui theme all the time. I cant see anything in the demos or documentation which state how to do this.

Can somebody tell me how to change the default theme to the flat design?

<!doctype html>
<html>
<head>

<!-- Kendo UI Mobile CSS -->
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

<!-- jQuery JavaScript -->
<script src="js/jquery.min.js"></script>
<!-- Kendo UI Mobile combined JavaScript -->
<script src="js/kendo.mobile.min.js"></script>
    <title>Kendo UI Examples</title>
</head>
<body>

<!-- Kendo Mobile View -->
<div data-role="view" data-title="test" id="index">
    <!--Kendo Mobile Header -->
    <header data-role="header">
        <!--Kendo Mobile NavBar widget -->
        <div data-role="navbar">
            <span data-role="view-title"></span>
        </div>
    </header>
    <!--Kendo Mobile ListView widget -->
    <ul data-role="listview">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <!--Kendo Mobile Footer -->
    <footer data-role="footer">
        <!-- Kendo Mobile TabStrip widget -->
        <div data-role="tabstrip">
            <a data-icon="home" href="#index">Home</a>
            <a data-icon="settings" href="#settings">Settings</a>
        </div>
    </footer>
</div>
<script>
// Initialize a new Kendo Mobile Application
var app = new kendo.mobile.Application();
</script>

</body>
</html>

Upvotes: 2

Views: 6661

Answers (2)

Robin Giltner
Robin Giltner

Reputation: 3055

You can override the device/skin in the declaration of the app.

var app = new kendo.mobile.Application($(document.body), { skin: 'flat' });

Or you can force everyone into using a Windows Phone looking interface

var app = new kendo.mobile.Application($(document.body), { platform: 'wp8' });

See documentation... http://docs.kendoui.com/api/mobile/application#configuration-platform

Upvotes: 14

Ross Bush
Ross Bush

Reputation: 15175

You need to add a selection of the selected style on your loading page.

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.flat.min.css" rel="stylesheet" />

Upvotes: -3

Related Questions