This is a migrated thread and some comments may be shown as answers.

KendoWindow custom titlebar color?

5 Answers 3389 Views
Window
This is a migrated thread and some comments may be shown as answers.
Kyle
Top achievements
Rank 1
Kyle asked on 24 Aug 2012, 06:11 PM
Is there a way to set the titleBar color for an individual kendo window?

Current I have tried:

$('#myWindow').kendoWindow({ settings });

followed by:

$('#myWindow').parent().find('k-window-titlebar').css('backgroundColor', '#fe2712');

Which works, but leaves a blank spot. Any ideas if there is a better way to go about this?

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Aug 2012, 08:16 AM
Hi Kyle,

Please try using

$('#myWindow').parent().find('.k-window-titlebar,.k-window-actions').css('backgroundColor', '#fe2712');

You can also define an external CSS rule using the Window's ID, so that no Javascript is required.

Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kyle
Top achievements
Rank 1
answered on 27 Aug 2012, 02:49 PM
Thanks for the update. I tried the code you specified, but it still leaves a bit of an 'artifact' on the titlebar:

http://imgur.com/FRs02

If you see, over near the 'X' button there is about one pixels width of solid orange rather than a gradient.

You mentioned using a CSS rule, but I thought if I did a CSS rule, it would effect all of the windows? Would you possibly be able to post an example that I could use?

Thanks!
0
Dimo
Telerik team
answered on 28 Aug 2012, 07:43 AM
Hi Kyle,

You can apply a custom CSS class to the Window's wrapper and use it as part of the CSS selector. In this way the style will affect only the particular widget instance.

$('#myWindow').parent().addClass("myWindow");

.myWindow  .k-window-titlebar,
.myWindow  .k-window-actions
{
    background-color: .... ;
}


CSS selectors tutorial

Here is the Window HTML markup for quick reference:

<div class="k-widget k-window">
    <div class="k-window-titlebar k-header"> <span class="k-window-title">Window Title</span><div class="k-window-actions k-header"><a class="k-window-action k-link" href="#"><span class="k-icon k-i-close">Close</span></a></div></div>
    <div class="k-window-content k-content" id="myWindow">
            Window content here
    </div>
</div>

As for the border, I don't have one on my side. Please inspect the respective HTML element, see what styles are applied and override the unwanted ones. For example this might work:

.myWindow  .k-window-titlebar  .k-window-action
{
    background: none;
    border-width: 0;
}


All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
venkata
Top achievements
Rank 1
answered on 21 Jul 2016, 06:35 PM

Hi,

How to do same thing in mvc, how can i change color of header and title for editable template.

0
Dimo
Telerik team
answered on 22 Jul 2016, 07:18 AM
Hello Venkata,

The required approach when using the Kendo UI MVC Window wrapper is exactly the same. The only thing to keep in mind is that the JavaScript code, which adds a custom CSS class to the widget's wrapper, should be placed inside a document.ready handler that is defined after the widget declaration:

http://docs.telerik.com/kendo-ui/aspnet-mvc/fundamentals#client-side-objects

If the Window is the container of a Grid popup edit form, then you can add the custom CSS class in the edit event of the Grid.

http://docs.telerik.com/kendo-ui/api/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridEventBuilder#methods-Edit(System.String)

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

Regards,
Dimo
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Tags
Window
Asked by
Kyle
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Kyle
Top achievements
Rank 1
venkata
Top achievements
Rank 1
Share this question
or