Window Border CSS Setting

2 posts, 0 answers
  1. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 29 Aug 2013 Link to this post

    I have a KendoUI Window which is not behaving itself when I am using it inside another JQuery framework.
    I am trying to set the window title colour and the maximise and close icons to the top right, but I cannot figure out the CSS settings to do this.
    I attach an image showing what I have now and what I am trying to achieve.
    I was given these settings a few months ago but they appear to be having little effect:
    /* Override our KendoUI popup window */
        background-color: pink;
        color: red;
        font-weight: bold;
        padding: 0px;

    .k-header {
        margin-top: 0px;
        padding: 0px;

    .k-window-title {
        background-color: #275CAB;
        color: white;
        font-weight: bold;
        padding: 3px;

    /* Allow centering of the table content in the popup window */
    .k-window-content > .km-scroll-container
        padding: 30px;

    .k-window-titlebar  .k-window-action
        background: none;
        border-width: 200px;
        background-color: #275CAB;
    Your help is most appreciated?

    Kind Regards, Garry.
  2. Iliana Nikolova
    Iliana Nikolova avatar
    2570 posts

    Posted 02 Sep 2013 Link to this post

    Hi Garry,

    Up to your CSS requirements:

    • Setting window title color / background: 
      .k-window-titlebar.k-header {
          background: #275CAB/*set background to the titlebar*/
          color: white; /*set color to the titlebar*/
          font-weight: bold; /*set font-weight to the titlebar*/
    • Maximize the icons - basically the icons are part of a sprite and in order to change their size you should change the icons itself;
    • From the provided picture it appears you would like to set border to the window content? If this is the case you could use the following CSS rule: 
          border: 1px solid #275CAB;

    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top