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

Forums / Designing with Sitefinity / theme and skinfile with PanelBar

theme and skinfile with PanelBar

6 posts, 2 answered
  1. Roy
    Roy avatar
    28 posts
    Registered:
    20 Jan 2009
    21 Dec 2009
    Link to this post
    Hello,

    In my project I have created a theme folder  inside the App_Themes folder that holds my custom styles.
    Until now I have always used the RadMenu control and modified the layout by adding a skin file, and customize the css stylesheet.

    Now I would like the Site Panelbar for my menu. I studied the "how to create a custom skin" article  in the helpfile. However the example uses a standard folder to hold the css file and images and does not mention how to use a skin file and what the content of the skin file should be. My questions :

    1. What should be the name of the skin file ( RadPanelbar.skin ? )
    2. What should be the content of the skin file?
    3. What should be the name of the CSS file (I suppose the same as the skinname set in the skinfile ?).
    4. What settings do I need to change on the Site PanelBar to use the skinfile.

    Kind regards,

    Roy


  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    21 Dec 2009
    Link to this post
    Hello Roy,

    1. What should be the name of the skin file ( RadPanelbar.skin ? )

    You can use RadPanelBar.skin as a skin file name

    2. What should be the content of the skin file?


    below is a sample of the skin file content

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


    3. What should be the name of the CSS file (I suppose the same as the skinname set in the skinfile ?).

    You can use styles.css as a name of the stylesheet.

    4. What settings do I need to change on the Site PanelBar to use the skinfile.

    You can edit the Skin property of the SitePanelBar through UI. You can take a look at the attached screenshot prepared for your convenience.

    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. Roy
    Roy avatar
    28 posts
    Registered:
    20 Jan 2009
    22 Dec 2009
    Link to this post
    Hello Ivan,

    I'm still having problems, the panelbar doesn't pick up the style defined. At the moment I have the following dir structure

    ../App_Themes
                / Etiquette
                        - Etiquette.css    
                        - Etiquette.skin
                / Panelbar
                        / Img
                        - styles.css

    the content of my skin file:

     

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

    The styles.css file looks like this:
    .lbox .RadPanelbar_Default  
    {  
        width190px;  
        _margin-top: 0;  
    }  
    * + html .lbox .RadPanelbar_Default  
    {  
        margin-top: 0;  
    }  
    .RadPanelbar_Default  
    {  
        margin: 1em auto 0;  
        whitewhite-spacenowrap;  
        overflowhidden;  
    }  
    .RadPanelbar_Default *  
    {  
        /*testing*/ 
    }  
     
    .RadPanelbar_Default .text  
    {  
        color#333333;  
        padding: 0 0 0 26px;  
        fontnormal 11px arial,sans-serif;  
    }  
     
    .RadPanelbar_Default .image  
    {  
        margin4px 0px;  
    }  
     
    .RadPanelbar_Default .group  
    {  
        border-bottom1px solid #e3e3e3;  

    The skin property of the Site Panelbar is set to "Default".

    Am I missing something?

    Kind regards,

    Roy


  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    22 Dec 2009
    Link to this post
    Hello Roy,

    Try renaming the css class name from .RadPanelbar to .RadPanelBar. You can find attached a working example.

    Best wishes,
    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
  5. Roy
    Roy avatar
    28 posts
    Registered:
    20 Jan 2009
    22 Dec 2009
    Link to this post
    Hi Ivan,

    Thanks for your help. I've got it working now.
    Do you know where I can find the default stylesheet and images for the panelbar?
     
    Roy
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    22 Dec 2009
    Link to this post
    Hi Roy,

    I attached all default skins and images to this thread. You can obtain them in the future if you make a download from Telerik.com

    Best wishes,
    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
Register for webinar
6 posts, 2 answered