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

Forums / General Discussions / SiteTabStrip skinning problem

SiteTabStrip skinning problem

13 posts, 1 answered
  1. Troy Lawrence
    Troy Lawrence avatar
    56 posts
    Registered:
    07 Jan 2010
    14 Jan 2010
    Link to this post
    I've been trying to skin a siteTabStrip for 4 days with no luck.  But, I still have a few hairs left on my head so I'm continuing to try.  I'm using the Sitefinity web app in Firefox and what I tried is adding a siteTabStrip control by dragging and dropping it into the Content Placeholder.  This creates the tabstrip which seems to work fine with the default skin.  But, anytime I change the skin it doesn't display anything.  I downloaded a bunch of sample skins that had names like Blue3D, Bluebar, Mac, etc.  And, I've tried to change the skin property to "mac" or "blue3D".   Each time nothing happens.  It seems like my directory structure is correct, but I'm still not sure what I could be doing wrong.  I put the skins in ~App_Themes\ThemeName\Tabstrip\

    Sample css files would look like:
    ~App_Themes\ThemeName\Tabstrip\Bluebar\styles.css
    ~App_Themes\ThemeName\Tabstrip\WinXP\styles.css
    ~App_Themes\ThemeName\Tabstrip\WinVista\styles.css

    I must be missing something?  I'm not even sure if I'm using the proper skins for the tabstrip?


  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    14 Jan 2010
    Link to this post
    Hi Troy Lawrence,

    1. You should have the following structure

    ~App_Themes\ThemeName\Bluebar\styles.css
    ~App_Themes\ThemeName\WinXP\styles.css
    ~App_Themes\ThemeName\WinVista\styles.css

    2. In ThemeName folder create RAdTabStrip.skin file

    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
    <telerik:RadTabStrip  runat="server" EnableEmbeddedSkins="false"></telerik:RadTabStrip

    3. Open the RadTabStrip or SiteTabStrip control in edit mode
    - Make sure that EnableEmbeddedSkins property of the control is set to false
    - Use Skin property to set one of your skins Bluebar, WinXP or WinVista

    4. Make sure that the css of your stylesheets is correct.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Troy Lawrence
    Troy Lawrence avatar
    56 posts
    Registered:
    07 Jan 2010
    14 Jan 2010
    Link to this post
    ok, I did all of that and when I change the skin property to "Bluebar" for example I see the changes to my css file, but I don't see any images.  My only guess is that for some reason the path to my images is incorrect? 

    The stylesheet is here:
    ~App_Themes\PG-2010 Home\Tabstrip\Bluebar\styles.css

    Images are located here:
    ~App_Themes\PG-2010 Home\Tabstrip\Bluebar\img\styles.css

    This is how the images are coded in the stylesheet:
    .RadTabStrip_Bluebar .level1 li a
    {
        padding-left: 1px;
        background: transparent url('.img/tabMiddleOff.gif') 0px 0px no-repeat;
        color: white;
        text-decoration: none;
        line-height: 39px;    
    }
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    15 Jan 2010
    Link to this post
    Hi Troy Lawrence,

    Modify the background as shown below in case that your images are located under Tabstrip/Bluebar/img/

    background: transparent url('img/tabMiddleOff.gif') 0px 0px no-repeat;

    I suggest that you should go through Controlling Appearance.

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Troy Lawrence
    Troy Lawrence avatar
    56 posts
    Registered:
    07 Jan 2010
    15 Jan 2010
    Link to this post
    I was successful in getting a particular skin to work on my tabstrip. It's called Telerik.
    Locally the tabstrip theme resides in App_Themes/MyThemeName/Telerik/

    That folder contains the css and the images. 
    I figured I could change the color on those images and then upload the images to the same directory on the server, but the changes are not reflected on the live site.

    So, I viewed my site in Firefox and traced where Sitefinity was getting the tabstrip graphic from.  And, it was a long, crazy address like this:
    WebResource.axd?d=aPia-opLeAKsCm2Kh51-H7FQhLbBN_QN0P55XE4aKwkf36TyN-ACDu55pTe3GELgm2TV4pP7iimQzwZ1Tqz7cXV5ZkGNy0pqWmU0ss1nWSI1&t=633946387613783384

    I must be doing something wrong here?  Why would Sitefinity be looking at that crazy address instead of my:
    App_Themes/MyThemeName/Telerik/





  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    15 Jan 2010
    Link to this post
    Hello Troy Lawrence,

    This is the embedded resource that comes form Telerik.Web.UI.dll. It is loaded together with your css classes as well.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Troy Lawrence
    Troy Lawrence avatar
    56 posts
    Registered:
    07 Jan 2010
    15 Jan 2010
    Link to this post
    Ok, so if I wanted to update the graphic within the skin file, where would I load it?   Previously I was uploading it via ftp to the App_Themes directory.  But, that doesn't work.




  8. Troy Lawrence
    Troy Lawrence avatar
    56 posts
    Registered:
    07 Jan 2010
    19 Jan 2010
    Link to this post
    I'm still troubleshooting how to edit the skin or make a custom skin.  I'm debugging my site with firebug and I've noticed that the styles are linking to a style called .RadTabStrip .rtsLevel1.
    I can't seem to find where this file is?  That particular style is not in my custom style sheet.  Is it part of another css file in Sitefinity?




  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    19 Jan 2010
    Link to this post
    Hi Troy Lawrence,

    Most probably this class ( and other) comes from the embedded resource of Telerik.Web.UI and RadTabStrip control. Each control has embedded resources that are loaded no matter you have a custom skin. Generally these css classes could be overriden with !important and replaced with more proper. You can also disable the embedded resources, but this will break the control behavior if you do not replace these resorces with a custom one.

    You can find more iformation at Controllin appearance of RadControls for ASP.NET Ajax and General ASP.NET AJAX Information

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Answered
  10. Troy Lawrence
    Troy Lawrence avatar
    56 posts
    Registered:
    07 Jan 2010
    19 Jan 2010
    Link to this post
    Thank you, Ivan!   That was the tip I needed to solve my issues.  My styles were being overridden by the embedded styles.  I was able to use the "!important" tag you suggested and everything is working fine now. 

    Cheers!


  11. Sarah Masood
    Sarah Masood avatar
    19 posts
    Registered:
    18 May 2010
    15 Jun 2010
    Link to this post
    hi

    i am using siteTabstip and radtapstrip , i want to apply different skin ,when i add another skin in themes folder it endup with error "telerikRadtabStip exist " sort of error

    ------------------------------------------SiteTabStrip------------------------------------------------------------
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <telerik:RadTabstrip
        runat="server"
        EnableEmbeddedSkins="false"
        EnableEmbeddedBaseStylesheet="false"
        Skin="header" />
    ----------------------------------------Radtabstrip--------------------------------------------------------------
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <telerik:RadTabstrip
        runat="server"
        EnableEmbeddedSkins="false"
        EnableEmbeddedBaseStylesheet="false"
        Skin="footer" />

    .
  12. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    15 Jun 2010
    Link to this post
    Hi Sarah Masood,

    I am afraid this is not quite possible as you are trying to achieve it.

    The SiteTabStrip and RadTabStrip are pretty much the same control however with different data source. You can try this in your .skin file and then for each control instance you can define the skin property from the control editor as in the attached image. Make sure that the EnableEmbeddedBaseStylesheet is set to true (only one skin file).
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <telerik:RadTabstrip
        runat="server"
        EnableEmbeddedSkins="false"
        EnableEmbeddedBaseStylesheet="true"/>


    Greetings,
    Radoslav Georgiev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  13. Sarah Masood
    Sarah Masood avatar
    19 posts
    Registered:
    18 May 2010
    22 Jun 2010
    Link to this post
    Cool ,thanks :)
Register for webinar
13 posts, 1 answered