How to skin TabStripStates.gif file? in UI for ASP.NET AJAX TabStrip

François

18 posts

Member since:
May 2008

Posted 20 May 2008 Link to this post

Hi,

I want to have different skins to my tabs with custom states (over, down, etc.). I should change the skin file TabStripStates.gif to do that.

But It's appear that the image file modification is different from the last method (with classic TabStrip Control) but I can't find documentation to do the new image file modifications.

States appear to be all in the same image (.gif).

In the new documentation (with ajax TabStripControl), customise image file (TabStripStates.gif) is not explain.

Is there an easy way to change this file (in Photoshop) to correspond to my design like your last tutorial.

Thanks.

Paul

Admin

4281 posts

Posted 21 May 2008 Link to this post

Hello François,

As you have noticed, the use of only one image in the RadTabStrip skins is due to a significant performance boost because of the reduced count of http requests. This technique is called image sprite and can be described as "old school" and extremely efficient. If you are interested, I recommend the "CSS Sprites: Image Slicing’s Kiss of Death" article at the A List Apart ezine. We do our best to use it across all our controls and you'll see it more often in the future. And of course, because of the increased complexity of the skin modifications, we are working simultaneously towards easier ways of adjusting the skins... but this is only a teaser, so don't mind it ;-)

Greetings,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

François

18 posts

Member since:
May 2008

Posted 21 May 2008 Link to this post

Ok! Thanks for the teaser! ;-)

But I don't understand what is the big transparent space in some of the TabStripStates.gif.

I understand that all states of my tabs are in this file (with the CSS sprite technique), but if I want to modify their apparence, I must work in this file (recreate another one for my design)? Each group of line represent an orientation (HorizontalBottom, VerticalLeft, etc.)?

Have you some spec that I must respect to recreate TabStripStates.gif (with, height, etc.) or I should start from an existing one (ex : Web20 skin).

Thanks for your help.

Dimo

Admin

8478 posts

Posted 22 May 2008 Link to this post

Hello François,

Here are some notes on your inquiries:

1) "I don't understand what is the big transparent space in some of the TabStripStates.gif."

Transparent regions in sprite images are used for safety reasons - since different parts of the sprite image are used as backgrounds for different elements, there is a risk that a wrong part of the sprite image may become visible, when the element expands too much.

2) "if I want to modify their appearance, I must work in this file (recreate another one for my design)?"

You can either work in the same file or create a copy and work on the copy.

3) "Each group of line represent an orientation (HorizontalBottom, VerticalLeft, etc.)?"

Yes. If we take the Web20 skin as an example, here is what each part of the sprite is used for (see the attached image).

By the way, here is a help article about CSS sprites. It is intended for RadGrid, however, most of the guidelines are general knowledge and apply for RadTabStrip as well.

http://www.telerik.com/help/aspnet-ajax/css-sprites.html

Let us know if you need further advice.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

TabStripStates_explained.gif

François

18 posts

Member since:
May 2008

Posted 22 May 2008 Link to this post

Thank you very much. This will greatly help me in my future developments with this control.

François

18 posts

Member since:
May 2008

Posted 23 May 2008 Link to this post

Hi,

I've successfully customise my tabs with the TabStripStates.gif files.

However, I've some problems to correctly integrate a RadMenu in the second level of my RadTabStrip control. I've used the TabTemplate Tag like your demo at this adress : RadTabStrip Template Demo.

The RadMenu working properly but its position is not correct. In Explorer 7.0 I have a bad margin at the bottom of the menu. In Firefox, the background color of of my second level is not there because of the "overflow:visible !important;" property (clearing floats bug).

Check my demo page : Demo page

Also, I can't remove the border around my arrow image like you have done in your demo.

I don't want to use a table in my TabTemplate. I want it fully CSS.

Thanks for your help.

My code :

    
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" Skin="portailPedago" EnableEmbeddedSkins="false"> 
        
                        <Tabs> 
        
                            <telerik:RadTab Text="Accueil"> 
        
                                <Tabs> 
        
                                    <telerik:RadTab Text="Enviromnent Variables"></telerik:RadTab> 
        
                                    <telerik:RadTab Text="Performance"></telerik:RadTab> 
        
                                    <telerik:RadTab Text="Startup and Recovery"> 
        
                                        <TabTemplate> 
        
                                            <telerik:RadMenu runat="server" ID="RadMenu1" Skin="portailPedago" EnableEmbeddedSkins="false" OnClientItemClicked="onClicked"> 
        
                                                <CollapseAnimation Type="none" /> 
        
                                                <Items> 
        
                                                    <telerik:RadMenuItem CssClass="rootItem" Text="Startup and Recovery <img src='Images/arrow.gif' alt='' />"> 
        
                                                        <Items> 
        
                                                            <telerik:RadMenuItem Text="Portail"></telerik:RadMenuItem> 
        
                                                            <telerik:RadMenuItem Text="Pedagogique"></telerik:RadMenuItem> 
        
                                                            <telerik:RadMenuItem Text="Concepteurs"></telerik:RadMenuItem> 
        
                                                        </Items> 
        
                                                    </telerik:RadMenuItem> 
        
                                                </Items> 
        
                                            </telerik:RadMenu> 
        
                                        </TabTemplate> 
        
                                    </telerik:RadTab> 
        
                                </Tabs> 
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab Text="Portail Concepteur"> 
        
                                <Tabs> 
        
                                    <telerik:RadTab Text="Test 1"></telerik:RadTab> 
        
                                    <telerik:RadTab Text="Test 2"></telerik:RadTab> 
        
                                    <telerik:RadTab Text="Test 3"></telerik:RadTab> 
        
                                </Tabs> 
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab Text="Employés"> 
        
                                <Tabs> 
        
                                    <telerik:RadTab Text="Test 4"></telerik:RadTab> 
        
                                    <telerik:RadTab Text="Test 5"></telerik:RadTab> 
        
                                    <telerik:RadTab Text="Test 6"></telerik:RadTab> 
        
                                </Tabs> 
        
                            </telerik:RadTab> 
        
                        </Tabs> 
        
                    </telerik:RadTabStrip>

Dimo

Admin

8478 posts

Posted 23 May 2008 Link to this post

Hello François,

In order to remove the border around your arrow image, simply add the following CSS rule:

.RadMenu_portailPedago img
{
     border:0;
}

In order to fix the bottom margins in IE, please try changing the vertical alignment of the arrow image.

As for the missing background, this problem is caused by an uncleared float. When an element contains only floated children, there is nothing to expand it vertically (in IE the behavior is different). In order to fix this, you have to clear the float by using the following technique:

.SomeClass:after
{
     content:"";
     display:block;
     clear:both;
     height:0;
     visibility:hidden;
}

SomeClass is the CSS class of the parent, which contains floated elements.

If you still have troubles making the custom skins work, please send them to us (together with the images) in addition to the ASPX code.

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

François

18 posts

Member since:
May 2008

Posted 23 May 2008 Link to this post

Hi,

I've corrected the border around the arrow image.

I've checked the vertical alignment of the arrow image but with no result.

I'm sending you my files if you can check them.

You can download them at this adress : ........

Thanks

Dimo

Admin

8478 posts

Posted 23 May 2008 Link to this post

Hello François,

Could you please use some more conventional archive format (ZIP, RAR)? Thanks.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

François

18 posts

Member since:
May 2008

Posted 23 May 2008 Link to this post

Hi,

I've edited my previous message.

For the bad margin, I've add a height value to the rad menu but it's effective only in Explorer 7.0 (not 6.0).

.RadMenu_portailPedago
{
height:20px !important;
}

Thanks.

Dimo

Admin

8478 posts

Posted 23 May 2008 Link to this post

Hello François,

Thank you for sending a complete working project, this always makes things easier for us. However, please note that you cannot link to dev versions of our controls in the forums, that is why, I removed your link.

To your questions:

In order to fix the missing background, please add:

        .rtsLevel:after
        {
            content:"";
            display:block;
            clear:both;
            height:0;
            visibility:hidden;
        }

The vertical alignment issue in IE6 is caused by a browser bug, related to ignored line-height when an image is present. In order to fix this, please add:

        * html .rtsLevel2 .rtsLast{position:relative;top:7px}

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

François

18 posts

Member since:
May 2008

Posted 23 May 2008 Link to this post

Hi,

Thank you very much. That works very well.

Greetings

François

18 posts

Member since:
May 2008

Posted 27 May 2008 Link to this post

Hi,

I want to add an ID connection at the end of the gray bar of my RadTabStrip control. I can't add this to the control itself because it's not a tab or a children tab. I place this xhtml code under my control :

<div id="connectionUsager">
      <span><strong>Déconnexion</strong> FMARTEL</span>
</div>

I've used negative margin to place this ID connection above the gray bar like this :

#connectionUsager
{
    float: right;
    margin-top: -25px;
    margin-right: 10px;
}

But the problem is in Firefox, the ID connection is under the gray bar and it's not visible. In Explorer, it's correct.

Demo

Is there a sample way to acheive that? Or I must use negative margin?

Thanks.

Dimo

Admin

8478 posts

Posted 27 May 2008 Link to this post

Hi François,

Try adding

#connectionUsager
{
    float: right;
    margin-top: -25px;
    margin-right: 10px;
    position: relative;
    z-index:100;
}

This should make the text appear on top of the TabStrip.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

François

18 posts

Member since:
May 2008

Posted 28 May 2008 Link to this post

Yes, the text appear on top of the TabStrip correctly.
I've another question (yes another one...). Some of my tabs have no second level items. If I click on one, the gray bar doesn't appear because of that. If I want that gray bar always appear even if the clicked tab have no second level items, what should I do?

Thanks.

Alex Gyoshev

Admin

2527 posts

Posted 02 Jun 2008 Link to this post

Hi François,

To make the second-level container always visible, you can use the following CSS snippet:

    
            div.RadTabStrip .rtsLevel 
        
            { 
        
                /*
        
                   this value could vary - it should be set to the height
        
                   of the second level for the skin that you are using
        
                */ 
        
                height: 20px;  
        
            }

All the best,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

François

18 posts

Member since:
May 2008

Posted 09 Jun 2008 Link to this post

Hi,

Thank for the last reply. I've another question. I can't find why there is always a margin at the bottom of my TabStrip menu. Even if I don't link any CSS to the TabStrip menu, there is always this margin. It's appear that the second level ul have a bigger height but I can't not correct it.

Demo

Thanks.

Alex Gyoshev

Admin

2527 posts

Posted 09 Jun 2008 Link to this post

Hello François,

This problem is rather strange - could you provide us with a sample project or a live url to inspect that?

If you are using web development plug-ins like the web developer toolbar or firebug, you could click "inspect" on the whitespace to understand to which element this space belongs.

Greetings,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

François

18 posts

Member since:
May 2008

Posted 09 Jun 2008 Link to this post

Hi,

I've inspected that with the Web Developer Toolbar on Firefox 2.0.0.14 (with a TabStrip with no style) and this is the result :

Demo

If you check, the height value of rtsLevel2 is 20px but the real is around 40px (the red rectangle). I don't want the 20px over but I can't find how to ajust it. It's seem that the level2 ajust it's height if there will be a level 3 but in this case there is no one.

I can't host my project live but I can give you a link to download my file (remove it after please) : Project

Thanks

François

18 posts

Member since:
May 2008

Posted 09 Jun 2008 Link to this post

Hi,

It's seems to be this css selector which causing this :

.RadTabStrip .rtsLI,
.RadTabStrip .rtsIn,
.RadTabStrip .rtsLevel,
.RadTabStrip .rtsUL
{
overflow:visible !important;
}

But we have set this in previous post to make visible the radmenu in level2 for Firefox and it's correct. But I don't want to have this blank space at the bottom of my TabStrip because I've inserted my TabStrip in a RadPane of a RadSplitter and it's cause my RadPane larger than it should (scrollbar appear).

EDIT :

Since my TabStrip menu is in a RadPane, I've set a height and the scrolling to none (for the RadPane) to temporarily correct my bug with the blank space under the menu cause by the previous CSS selector. I said temporarily because when I try to increase the font size, the pane is not increasing as well (fixed height).

But in firefox, my menu is under the second pane (not in Explorer). How can I correct that?

Demo

Alex Gyoshev

Admin

2527 posts

Posted 10 Jun 2008 Link to this post

Hello François,

The space around the RadTabStrip (in the project that you sent) was caused by the paragraphs that were surrounding it, as well as the <br> tag between the two RadTabStrip-s. By adding the following CSS declaration:

    
            p { margin: 0; }

and removing the line break, the RadTabStrip-s aligned properly, one after the other, without the spacing you described.

I'm afraid that setting the scrolling to 'none' in the RadPane will cause an "overflow: hidden" to be rendered and thus, will not allow the menu to pop-out of the pane.

Sincerely yours,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

François

18 posts

Member since:
May 2008

Posted 10 Jun 2008 Link to this post

Hi,

I understand that for the {p:margin:0}but it was to demonstrate my case. If you check the file "menuTab2.aspx" in my project, in Firefox, you can see that blank space at the bottom of the TabStrip even with no paragraph under (when I set to scrolling to yes).

Project

In Explorer, all is ok, for the blank space and for the pop-up RadMenu. But in Firefox, the pop-up menu is under the pane and there is a blank space under the TabStrip cause by that :

    
            .RadTabStrip .rtsLI, 
        
            .RadTabStrip .rtsIn, 
        
            .RadTabStrip .rtsLevel, 
        
            .RadTabStrip .rtsUL 
        
            { 
        
                overflow:visible !important; 
        
            }

Is there a way to set the overflow propertie of the RadPane to visible or something else to ajust my problem?

Alex Gyoshev

Admin

2527 posts

Posted 10 Jun 2008 Link to this post

Hi François,

Yes, the overflow property should be set to visible to resolve the problem. I am attaching a modified version of the menuTab2.aspx page to this post that demonstrates the solution.

All the best,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

menuTab2.zip