+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / How do I theme a TabStrip

How do I theme a TabStrip

8 posts, 0 answered
  1. Bob Howard
    Bob Howard avatar
    22 posts
    Registered:
    06 Jan 2008
    10 Jan 2008
    Link to this post
    I'm trying to theme the RadTabStrip on my templates, but there's are css elements that are included via WebResource.axd, namely:

    .tabstrip li a (line 50)
    {
    float: left;
    position: relative;
    font-size: 100%;
    }

    .tabstrip li a.selected (line 65)
    {
    z-index: 0;
    cursor: default;
    }

    How do I undefine, redefine or remove them.  Also, there a way of preventing them from being included?  Also, is there a way of not including any stylesheet at all for the RadStripControl (i.e. plain control).
  2. Nikifor
    Nikifor avatar
    232 posts
    Registered:
    18 May 2013
    10 Jan 2008
    Link to this post
    Hello Bob Howard,

    Unlike previous versions, the visual appearance of the Telerik RadTabStrip v3.0 is completely controlled by skins. You can find all the information you need for creating a custom theme at the following link:

    http://www.telerik.com/help/aspnet/tabstrip/

    The section Controlling the visual appearance would help you find the most suitable way for making the TabStrip Control look as you wish.

    Hope the provided information is helpful. Please do not hesitate to contact us with additional questions regarding this matter.

    Best wishes, Nikifor
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center
  3. Bob Howard
    Bob Howard avatar
    22 posts
    Registered:
    06 Jan 2008
    11 Jan 2008
    Link to this post
    I've read all the documentation and the styles are still defined.  I checked out the knowledge base where there may be a clue and it doesn't apply in my case because I'm using version 3.0.   Why is it including an extra file WebResource.axd and how do I get rid of it.  I am extremely confused here.
  4. Bob Howard
    Bob Howard avatar
    22 posts
    Registered:
    06 Jan 2008
    12 Jan 2008
    Link to this post
    I will assume there's no way of not including removing these styles.  Is that true.
  5. Pepi
    Pepi avatar
    981 posts
    Registered:
    28 Oct 2016
    14 Jan 2008
    Link to this post
    Hi Bob,

    WebResource.axd is a handler for Web Resources, which is designed to retrieve assembly resources and serve them to the Web browser. Could you please tell us why would you like to remove the Embedded
    Resources? They are important because they define the basic appearance and proper operation of the TabStrip.

    If you wish, you could disable the usage of embedded JavaScript files in the Telerik controls by setting the UseEmbeddedScripts property to false.

    But if I understand correctly, you want to change the default appearance of the
    TabStrip. So you need to create a custom Skin and implement the necessary css styles in it. For example, to create a skin with overlapping tabs, you should add the margin-right property to the .RadTabStrip_MyCustomSkinName li a class. Consider the following CSS code:

    .RadTabStrip_MyCustomSkinName li a 
       padding-left5px
       backgroundtransparent url('img/tabLeftFirstOff.gif'0px 0px no-repeat
       height25px
       margin-right: -10px
       text-decoration:none

    Let us know how it goes.

    Best wishes,
    Pepi
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Bob Howard
    Bob Howard avatar
    22 posts
    Registered:
    06 Jan 2008
    14 Jan 2008
    Link to this post
    My graphic designer provided me with a set of HTML files along with CSS and Javascript files.  The only thing I need from SiteFinity is the dynamic content.  I am trying to create a menu that just spits out plain unordered lists with links.  The current controls do that, but I am having a problem styling them properly.  I have already created the skin file using styles such as  .RadTabStrip_MyCustomSkinName li a,  to redefine them as a plain list, but the embedded css file generates styles such as .radtabstrip li a tags that override them.

    Ideally, I wish there was a way to disable CSS generation as you do for the Javascript, instead of redefining all the existing styles. 
  7. Pepi
    Pepi avatar
    981 posts
    Registered:
    28 Oct 2016
    15 Jan 2008
    Link to this post
    Hello Bob,

    Please, send us your custom skin of the Tabstrip to test it locally.

    Thanks for your cooperation in advance.

    Greetings,
    Pepi
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Pepi
    Pepi avatar
    981 posts
    Registered:
    28 Oct 2016
    25 Jan 2008
    Link to this post
    Hi Bob,

    We investigated RadTabstrip skin in "Jem Testing" theme and we have noticed the following:

    1. The .css file (~/App_Themes/Jem Testing/Tabstrip/styles.css) in the "Tabstrip" skin is empty. As I have mentioned in my previous posts, you should create your own styles in the skin to override the built-in css. For example, to override .tabstrip li a style, you need to create .RadTabStrip_Tabstrip li a in the .css file of the corresponding skin:

    .RadTabStrip_Tabstrip li a  
    {  
       padding-left5px;  
       backgroundtransparent url('img/tabLeftFirstOff.gif'0px 0px no-repeat;  
       height25px;  
       margin-right: -10px;  
       text-decoration:none;  

    2. The Skin property of the RadTabStrip control in RadTabStrip.skin file is not specified. For example, to use "Tabstrip" skin, you need to set the Skin property to "Tabstrip".

    <radM:RadTabStrip  
        runat="server" SkinsPath="~/App_Themes/Jem Testing" Skin="Tabstrip"
    </radM:RadTabStrip 

    Please give us more information about the skin (skin name and location) if you are talking about another one that does not work fine.

    Kind regards,
    Pepi
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Register for webinar
8 posts, 0 answered