Dynamically change the background image

2 posts, 0 answers
  1. Jason Sperko
    Jason Sperko avatar
    2 posts
    Member since:
    Dec 2009

    Posted 10 Mar 2010 Link to this post

    I have a RadTabStrip and I am adding the RadTabs dynamically.  As I am creating these RadTabs, one of the properties I would like to set is a background image.  Is it possible to do this? 

    I have tried creating multiple TabStripStates.png files ( a default, then a TabStripStates_Red.png).  My thinking was that as I create these new tabs, I could just set the tab.CSSClass to a css that I have defined that points to this file :  

    For example :  In my code behind as I create the tab :  tab.CSSClass = "red";

    In the css that I have defined : 

    .tabstrip .red .rtsLink,
    .tabstrip .red .rtsOut { background-image: url('TabStrip/TabStripStates_Red.png'); }

    What I am not understanding is if I am just missing something, or if this is not the correct way to do this.  Any help on dynamically setting the background image would be greatly appreciated.

    Thank you

     

     

     

     

     

  2. Jason Sperko
    Jason Sperko avatar
    2 posts
    Member since:
    Dec 2009

    Posted 11 Mar 2010 Link to this post

    I have resolved this in a different manner.

    Instead of creating new TabStripStates for each color, I simply created a gradient backround image that would suffice.  I then created a css that would handle each color and each mode such as follows : 

    <
    telerik:RadTab id="temp1" CssClass="blue" Height="20px" SelectedCssClass="blue_selected" HoveredCssClass="blue_hovered" runat="server" Text="1971 Hemi Cuda"></telerik:RadTab>

    div.RadTabStrip .blue
    {
        background: transparent url(Blue.png) repeat-x 0 0 !important;
        border-left:solid 1px gray
        border-right:solid 1px gray;
        border-top: solid 1px gray
        border-bottom-style:none;
        padding: 0px 0px 0px 0px;
    }

    div.RadTabStrip .blue_selected
    {
        background: transparent url(blue_selected.png) repeat-x 0 0 !important
        
    border-left:solid 1px darkgray
        border-right:solid 1px darkgray
        border-top: solid 2px darkgray;
        border-bottom-style:none
        padding: 0px 0px 0px 0px;
    }

    div.RadTabStrip
    .blue_hovered
    {
        background:transparent url(blue_hover.png) repeat-x 0 0 !important
        border-left:solid 1px darkgray
        border-right:solid 1px darkgray
        border-top: solid 2px darkgray
        border-bottom-style:none;
        
    padding: 0px 0px 0px 0px
    }

    Obviously the css can be cleaned up, but I wanted to get it working first and was messing with different looks.

     

     

     

     

     

     

     

     

     

Back to Top