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

Forums / Designing with Sitefinity / Skinning RadTabStrip

Skinning RadTabStrip

15 posts, 1 answered
  1. andersleet
    andersleet avatar
    155 posts
    Registered:
    03 Jun 2009
    14 Jul 2009
    Link to this post
    Hi everyone,

    I am having issues with skinning my RadTabStrip. The problem is really only apparent with IE, but I need it to look uniform across all browsers.

    Here are some screenshots of what I am talking about:


    As you can see, IE wants to align the menu to the left, whereas Chrome (and Firefox, and Opera, and Safari...) display it properly, right-aligned.

    I placed a skin file inside of my App_Themes\MyTheme folder along with a style sheet. I also created the following folder structure:  ~/RadControls/TabStrip/Skins/MyTheme and put the same skin/style sheet inside this folder. After restarting my web server, I went to edit the properties of the RadTabStrip and put 'MyTheme' inside the Skin property box. Once I clicked the done button, I got this error message:

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


    I am unsure of where I could edit the actual markup that holds the tabstrip since it was added to the template, so I am unsure of where to go next.

    Thanks guys,
    anders

  2. andersleet
    andersleet avatar
    155 posts
    Registered:
    03 Jun 2009
    14 Jul 2009
    Link to this post
    Well I figured out that the EnableEmbeddedSkins property was 'hidden' inside the edit menu. I also found an align property that allowed me to fix the issue I was having with IE (unless the stylesheet kicked in), but I am still unable to see my changes in the CSS file I made on the actual page.

    Thanks again,
    anders
  3. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    16 Jul 2009
    Link to this post
    Hello andersleet,

    If you have disabled the embedded skins  and you have a custom skin your control should use the custom skin you have created. The styling and appearance of the controls should come from the embedded resource in the RadTabStrip control and your custom styles.css file. Does any simple statements as background: Red returns any results? It is possible that some of the classes are mixed in your css and they are no rendered correctly.

    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. andersleet
    andersleet avatar
    155 posts
    Registered:
    03 Jun 2009
    16 Jul 2009
    Link to this post
    I suppose it is possible, but I do not think I am having CSS rendering problems.  Maybe if I show you my code and CSS, you can help me with the issue.

    Here is the original CSS for the menu from the layout:

    /* Menu */ 
     
    #menu { 
        floatrightright
        margin-top50px
     
    #menu ul { 
        margin: 0; 
        list-stylenone
     
    #menu li { 
        displayinline
     
    #menu a { 
        displayblock
        floatleft
        background#0D859C
        margin-right10px
        padding5px 15px
        text-aligncenter
        text-decorationnone
        font-familyArialHelveticasans-serif
        font-weightnormal
        font-size13px
        color#FFFFFF
     
    #menu a:hover { 
        background-color:#95C512
     
    #menu .current_page_item a { 
     

    Here is an image of my project's file structure:


    As you can see by my notations, I am unsure of where the skin files should be going. I remember one of the webinars or video tutorials had it in the 'RadControls' folder, but in that particular demonstration the RadControls folder was already there with many other controls and folders inside of it. I had to manually create my 'RadControls/Tabstrip/.../' folder structure.

    My actual skin file is empty, is this correct? Here is the contents of my styles.css that is with my RadMenu.skin:

    .RadTabStrip_Personified .wrap { 
        floatrightright
        margin-top50px
        margin-right10px
        padding5px 15px
        background#0D859C
        color#000000
        text-aligncenter
        text-decorationnone
        font-familyArialHelveticasans-serif
        font-weightnormal
        font-size20px
    .RadTabStrip_Personified a { 
        displayblock
        floatleft

    Once again, I am not sure how/what needs to go in here. I tried to emulate what I learned on the video/webinar, but I do not have a handle on it yet.  Here is a screenshot of the configuration for the RadTabStrip:


    I put 'Personified' in both the 'SkinID' and 'Skin' boxes (not at the same time), and I saw no difference either way.

    So when you say the 'embedded resource in the RadTabStrip control', what do you mean by that? I do appologize for being extremely noobish, but I am trying to get a handle on how everything works in a short amount of time :). I do sincerely thank you for all the assistance you have provided thus far!

    Kind regards,
    anders

  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    17 Jul 2009
    Link to this post
    Hello andersleet,

    RadControls folder is obsolete. It was used several release before building all RadControls in one assemble. You can take a look at Tutorial: Creating A Custom Skin

    'embedded resource in the RadTabStrip control', - each control has embedded WebResources.

    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.
  6. andersleet
    andersleet avatar
    155 posts
    Registered:
    03 Jun 2009
    17 Jul 2009
    Link to this post
    Hi Ivan,

    Thanks for the link I think I overlooked that one.  One question: It is saying that I should copy the default skin files from 'program files\telerik\<version>\skins\default' folder, but I do not have this. Could you send me these files?

    Thanks,
    anders
  7. andersleet
    andersleet avatar
    155 posts
    Registered:
    03 Jun 2009
    17 Jul 2009
    Link to this post
    Hey Ivan,

    I am getting the hang of this whole process now, and for the record you were correct about CSS overrides. I had forgotten to comment out the section in my CSS for the menu :P.

    For future people that are getting into this, may I suggest these links:

    Creating a Custom Skin (thanks Ivan)

    I am having one strange css issue.  I took a screenshot of my nav bar and using photoshop I have determined that there is an extra 5px padding (or margin?) on the right side of each element. Utilizing Web Developer extension in FireFox, this is what I discovered:

    http://localhost/sf_gsow/WebResource.axd?d=bbp6uY8t5wi5v8UC82mvUwmIbmMoW-wtWjr_FMbxOs637E7dXpj80DCpvwElG-0uv8DojZr--W6UpiPunO9Fpw2&t=633782379440000000

    .RadTabStrip .rtsOut, .RadTabStripVertical .rtsOut /*(line 130)*/ 
        displayblock
        padding-right9px

    Would you have any ideas on how to counteract this?

    Thanks again for all your help! Like seriously :P

    anders


  8. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    17 Jul 2009
    Link to this post
    Hello andersleet,

    The default skins that are mentioned in the article are embedded in the dlls. This means that you can use them simply by doing the following declaration in your skin file:
    <telerik:RadTabStrip 
        runat="server"  
        Skin="Vista"  
        EnableEmbeddedSkins="true" 
        > 
    </telerik:RadMenu> 

    If you want to build a custom skin by modifying a default one I would highly recommend at taking a look at Telerik Visual Style Builder. This is a tool for visually creating skins and styles for rad controls. After you have created your skin you will be able to download it as an archive and add it to your project.

    As for the the padding issue, you can override those properties in your custom CSS by using !important.

    I hope that this information will help you. Please feel free to contact us if you have more questions.

    All the best,
    Rado
    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.
    Answered
  9. andersleet
    andersleet avatar
    155 posts
    Registered:
    03 Jun 2009
    17 Jul 2009
    Link to this post
    Thanks Rado for that link, that will be extremely useful.  Right before you replied I added this CSS to my RadTabStrip stylesheet:

    .RadTabStrip .rtsOut 
        padding-right:4px!important; 
     

    And this seems to have solved my extra padding problem, as you suggested.

    Thanks again!
    anders

  10. Phill Hodgkinson
    Phill Hodgkinson avatar
    362 posts
    Registered:
    10 Nov 2004
    21 Jul 2009
    Link to this post
    Hi there,

    I'm wondering for TabStrip and PanelBar if there is a way to prevent the WebResource.axd css from being loaded entirely? In both cases I'm overriding practically every element, so not only to I need to add !important to every line in my css, I'm having to load two css files (axd files) that I don't need. You'd think setting "EnabledEmbeddedSkins=false" would do the trick but for these two controls they don't seem to have any effect.
    Is there something I'm missing?

    Thanks again and sorry to jump in on this thread, but it is a very similar issue.
    Cheers,
    Phill
  11. andersleet
    andersleet avatar
    155 posts
    Registered:
    03 Jun 2009
    21 Jul 2009
    Link to this post
    I believe what you are looking for is 'EnableEmbeddedBaseStylesheet'. This is under Tab Strip > Edit > Properties > Misc > TabStrip. Click the 'edit' button next to the TabStrip text box and in the new properties box, it is under 'Appearance'.

    Hopefully this helps!

    Regards,
    anders
  12. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    21 Jul 2009
    Link to this post
    Hi andersleet,

    Please take a look at the following article that describes how to disable embedded resources.

    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.
  13. Phill Hodgkinson
    Phill Hodgkinson avatar
    362 posts
    Registered:
    10 Nov 2004
    21 Jul 2009
    Link to this post
    Thanks Anders and Ivan, EnableEmbeddedBaseStylesheet was the specific one I was looking for but also good to know where to find all the other options as well.

    Thanks again!
    Phill
  14. andersleet
    andersleet avatar
    155 posts
    Registered:
    03 Jun 2009
    21 Jul 2009
    Link to this post
    No problem, Phill.

    Take it easy,
    anders
  15. Sarah Masood
    Sarah Masood avatar
    19 posts
    Registered:
    18 May 2010
    21 Jun 2010
    Link to this post
    hi 
    1) i want to display a line in bottom of link when it is selected .(see attachment)
    i am having problem in displayin border-bottem property in Radtab strip css file

    my css coad to display bottom border is this ,but its not displayin bottom border

    .

     

    .RadTabStrip_mm a.rtsSelected:hover .rtsOut, .RadTabStrip_mm.rtsSelected:active .rtsOut

     

    {

     

     

    color:red;

     

     

     

    border-bottom:solid 1px red;

     

     

    }


    2) i want to display line between links like this in rad tab strip how do i get this? 

    Home | service |..

Register for webinar
15 posts, 1 answered