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

Forums / Designing with Sitefinity / Anyone have a good RadTabStrip Skin for a Designer?

Anyone have a good RadTabStrip Skin for a Designer?

14 posts, 0 answered
  1. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    30 Oct 2010
    Link to this post
    I don't find any of the built-in skins work well with the designer...has anyone made any before that work better?

    Steve
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    31 Oct 2010
    Link to this post
    Hello Steve,

    If "Designer" means the Control designer, you should be able to use the built-in skins of RadControls inside the Basic tab without problems. The Control Designer uses RadTabStrip control to show "Basic" and Advanced/Properties tab, so if you want to modify its appearance you need to change its css, but this will reflect  all dialogs.

    Best wishes,
    Ivan Dimitrov
    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
  3. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    31 Oct 2010
    Link to this post
    Yeah control designer, and the RadTabStrip is what I'm talking about...using the Sitefinity Skin makes it look like the Basic\Advanced tabs, but that looks a little weird :)

    The "Telerik" skin isn't too too bad, I was just hoping someone had one that looked a little more integrated...maybe I'll fire one up instead.
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    01 Nov 2010
    Link to this post
    Hello Steve,

    You can use the Visual Style Builder to build cool skins. I hope someone from the community shares their designer skins.

    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
  5. Vivek
    Vivek avatar
    5 posts
    Registered:
    17 Nov 2010
    10 Dec 2010
    Link to this post
    Hi,
    I am very new to stiefiinity (only 2 weeks old)
    I like the Site Desingner,
    So How dow I apply the css to the Site Map Tab Strip ?
    In apperience,
    there is css, skin, skinID... I think...
    In the file system, where should I put the css and
    and where should I assign this path ?
    My guess would be CSS...
    a step by step would be very helpful as I have been struggling for a while.
    I am using Sitefinity 3.7 blank project to create a site.

    Thanks in Advance.
    -V-
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    10 Dec 2010
    Link to this post
    Hi Vivek,

    You can take a look at this tutorial - Tutorial: Creating A Custom Skin

    Kind regards,
    Ivan Dimitrov
    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
  7. Vivek
    Vivek avatar
    5 posts
    Registered:
    17 Nov 2010
    10 Dec 2010
    Link to this post

    Hi Ivan,
    I read the tutorial but it talks about implementing a page but what I would like to do is to add
    site Tabstrip onto page that is laid out using a master page.
    When editing the Tabstrip,
    under Site Tabstrip Properties there is Appearance,
    that has three options
    CssClass
    SkinID
    Skin
    According to http://www.telerik.com/help/aspnet-ajax/tab_appearanceskins.html
    I am supposed to be able to create a directory under Skin folder and save the css and related images in the directory under it.
    But when I assign the skinname to Skin in the the TapStrip control I get the following error.
    Also when I drop the control on the content placeholder, I am not sure where I would set EnableEmbeddedSkin = false

    Please advise,
    Thanks.
    -V-



     

    Server Error in '/Sitefinity' Application.

    Telerik.Web.UI.RadTabStrip with ID='RadTabstrip1' was unable to find embedded skin with name 'VTabStrip'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.InvalidOperationException: Telerik.Web.UI.RadTabStrip with ID='RadTabstrip1' was unable to find embedded skin with name 'VTabStrip'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false.

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [InvalidOperationException: Telerik.Web.UI.RadTabStrip with ID='RadTabstrip1' was unable to find embedded skin with name 'VTabStrip'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false.]
       Telerik.Web.SkinRegistrar.GetEmbeddedSkinAttributes(ISkinnableControl control, Type controlType) +684
       Telerik.Web.SkinRegistrar.RegisterCssReferences(ISkinnableControl _control) +241
       Telerik.Web.UI.RadTabStrip.OnPreRender(EventArgs e) +32
       System.Web.UI.Control.PreRenderRecursiveInternal() +108
       System.Web.UI.Control.PreRenderRecursiveInternal() +224
       System.Web.UI.Control.PreRenderRecursiveInternal() +224
       System.Web.UI.Control.PreRenderRecursiveInternal() +224
       System.Web.UI.Control.PreRenderRecursiveInternal() +224
       System.Web.UI.Control.PreRenderRecursiveInternal() +224
       System.Web.UI.Control.PreRenderRecursiveInternal() +224
       System.Web.UI.Control.PreRenderRecursiveInternal() +224
       System.Web.UI.Control.PreRenderRecursiveInternal() +224
       System.Web.UI.Control.PreRenderRecursiveInternal() +224
       System.Web.UI.Control.PreRenderRecursiveInternal() +224
       System.Web.UI.Control.PreRenderRecursiveInternal() +224
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3394
    


    Version Information: Microsoft .NET Framework Version:2.0.50727.4952; ASP.NET Version:2.0.50727.4955


  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    10 Dec 2010
    Link to this post
    Hello Vivek,

    Open SiteTabStrip control for editing  and expand Misc, then click on the edit button for "TabStrip" property , expand Behavior and set EnableEmbeddedSkins to false.
    Go back to the main edit screen and expand Appearance where you should set "Skin" property of the control.


    Kind regards,
    Ivan Dimitrov
    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
  9. Vivek
    Vivek avatar
    5 posts
    Registered:
    17 Nov 2010
    10 Dec 2010
    Link to this post

    Thanks, that did make the error go away but my styles are still not being applied.
    This is what I have.
    Under the skin folder I have a folder called VTabStrip
    Under VTabStrip have a folder called TabStrip and
    a TabStrip.VTabStrip.css
    The css was created using Stylebuilder.teleric.com and the contents are below.
    but when I assign VTabStrip to the Skin,
    nothing happens.
    I can use any advise you may have.

    thanks.
    Viivek

    .RadTabStrip_VTabStrip .rtsLI,
    .RadTabStrip_VTabStrip .rtsLink
    {
     color: #2b2b29;
     font: 12px/26px "Segoe UI", Arial, sans-serif;
    }

    .RadTabStrip_VTabStrip .rtsLevel .rtsLink:hover,
    .RadTabStrip_VTabStrip .rtsLevel .rtsSelected,
    .RadTabStrip_VTabStrip .rtsLevel .rtsSelected:hover
    {
     text-decoration: underline;
    }

    .RadTabStrip_VTabStrip .rtsLevel1 .rtsLink:hover,
    .RadTabStrip_VTabStrip .rtsLevel1 .rtsSelected,
    .RadTabStrip_VTabStrip .rtsLevel1 .rtsSelected:hover
    {
     text-decoration: none;
    }

    .RadTabStripLeft_VTabStrip .rtsSeparator,
    .RadTabStripRight_VTabStrip .rtsSeparator
    {
     background: #8a8a7f;
    }

    /* <disabled tabs> */
    .RadTabStrip_VTabStrip .rtsDisabled
    {
     color: #545454;
    }
    /* </disabled tabs> */

    /* <scrolling arrows> */
    .RadTabStrip_VTabStrip .rtsNextArrow,
    .RadTabStrip_VTabStrip .rtsPrevArrow,
    .RadTabStrip_VTabStrip .rtsPrevArrowDisabled,
    .RadTabStrip_VTabStrip .rtsNextArrowDisabled
    {
     background-image: url('TabStrip/TabStripStates.png');
    }
    /* </scrolling arrows> */

    /* <tab backgrounds> */

    .RadTabStripTop_VTabStrip .rtsLevel { background: #d1d1c7; }

    .RadTabStripTop_VTabStrip .rtsLevel1 { background-color: transparent; }

    .RadTabStripTop_VTabStrip .rtsLevel .rtsLink,
    .RadTabStripTop_VTabStrip .rtsLevel .rtsOut { background-image: none; }

    .RadTabStripTop_VTabStrip .rtsLevel1 .rtsLink,
    .RadTabStripTop_VTabStrip .rtsLevel1 .rtsOut,
    .RadTabStripBottom_VTabStrip .rtsLevel1 .rtsLink,
    .RadTabStripBottom_VTabStrip .rtsLevel1 .rtsOut,
    .RadTabStripTop_VTabStrip_Baseline .rtsLevel1,
    .RadTabStripBottom_VTabStrip_Baseline .rtsLevel1 { background-image: url('TabStrip/TabStripStates.png'); }

    .RadTabStripLeft_VTabStrip .rtsLink,
    .RadTabStripRight_VTabStrip .rtsLink { background-image: url('TabStrip/TabStripVStates.png'); }

    .RadTabStripLeft_VTabStrip .rtsLast .rtsLink,
    .RadTabStripRight_VTabStrip .rtsLast .rtsLink
    {
     border-bottom: 1px solid #949492;
    }

    /* </tab backgrounds> */

    /* <background positioning: overlapping tabs> */

    /* <orientation: top> */

    .RadTabStripTop_VTabStrip .rtsLevel1 .rtsLink { background-position: 0 -52px; }
    .RadTabStripTop_VTabStrip .rtsLevel1 .rtsFirst .rtsLink { background-position: 0 0; }
    .RadTabStripTop_VTabStrip .rtsLevel1 .rtsOut { background-position: 100% -52px; }
    .RadTabStripTop_VTabStrip .rtsLevel1 .rtsLast .rtsOut { background-position: 100% 0; }

    .RadTabStripTop_VTabStrip .rtsLevel1 .rtsLI .rtsSelected { background-position: 0 -26px; }
    .RadTabStripTop_VTabStrip .rtsLevel1 .rtsSelected .rtsOut { background-position: 100% -78px; }
    .RadTabStripTop_VTabStrip .rtsLevel1 .rtsLI .rtsAfter { background-position: 0 -78px; }

    .RadTabStripTop_VTabStrip .rtsLevel1 .rtsLast .rtsSelected .rtsOut { background-position: 100% -26px; }

    .RadTabStripTop_VTabStrip_Baseline .rtsLevel1 { background-position: 0 100%; background-repeat: repeat-x; }

    /* </orientation: top> */

    /* <orientation: bottom> */

    .RadTabStripBottom_VTabStrip .rtsLevel1 .rtsLink { background-position: 0 -130px; }
    .RadTabStripBottom_VTabStrip .rtsLevel1 .rtsFirst .rtsLink { background-position: 0 -182px; }
    .RadTabStripBottom_VTabStrip .rtsLevel1 .rtsOut { background-position: 100% -130px; }
    .RadTabStripBottom_VTabStrip .rtsLevel1 .rtsLast .rtsOut { background-position: 100% -182px; }

    .RadTabStripBottom_VTabStrip .rtsLevel1 .rtsLI .rtsSelected { background-position: 0 -156px; }
    .RadTabStripBottom_VTabStrip .rtsLevel1 .rtsSelected .rtsOut { background-position: 100% -104px; }
    .RadTabStripBottom_VTabStrip .rtsLevel1 .rtsLI .rtsAfter { background-position: 0 -104px; }

    .RadTabStripBottom_VTabStrip .rtsLevel1 .rtsLast .rtsSelected .rtsOut { background-position: 100% -156px; }

    .RadTabStripBottom_VTabStrip_Baseline .rtsLevel1 { background-position: 0 -599px; background-repeat: repeat-x; }

    /* </orientation: bottom> */

    /* <orientation: right> */

    .RadTabStripRight_VTabStrip .rtsUL .rtsLink,
    .RadTabStripRight_VTabStrip .rtsUL .rtsLI .rtsDisabled:hover { background-position: 100% 0; text-align: left; }
    .RadTabStripRight_VTabStrip .rtsUL .rtsLink:hover { background-position: 100% -200px; }
    .RadTabStripRight_VTabStrip .rtsUL .rtsSelected,
    .RadTabStripRight_VTabStrip .rtsUL .rtsSelected:hover { background-position: 100% -400px; }

    /* </orientation: right> */

    /* <orientation: top (RTL)> */

    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsLink
    {
     padding-left: 0;
     padding-right: 9px;
    }

    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsOut
    {
     padding-left: 9px;
     padding-right: 0;
    }

    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsLink,
    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsOut { background-image: url('TabStrip/TabStripStates_rtl.png'); }

    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsLink { background-position: 100% -52px; }
    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsFirst .rtsLink { background-position: 100% 0; }
    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsOut { background-position: 0 -52px; }
    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsLast .rtsOut { background-position: 0 0; }

    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsLI .rtsSelected { background-position: 100% -26px; }
    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsSelected .rtsOut { background-position: 0 -78px; }
    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsLI .rtsAfter { background-position: 100% -78px; }

    .RadTabStripTop_VTabStrip_rtl .rtsLevel1 .rtsLast .rtsSelected .rtsOut { background-position: 0 -26px; }

    /* </orientation: top (RTL)> */

    /* </background positioning: overlapping tabs> */

     

  10. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    10 Dec 2010
    Link to this post
    Did you attach the CSS file to your template with the CssFileLink control?
  11. Vivek
    Vivek avatar
    5 posts
    Registered:
    17 Nov 2010
    10 Dec 2010
    Link to this post
    Hi Steave,
    I am too new to find the cssfile link conrtol.
    Is it avaliable in 3.7 ?
    I will look on the Forum to see How I can add it.
    Is it possiable to assign the file to CSS in the Behavior of Tab strip ?

    Thanks.
    -V-

     
  12. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    10 Dec 2010
    Link to this post
    The CssFileLink control is a sitefinity control which will allow you to link in a CSS file by relative path (SUPER handy)

    So the way it works is that when you specify your skin name, and set enableembeddedskins to false, it then is going to set the classes on the control to be using that skin name.  So going along with that then, the page needs to know what those sytles are, which is where linking the stylesheet comes in.  So it all should work beautifully as long as those 3 pieces are there.

    Use firefox and firebug (the net tab) to make sure the CSS File is coming down properly

    You can find the CssFileLink control inside of the Telerik.Cms.Web.UI Assembly.  So in your webconfig, (if there isnt one already), put a mapping to that assembly like this

    <add tagPrefix="telerik" namespace="Telerik.Cms.Web.UI" assembly="Telerik.Cms.Web.UI" />

    In your ascx now you should be able to do
    <telerik:CssFileLink id="myCss" runat="server" FileName="~/FOLDER/FILE.css" />

    I think I have that right anyway... :)
  13. Vivek
    Vivek avatar
    5 posts
    Registered:
    17 Nov 2010
    10 Dec 2010
    Link to this post
    Thanks Steve,
    i will try that.
    But I would like to know how at add the skin to the TabStrip control by editing the control.
    I think that is a really nice feature, I just need to figuar out how to use it.
    -V-
  14. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    10 Dec 2010
    Link to this post
    You did!....actually...kindof

    You told the RadTabStrip to use Skin X, and said it's skin isn't embedded in the Telerik.Web.UI assembly
    ...but then you still have the issue of providing the RadTabStrip WITH the style.

    It just needs the styles, doesn't matter where they come from...if the TabStrip lives on the front end, you can just throw the styles inside App_Themes and it'll come down automatically.  Or you can edit your main css file and just paste in the TabStripStyles you need and the page should just work with them (so you dont need to download 2 css files)
Register for webinar
14 posts, 0 answered