[Solved] Different picture for tabs

[Jonisan]

Hello ,

I added from Css  pictures for tabStrip tabs : 

 .t-tabstrip-items .t-state-default 
 {   
     background-color: transparent;
     background-image: url('Dark/arrow_default.png');
     background-position: center;     
     background-size: 100%;         
 } 
  .t-tabstrip-items .t-state-active 
 { 
      background-image: url('Dark/arrow_selected.png');
 }

Is there a Css rule to add a different picture for the first and last tab of the tabstrip ? or how can I do this .. ?

[Ed]

Have you tried using the SpriteCssClasses() function?

Here is an example I am using (in VB):

My TabStrip is in a partial (each tab's content is also in a partial):

@Imports Telerik.Web.Mvc.UI

 

<div id="MyApplication">

@Code   

    Dim tabStrip = Html.Telerik().TabStrip().

        Name("Application").Effects(Function(ts) ts.Toggle.OpenDuration(200).CloseDuration(300))    

    With tabStrip

        .Items(Function(tabItem) tabItem.Add().

                   HtmlAttributes(New With {.id = "ShopTab"}).

                   Text("Shop").

                   SpriteCssClasses("icon-search").

                   LoadContentFrom("Shop", "Shop", New With {.area = "Shop"}).

                   Selected(True))

        .Items(Function(tabItem) tabItem.Add().

                   HtmlAttributes(New With {.id = "TaggedItemsTab"}).

                   Text("Tagged Items").

                   SpriteCssClasses("icon-tagged-items").

                   LoadContentFrom("TaggedItems", "Shop", New With {.area = "Shop"}))

        .Items(Function(tabItem) tabItem.Add().

                   HtmlAttributes(New With {.id = "PastOrdersTab"}).

                   Text("Past Orders").

                   SpriteCssClasses("icon-order-history").

                   LoadContentFrom("PastOrders", "Shop", New With {.area = "Shop"}))

        .Items(Function(tabItem) tabItem.Add().

                   HtmlAttributes(New With {.id = "SavedCartsTab"}).

                   Text("Saved Carts").

                   SpriteCssClasses("icon-saved-carts").

                   LoadContentFrom("SavedCarts", "Shop", New With {.area = "Shop"}))

        .Items(Function(tabItem) tabItem.Add().

                   HtmlAttributes(New With {.id = "CartTab"}).

                   Text("Cart").

                   SpriteCssClasses("icon-cart").

                   LoadContentFrom("Cart", "Shop", New With {.area = "Shop"}))

        .Render

    End With

End Code

</div>

Here is the Css:

#MyApplication
{
    .t-sprite
    {
        background-image:           url("~/Content/Images/mycompany_sprite_beta.png");
        height:                     30px;
        width:                      30px;
    }
    .icon-search                    {background-position: -4px 0px;}
    .icon-saved-carts               {background-position: -4px -36px;}
    .icon-tagged-items              {background-position: -4px -75px;}
    .icon-order-history             {background-position: -4px -113px;}
    .icon-cart                      {background-position: -4px -148px;}
    .t-header                       {border:none;}
    .t-widget                       {border:none;}
    .t-item
    {
        position:                   relative;
        border-radius:              @radiusSmall @radiusSmall 0 0;
        -webkit-border-radius:      @radiusSmall @radiusSmall 0 0;
        -moz-border-radius:         @radiusSmall @radiusSmall 0 0;
        list-style-type:            none;
        margin:                     0.1em 0.3em 0 0;
        padding:                    0;
        position:                   relative;
        vertical-align:             top;
    }
    .t-state-default
    {
        border-color:               @appGroupDefault;
        background-color:           @appGroupDefault;
    }
    .t-state-active
    {
        border-color:               @appGroupActive;
        background-color:           @appGroupActive;
        color:                      white;
        margin-bottom:              -1px;
        padding-bottom:             1px;
        .t-link
        {
            color:                  white;
            font-weight:            bold;
        }
    }
    .t-content
    {
        position:                   relative;
        border-radius:              0 @radiusSmall @radiusSmall @radiusSmall;
        -webkit-border-radius:      0 @radiusSmall @radiusSmall @radiusSmall;
        -moz-border-radius:         0 @radiusSmall @radiusSmall @radiusSmall;
        min-height:                 250px;
        padding:                    0 10px 10px 10px;

        /*
        box-shadow:                 @boxShadow;
        -moz-box-shadow:            @boxShadow;
        -webkit-box-shadow:         @boxShadow;
        */
    }
    .contentTitle
    {
        h2
        {
            color:                      White;
        }
    }
    .contentSubTitle
    {
        h3
        {
            color:                      White;
        }
    }
}

I have attached an image of how this looks (it's in development).

You'll also notice that I have figured out a way to group tabs as well, so that you can have sets of active/inactive colors.

Enjoy!

[Jonisan]

Thank you , Ed ,

You'r help is over my expectations .