Styling Calendar and DatePicker Selected Date

8 posts, 1 answers
  1. Sergey
    Sergey avatar
    12 posts
    Member since:
    Jun 2014

    Posted 29 Sep 2014 Link to this post

    Hello!

    I built a custom theme in ThemeBuilder for Kendo UI based on Bootstrap theme.  Now I have the colors that I want, except for a couple of places.  For example Calendar and DatePicker Selected Date has a dark gradient in the background.  How do I get rid of it?

    I read a proposed solution here: http://stackoverflow.com/questions/13507971/kendo-ui-picker-css-issue, but it doesn't seem to work for me.

    Please help me address this!

    Thank you!

    Sergey
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 30 Sep 2014 Link to this post

    Hi Sergey,

    The following CSS rule should help to achieve the expected result: 
    .k-calendar td.k-state-focused.k-state-selected {
       box-shadow: none;
    }

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Sergey
    Sergey avatar
    12 posts
    Member since:
    Jun 2014

    Posted 30 Sep 2014 in reply to Iliana Nikolova Link to this post

    Hi, Iliana!

    I pasted this at the end of the custom theme css.  It didn't work...  Added -webkit-box-shadow: none; It still didn't work.

    What else can I do?

    Thank you!

    Sergey
  5. Sergey
    Sergey avatar
    12 posts
    Member since:
    Jun 2014

    Posted 30 Sep 2014 in reply to Sergey Link to this post

    I think the problem is occurring when the date is selected and has focus.
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 01 Oct 2014 Link to this post

    Hi Sergey, 

    I tested the suggested solution and it is working as expected on my side (dojo example). As a suggestion - could you please try to increase the specificity of the CSS selector (for example test it with !important):
    .k-calendar td.k-state-focused.k-state-selected {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Sergey
    Sergey avatar
    12 posts
    Member since:
    Jun 2014

    Posted 01 Oct 2014 in reply to Iliana Nikolova Link to this post

    Hi, Iliana!

    Again, I pasted this code at the end of the custom theme css, and it didn't work.  All I do is import that theme into the ThemeBuilder online, and test there.  Can I send the theme css, and the screen shot, showing the problem to you?

    Thank you!

    Sergey
  8. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 02 Oct 2014 Link to this post

    Hi Sergey,

    Thank you for the details. This behaviour is caused by currently Kendo UI ThemeBilder does not contain option for changing the box-shadow, however using the suggested rule in your application should help to achieve the expected result (dojo example).   

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Sergey
    Sergey avatar
    12 posts
    Member since:
    Jun 2014

    Posted 06 Oct 2014 in reply to Iliana Nikolova Link to this post

    Thank you for the explanation, Iliana!  It does work!  I was just thinking to iron out all the problems in the ThemeBuilder before using the theme in a project...
Back to Top
Kendo UI is VS 2017 Ready