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

Forums / Designing with Sitefinity / Two tabstrips - different theme

Two tabstrips - different theme

8 posts, 0 answered
  1. Ian Johnson
    Ian Johnson avatar
    11 posts
    Registered:
    11 Jan 2006
    16 Feb 2009
    Link to this post
    Hey,

    I want two tabstrips - one in the header and one in the footer but with different skins. I am using themes. I have the following in RadTabStrip.skin under MyTheme.

    <

     

    telerik:RadTabStrip runat="server" EnableEmbeddedSkins="false" SkinsPath="~/App_Themes/MyTheme/Tabstrip" Skin="SitefinityCompany" >
    </
    telerik:RadTabStrip
    >

    I want to have a different theme eg. FooterTabStrip for the footer. To do this I have...

    1. Entered "FooterTabStrip" into "Skin" in the "Appearance" tab of the footer tabstrip 
    2. Created a new css file in the TabStrip directory under my theme replacing "SitefinityCompany" with "FooterTabStrip" inside the css file.

    It doesn't work. Still displays the header tabstrip appearance which is the default for the theme. What am I missing here.....

    Thanks
    Ian

     

  2. Ian Johnson
    Ian Johnson avatar
    11 posts
    Registered:
    11 Jan 2006
    16 Feb 2009
    Link to this post
    when I said "different theme" - I meant different "skin" sorry!
  3. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    17 Feb 2009
    Link to this post
    Hello Ian Johnson,

    My approach is almost the same as yours.

    1. Create two folders with the names of your skins under one of the themes you use. - let's say Skin1 and Skin2
    2. Then in your skin file put the line below

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

    By doing so, Skin1 will be set as default and embedded skins are disabled.

    3. Then drag and drip two controls on your page. One on the header and another on the footer.
    4. In edit mode of the control change the Skin property with the names of your custom Skin.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  4. Ian Johnson
    Ian Johnson avatar
    11 posts
    Registered:
    11 Jan 2006
    18 Feb 2009
    Link to this post
    Yes - basically what I did should have worked. Now I created my theme "Montebello Theme" from the ones you provided "NewSilver" in particular. I have selected "Montebello Theme" for the template. Everything looks fine except the footer tabstrip which will not change skin.

    What is strange is that I look at the master page template source I see this for both the header and footer tabstrip...

    <div id="ctl00_FooterContent_tm_sitefinity_usercontrols_navigation35_sitetabstrip_ascx1_RadTabstrip1" 
    class="RadTabStrip RadTabStrip_SitefinityCompany RadTabStripTop_SitefinityCompany " 
    SkinsPath="~/App_Themes/NewSilver/Tabstrip"


    "NewSilver/Tabstrip" doesn't even exist - it is now "Montebello Theme/TabStrip" - still called "SitefinityCompany" though. It doesn't matter what I put into "Skin" under "Appearance tab of the "Site Tabstrip" - this code doesn't change.

    This javascript also appears in the footer too.  Notice it too references a theme that simply does not exist on the server... Any ideas what I have stuffed up here??
    <script type="text/javascript">  
    //<![CDATA[
    Sys.Application.initialize();
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadTabStrip, {"_selectedIndex":0,"_skin":"SitefinityCompany","attributes":{"SkinsPath":"~/App_Themes/NewSilver/Tabstrip"},"clientStateFieldID":"ctl00_TopMenu_ctl00_RadTabstrip1_ClientState","selectedIndexes":["0"],"tabData":[{},{},{},{},{},{},{}]}, null, null, $get("ctl00_TopMenu_ctl00_RadTabstrip1"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadTabStrip, {"_align":1,"_selectedIndex":0,"_skin":"SitefinityCompany","attributes":{"SkinsPath":"~/App_Themes/NewSilver/Tabstrip"},"clientStateFieldID":"ctl00_FooterContent_tm_sitefinity_usercontrols_navigation35_sitetabstrip_ascx1_RadTabstrip1_ClientState","selectedIndexes":["0"],"tabData":[{},{},{},{},{},{},{}]}, null, null, $get("ctl00_FooterContent_tm_sitefinity_usercontrols_navigation35_sitetabstrip_ascx1_RadTabstrip1"));
    });
    //]]> 
    </script> 

  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    18 Feb 2009
    Link to this post
    Hello Ian Johnson,

    I am not sure how you have implemented this at your end. Generally the css files should be in two different folders under your theme. Then in the skin file you specify one of the skins you want to be set as default. Then change the Skin property for the second RadTabStrip that will be in the footer of your page. Generally, the theme you are referring has /TabStrip folder with simple style.css file. By default the declaration of the skin file is as the below one, which means that the TabStrip will use  SitefinityCompany skin.

    <telerik:RadTabstrip runat="server" EnableEmbeddedSkins="false" Skin="SitefinityCompany" > 


    You can try hardcode them and see if this helps. It will be easy to look into the matter if you attach your theme with the styles for the RadTabStrip inside it.

    I hope this helps.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Bert
    Bert avatar
    2 posts
    Registered:
    02 Jan 2003
    06 Nov 2009
    Link to this post
    Hi,

    I need a little help.

    I have the same issue and I've looking and trying for hours now to find a solution for something that looks so simple from the posts in this forum and the manual.

    I have two tabstrip controls on one template. One for the main menu for the page and the other for a sub menu.

    I have two skin folders in my theme folder.
    Skin1 and skin2. They both contain a simple css file, only a background selector for test purposes.
    And I have a RadTabStrip.skin file in the theme folder with:

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

    In edit mode I have changed the skin property in the controls to skin1 and skin2. Disabled embedded skins.

    The second control has the default skin, whatever I do. When I change the default skin in the RadTabStrip.skin file, it changes with it.
    I have no idea what I'm doing wrong.

    Thanks,
    Bert
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    08 Nov 2009
    Link to this post
    Hi Bert,

    Use the following declaration for the .skin file

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

    Then set the skins directly form the Skin property of the control you use.


    - Skin1

    .RadTabStrip_Skin1
    {
        background-color:Green;
    }

    -Skin2

    .RadTabStrip_Skin2
    {
        background-color:Red;
    }

    Sincerely yours,
    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.
  8. Bert
    Bert avatar
    2 posts
    Registered:
    02 Jan 2003
    08 Nov 2009
    Link to this post
    Hi Ivan,

    Thanks, your solution works!
    I did exactly as descibed in this post, but I couldn't get it to work. Maybe things changed in time.

    Thanks!
    Regards,
    Bert


Register for webinar
8 posts, 0 answered