Kendo UI 2013 Q3 and Issue with Bootstrap Moonlight Theme

[Mike]

Hi,

I'm trying to get a Bootstrap Metro theme in my application but a page renders with a default Bootstrap theme.
http://demos.kendoui.com/bootstrap/

Not sure if I'm loading all the necessary CSS and in in the right order.

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <style type="text/css">
            html {
                overflow-x: hidden; /* Prevent scroll on narrow devices */
            }
            body {
                padding-top: 60px;
            }
        </style>        

        <link href="app/_libraries/bootstrap-3.0.2/css/bootstrap.min.css" rel="stylesheet" />

        <link href="app/_libraries/kendo-2013-Q3/styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
        <link href="app/_libraries/kendo-2013-Q3/styles/kendo.moonlight.min.css" rel="stylesheet" />
        <link href="app/_libraries/kendo-2013-Q3/styles/kendo.dataviz.min.css" rel="stylesheet" />
        <link href="app/_libraries/kendo-2013-Q3/styles/kendo.dataviz.moonlight.min.css" rel="stylesheet" />
        <link href="app/_libraries/kendo-2013-Q3/styles/kendo.mobile.all.min.css" rel="stylesheet" />

        <link href="app/_resources/styles/application.css" rel="stylesheet" />

Thanks

[Iliana Dyankova]

Hello Mike,

I am not quite sure if I understand you correctly - there is no a Bootstrap Moonlight Theme in the Kendo UI suite. The purpose of the Kendo UI Bootstrap theme is to style Kendo UI widgets with Twitter Bootstrap colours, while the Moonlight theme is a separate theme with totally different colours. Please keep in mind that on a single page only one Kendo UI Theme can be included at a time. In order to assist you best and provide concrete recommendations I kindly ask you to provide more detailed information on the exact outcome you would like to achieve. Thank you in advance. 

Regards,
Iliana Nikolova
Telerik

[Mike]

In your demo you have a Bootstrap Moonlight theme.
http://demos.kendoui.com/bootstrap/

I'm trying to get the same theme in my project. Unfortunately, only the the Kendo widgets inherit the Moonlight theme the rest of the page uses a default blue theme of the Bootstrap.

Please see an attachment that includes the following screen shots:
1. Your demo Moonlight theme;
2. My page trying to follow your example, but not displaying the theme properly;
3. index.html page that loads all the CSS files in my project;

I assume, I don't have all the necessary CSS files in my project or the loading order is wrong.

Thanks

[Iliana Dyankova]

Hi Mike,

Thank you for getting back to me. I believe here is misunderstanding. As an explanation: 

• Kendo UI suite comes with a number of predefined themes among Default, BlueOpal, Bootstrap, Moonlight etc. (take a look at the Choose theme DropDownList); 
• The Moonlight theme itself (as part of the Kendo UI suite) has nothing to do with Twitter Bootstrap;
• The Kendo UI Bootsrap theme itself (as another theme from the Kendo UI suite) is intended to style Kendo UI widgets with the Twitter Bootstrap colours;
• Also on a single page only a single Kendo UI theme can be applied.

Hence only the Kendo UI widgets will be styled with the Moonlight theme (or any other from the default themes) and in order to get he rest of the page styled in the same way you need custom CSS rules.

Regards,
Iliana Nikolova
Telerik