Add different style to different kendo window

Question

I'm using multiple window on the same page and i want to apply different styles on which window. I try to write a wrapper over the window so it can be identified in the css by id but that does not work. This is the source:

<div class="wrapper">
     <div kendo-window="InitialisingApp">
     </div>
</div>

This is the result:

<div class="wrapper"></div>
<div class="k-widget k-window....">
    ..........................
</div>

Any ideas about this problem?

Thank you! Have a nice day!

Answer 1

You can take a look at this:

Limit scope of external css to only a specific element?

Only other option that I see is to copy the theme and add a css selector in front of everything so that the theme only apply when wrapped with a specific class. Also keep in mind the CSS priorities to make sure the blue style gets applied over the default style.

Example:

<style>
    .blueStyleWrapper .k-window {
        /* Some kendo styles */
    }
</style>
<div class="blueStyleWrapper">
    <div class="k-window">
        This window will be using the blue theme!
    </div>
</div>