Custom Tabstrip Gradient

4 posts, 0 answers
  1. Martin
    Martin avatar
    6 posts
    Member since:
    Aug 2012

    Posted 12 Aug 2012 Link to this post

    Hi guys,

    I'm trying to change my tabstrip gradient color and it's not working. How do I change it?

    This is what I currently have:

    #custTab .km-tabstrip {background-color:#ccc;}

    All that does is change the top half of the tabstrip
  2.
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 13 Aug 2012 Link to this post

    Hi Martin,

    The TabStrip gradient is a transparent CSS3 gradient and is set as a background-image. You can change it like this:
    #custTab .km-tabstrip {
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));;
    }

    I've specified it with the old syntax as it is supported in iOS under 5. You can also use an online gradient generator to do it, until the Kendo UI Mobile Theme Builder becomes available.

    Regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Martin
    Martin avatar
    6 posts
    Member since:
    Aug 2012

    Posted 22 Aug 2012 Link to this post

    Hi Kamen,

    Thanks for the reply. Got it working :) Just one more question. Why are my icons not showing on tabstrip?
    When I link to <link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet"> it works, but when I use <link href="css/kendo.mobile.all.min.css" rel="stylesheet" type="text/css"> the data-icon on tabstrip doesn't show at all.
  7. Martin
    Martin avatar
    6 posts
    Member since:
    Aug 2012

    Posted 22 Aug 2012 Link to this post

    Ignore my last post. Figured out why it's not working :)
  8.
Back to Top