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

Forums / Developing with Sitefinity / How to set radpanelbar style sheet from Telerik.Cms.Web.UI.CssFileLink

How to set radpanelbar style sheet from Telerik.Cms.Web.UI.CssFileLink

2 posts, 1 answered
  1. CafeDelMar
    CafeDelMar avatar
    28 posts
    Registered:
    06 May 2007
    23 May 2010
    Link to this post
    Dear Telerik Team

    How to set radpanelbar style sheet from Telerik.Cms.Web.UI.CssFileLink?

    I've tried but it doesn' work to myradpanelbar

    FYI, this is my code

    MyCommandPanel.cs
    public class MyCommandPanel : ViewModeControl<MyControlPanel>, ICommandPanel
    {
            .....
            protected virtual CssFileLink MyProjectCss
            {
                get
                {
                    return base.Container.GetControl<CssFileLink>("myProjectCss", true);
                }
            }
             
            protected virtual RadPanelBar MyRadPanelBar
            {
                get
                {
                    return base.Container.GetControl<RadPanelBar>("myRadPanelBar", true);
                }
            }
      
            protected override void InitializeControls(Control viewContainer)
            {
                 .....
                 this.MyRadPanelBar.EnableEmbeddedBaseStylesheet = true;
                 .....
            }
    [WebSysTemplate(layoutTemplateName,"CommandPanelLayoutTemplate","/MyProject/",false,"2010-05-15")]
               
            public override string LayoutTemplatePath
            {
                get
                {
                    return base.LayoutTemplatePath;
                }
                set
                {
                    base.LayoutTemplatePath = value;
                }
            }

            /// <summary>
            /// Gets the name of the embedded layout template. This property must be overridden to provide the path (key) to an embedded resource file.
            /// </summary>

            protected override string LayoutTemplateName
            {
                get
                {
                    return layoutTemplateName;
                }
            }
               public const string layoutTemplateName = "My.Project.Resources.ControlTemplates.Backend.MyCommandPanel.ascx
     
    }
     
    MyCommandPanel.ascx
    <%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %>
     
    <sf:CssFileLink ID="myProjectCss" runat="server" EmbeddedFileName="My.Project.Resources.ControlTemplates.Backend.MyProjectStyle.css" />
     
    <telerik:RadPanelBar ID="MyRadPanelBar" runat="server" CssClass="RadPanelBar_Sitefinity">
    </telerik:RadPanelBar>

    MyProjectStyle.css
    div.RadPanelBar_Sitefinity .rpRootGroup
    {
        border: 0;
        background-color: #efefef;
    }
     
    .RadPanelBar_Sitefinity .rpLink,
    .RadPanelBar_Sitefinity .rpTemplate
    {
        color: #000;
        font: bold 12px/24px Arial, Helvetica, sans-serif;
    }
     
    * + html div.RadPanelBar_Sitefinity .rpItem
    {
        display: inline-block;
        font-size: 0;
        line-height: 0;
    }
     
    * html div.RadPanelBar_Sitefinity .rpItem
    {
        display: inline-block;
        font-size: 0;
        line-height: 0;
    }
     
    div.RadPanelBar_Sitefinity .rpLast
    {
        border-width: 1px 0;
    }
     
    div.RadPanelBar_Sitefinity .rpLink,
    div.RadPanelBar_Sitefinity .rpGroup .rpLink
    {
        border: 0;
        padding: 1px;
    }
     
    div.RadPanelBar_Sitefinity .rpLink .rpOut,
    div.RadPanelBar_Sitefinity .rpGroup .rpLink .rpOut
    {
    /*  margin: 1px 0 0 1px;*/
        padding-bottom: 1px;
        border-bottom: 0;
    }
     
    /*div.RadPanelBar_Sitefinity_rtl .rpLink .rpOut,
    div.RadPanelBar_Sitefinity_rtl .rpGroup .rpLink .rpOut
    {
        margin: 1px 1px 0 0;
    }*/
     
    div.RadPanelBar_Sitefinity .rpGroup .rpLink .rpOut
    {
        padding-bottom: 0;
    }
     
    /* compensate for borders */
     
    div.RadPanelBar_Sitefinity .rpLink:hover,
    div.RadPanelBar_Sitefinity .rpGroup .rpLink:hover
    {
        padding: 0;
        border: 1px solid #d6d6d6;
        background: transparent url('PanelBar/RootItemBg.png') no-repeat 0 0;
    }
     
    div.RadPanelBar_Sitefinity .rpRootGroup .rpFocused,
    div.RadPanelBar_Sitefinity .rpRootGroup .rpFocused:hover,
    div.RadPanelBar_Sitefinity .rpRootGroup .rpSelected,
    div.RadPanelBar_Sitefinity .rpRootGroup .rpSelected:hover
    {
        border: 0;
        padding: 1px;
        background-color: #999;
        background-image: none;
        color: #FFF;
    }
     
    /* <disabled items> */
    div.RadPanelBar_Sitefinity .rpDisabled,
    div.RadPanelBar_Sitefinity .rpDisabled:hover
    {
        color: #bbb;
        cursor: default;
        background-image: none;
        border: 0;
        padding: 1px;
    }
     
    div.RadPanelBar_Sitefinity .rpDisabled .rpOut,
    div.RadPanelBar_Sitefinity .rpDisabled:hover .rpOut
    {
        padding-bottom: 1px;
        border: 0;
    }
     
    /* </disabled items> */
     
    /* <expand arrows> */
    .RadPanelBar_Sitefinity .rpExpandable .rpOut,
    .RadPanelBar_Sitefinity .rpExpanded .rpOut
    {
        background-color: transparent;
        background-image: url('PanelBar/Expandable.png');
        background-repeat: no-repeat;
    }
     
    .RadPanelBar_Sitefinity_rtl .rpExpandable .rpOut,
    .RadPanelBar_Sitefinity_rtl .rpExpanded .rpOut
    {
        background-image: url('PanelBar/ExpandableRTL.png');
    }
    /* </expand arrows> */
     
    /* <subitems> */
     
    div.RadPanelBar_Sitefinity .rpGroup .rpLink,
    div.RadPanelBar_Sitefinity .rpGroup .rpTemplate
    {
        background-image: none;
        font-weight: normal;
    }
     
    /* <subitems (disabled)> */
    div.RadPanelBar_Sitefinity .rpGroup .rpDisabled,
    div.RadPanelBar_Sitefinity .rpGroup .rpDisabled:hover
    {
        background-image: none;
        color: #bbb;
        border: 0;
        padding: 1px;
    }
    /* </subitems (disabled)> */
     
    /* <subitems> */
     
    /*      <expand arrows> */
    .RadPanelBar_Sitefinity .rpRootGroup .rpOut
    {
        padding-left: 15px;
    }
     
    div.RadPanelBar_Sitefinity .rpLevel2 .rpTemplate,
    div.RadPanelBar_Sitefinity .rpLevel2 .rpOut,
    div.RadPanelBar_Sitefinity .rpLevel3 .rpTemplate,
    div.RadPanelBar_Sitefinity .rpLevel3 .rpOut
    {
        padding-left: 15px;
    }
     
    .RadPanelBar_Sitefinity .rpSlide
    {
        padding-left: 10px;
    }
     
    .RadPanelBar_Sitefinity_rtl .rpRootGroup .rpOut
    {
        padding-left: auto;
        padding-right: 15px;
    }
     
    div.RadPanelBar_Sitefinity_rtl .rpLevel2 .rpTemplate,
    div.RadPanelBar_Sitefinity_rtl .rpLevel2 .rpOut,
    div.RadPanelBar_Sitefinity_rtl .rpLevel3 .rpTemplate,
    div.RadPanelBar_Sitefinity_rtl .rpLevel3 .rpOut
    {
        padding-left: auto;
        padding-right: 15px;
    }
     
    .RadPanelBar_Sitefinity_rtl .rpSlide
    {
        padding-left: auto;
        padding-right: 10px;
    }
     
    div.RadPanelBar_Sitefinity .rpText {
        padding: 0 5px;
    }
     
    .RadPanelBar_Sitefinity .rpExpandable .rpOut { background-position: 0 0; }
    .RadPanelBar_Sitefinity .rpExpanded .rpOut { background-position: 0 -176px; }
    .RadPanelBar_Sitefinity_rtl .rpExpandable .rpOut { background-position: 100% 0; }
    .RadPanelBar_Sitefinity_rtl .rpExpanded .rpOut { background-position: 100% -176px; }
     
    .RadPanelBar_Sitefinity .rpGroup .rpExpandable .rpOut { background-position: 0 -338px; }
    .RadPanelBar_Sitefinity .rpGroup .rpExpanded .rpOut { background-position: 0 -477px; }
    .RadPanelBar_Sitefinity_rtl .rpGroup .rpExpandable .rpOut { background-position: 100% -338px; }
    .RadPanelBar_Sitefinity_rtl .rpGroup .rpExpanded .rpOut { background-position: 100% -477px; }
     
    /*      </expand arrows> */
     
    /* </background positioning> */

    Thanks in advance
    Febry Nastrioman
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    24 May 2010
    Link to this post
    Hi CafeDelMar,

    You should set the Skin property of your RadPanelBar control and MyProjectStyle.css should be build as embedded resource.

    Also the CssFileLink works only for public controls and you cannot use it into embedded backend views.

    What you need to modify are the css files in the following path: ~/Sitefinity/Admin/Themes/Default/
    such as Modules.css. You could use  @import to add reference to your custom stylesheets in Modules.css

    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.
    Answered
2 posts, 1 answered