[urgent] Please help! How do I custom skin of panel bar

3 posts, 1 answers
  1. louis chan
    louis chan avatar
    50 posts
    Member since:
    Feb 2010

    Posted 16 Mar 2010 Link to this post

    Hi all,
    It is not easy for me to set custom css into each of radcontrol...Now I have a question, I have downloaded a style sheet from telerik and read this topic already:
    http://www.telerik.com/help/aspnet-ajax/panel_appearancecreatingacustomskin.html
    But I cannot change its css with the following code and the result is attached.

    style sheet 
     
    .RadPanelBar_JonDan 
        background#f8f8f8 !Important; 
        font-familyVerdanaArialhelveticasans-serif !Important; 
        font-size11px !Important; 
        line-height24px !Important; 
     
    .RadPanelBar_JonDan .rpRootGroup 
        bordersolid 1px #f0f0f0
     
    .RadPanelBar_JonDan .rpRootGroup .rpLink 
        background#fff !Important; 
        font-weightbold
        font-size12px
        bordernone !Important; 
        color#cc0000
     
    .RadPanelBar_JonDan .rpRootGroup .rpFocused, 
    .RadPanelBar_JonDan .rpRootGroup .rpLink:hover 
        background#fff url('PanelBar/RootItemBg.png') 0 -1px !Important; 
        color#fff
     
    .RadPanelBar_JonDan .rpGroup .rpLink 
        background#f8f8f8 none !Important; 
        border-topsolid 1px #fff !Important;  
        border-bottomsolid 1px #f0f0f0 !Important; 
        border-leftsolid 1px #f8f8f8 !Important; 
        border-rightsolid 1px #f8f8f8 !Important; 
        font-weightnormal
        color#666 !Important; 
     
    .RadPanelBar_JonDan .rpGroup .rpFocused, 
    .RadPanelBar_JonDan .rpGroup .rpLink:hover 
        background#fff none !Important; 
        border-topsolid 1px #fff !Important;  
        border-bottomsolid 1px #e6e6e6 !Important; 
        border-leftsolid 1px #f8f8f8 !Important; 
        border-rightsolid 1px #f8f8f8 !Important; 
        font-weightnormal
        color#ff0000 !Important; 
     
    .RadPanelBar_JonDan .rpOut 
        border-color#f8f8f8 !Important; 
     
     
    .RadPanelBar_JonDan .rpExpanded 
        border-color#f8f8f8
     
     
    /* <disabled items> */ 
    .RadPanelBar_JonDan .rpDisabled, 
    .RadPanelBar_JonDan .rpDisabled:hover 
        color#ccc
     
    .RadPanelBar_JonDan .rpDisabled:hover 
        border-color#002d96
     
    .RadPanelBar_JonDan .rpDisabled .rpOut, 
    .RadPanelBar_JonDan .rpDisabled:hover .rpOut 
        border-color#89aee5
    /* </disabled items> */ 
     
    /* <expand arrows> */ 
    .RadPanelBar_JonDan .rpExpandable .rpText, 
    .RadPanelBar_JonDan .rpExpanded .rpText 
        background-colortransparent
        background-imageurl('PanelBar/Expandable.gif'); 
     
    /* </expand arrows> */ 
     
    /*      <expand arrows override> */ 
    .RadPanelBar .rpExpandable .rpText, 
    .RadPanelBar .rpExpanded .rpText 
        padding-right20px
        background-repeatno-repeat
     
    .RadPanelBar_rtl .rpExpandable .rpText, 
    .RadPanelBar_rtl .rpExpanded .rpText 
        padding-left20px
     
    .RadPanelBar_rtl .rpGroup .rpText 
        padding: 0 10px
     
    .RadPanelBar .rpExpandable .rpText { background-position: 100% 0; } 
    .RadPanelBar .rpExpanded .rpText { background-position: 100% -176px; } 
    .RadPanelBar_rtl .rpExpandable .rpText { background-position: 0 0; } 
    .RadPanelBar_rtl .rpExpanded .rpText { background-position: 0 -176px; } 
     
    .RadPanelBar .rpExpandable:hover .rpText, 
    .RadPanelBar .rpExpandable.rpSelected .rpText, 
    .RadPanelBar .rpExpandable.rpSelected:hover .rpText 
        background-position: 100% -337px
     
    .RadPanelBar .rpExpanded:hover .rpText, 
    .RadPanelBar .rpExpanded.rpSelected .rpText, 
    .RadPanelBar .rpExpanded.rpSelected:hover .rpText 
        background-position: 100% -476px
     
    .RadPanelBar_rtl .rpExpandable:hover .rpText, 
    .RadPanelBar_rtl .rpExpandable.rpSelected .rpText, 
    .RadPanelBar_rtl .rpExpandable.rpSelected:hover .rpText 
        background-position: 0 -337px
     
    .RadPanelBar_rtl .rpExpanded:hover .rpText, 
    .RadPanelBar_rtl .rpExpanded.rpSelected .rpText, 
    .RadPanelBar_rtl .rpExpanded.rpSelected:hover .rpText 
        background-position: 0 -476px
     
    /*      </expand arrows override> */ 
     
    /* <subitems> */ 
    .RadPanelBar_JonDan .rpGroup 
        background-color#fff
     
    .RadPanelBar_JonDan .rpGroup .rpLink, 
    .RadPanelBar_JonDan .rpGroup .rpTemplate 
        color#000
        background-colortransparent
        background-imagenone;      
        line-height20px
        min-height20px
    * html .RadPanelBar_JonDan .rpGroup .rpLink { height20px; } 
     
    .RadPanelBar_JonDan .rpGroup .rpLink 
        background-colortransparent
        background-imagenone
         
        padding1px
        margin: 0 1px
     
    .RadPanelBar_JonDan .rpGroup .rpOut 
        border-bottom: 0; 
        margin-right3px
     
    /* <subitems (disabled)> */ 
    .RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled, 
    .RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover, 
    .RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover .rpOut 
        background-imagenone
     
    .RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled, 
    .RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover 
        color#999
        text-decorationnone
        background-color#fff
        border: 0; 
        padding1px
     
    .RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover .rpOut 
        border-bottom: 0; 
    /* </subitems (disabled)> */ 
     
    /* <subitems> */ 

    ascx
    <link href="../Styling/ProductPanel.css" rel="stylesheet" type="text/css" />
    <telerik:RadPanelBar ID="RadPanelBar1" Runat="server" DataFieldID="productID"  
                DataFieldParentID="productParentID" DataSourceID="adsProducts"  
                DataTextField="productTitle" DataValueField="productID" Width="250px" EnableEmbeddedSkins="false" Skin="RadPanelBar_JonDan"
            </telerik:RadPanelBar> 

  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Mar 2010 Link to this post

    Hi Louis,

    Please make sure that you set the SkinName properly. I hope your custom skin will work fine if you change Skin="JonDan" for your PanelBar.

    Hope it helps,

    Shinu.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. louis chan
    louis chan avatar
    50 posts
    Member since:
    Feb 2010

    Posted 16 Mar 2010 Link to this post

    Great, that's work! thx a lot!
Back to Top