Search code examples
cssangularkendo-ui-angular2kendo-window

Unable to customize Kendo-Window in Angular


I am using Kendo UI for Angular and I am trying to change the color of the header to a custom color, but I am unable to.

I am trying to override the default color with blue and added the below code to my component's css file.

/deep/ .k-window-titlebar * {
           background-color:blue !important;
}

And this what I am getting. enter image description here

I want to change this to blue completely. I am a novice web developer and any help would be appreciated.


Solution

  • The issue here is the * in your css-selector.

    With the selector .k-window-titlebar * you are styling the elements within the .k-window-titlebar, but in your case you want to style the .k-window-titlebar itself.

    /deep/ .k-window-titlebar {
        background-color: blue;
    }
    

    Example