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

Forums / Designing with Sitefinity / How to style the RadPanelBar control

How to style the RadPanelBar control

9 posts, 0 answered
  1. Andrew
    Andrew avatar
    47 posts
    Registered:
    22 May 2009
    22 May 2009
    Link to this post
    Hi

    I want to create a vertical site menu down the side of the site, and I assume I need the RadPanelBar. Can you tell me how I go about styling this control - is there a reference document somewhere that details all the css styles and what they do?

    Basically I'm creating a site for a school, and they want each menu item to look like a crayon. I was thinking that I could create a background image with (say) 10 horizontal crayons, one above the other. As long as the crayons' height are the same as the RadPanelBar items then I should be okay. The number of menu items may also vary, so I would need the background image to be "clipped" dependent on the number of items visible.

    Any assistance would be gratefully appreciated, e.g. which RadPanelBar styles I would need to change.

    Thanks in advance
    Andy
  2. Andrew
    Andrew avatar
    47 posts
    Registered:
    22 May 2009
    22 May 2009
    Link to this post
    I should have added that each "crayon" needs to be a different colour so I can't simply use the same background image on each list item.

    Andy
  3. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    22 May 2009
    Link to this post
    Hello Andrew,

    You can take a look at theRadPanelBar API, Adding Images to Items
    Below is a sample that demonstrates adding Images to the PanelBar items.

       public void RadPanelbar1_ItemDataBound(object sender, RadPanelBarEventArgs e)  
        {  
            e.Item.ImageUrl = "~/Images" + e.Item.Text + ".gif";  
            e.Item.HoveredImageUrl = "~/Images" + e.Item.Text + ".gif"


    All the best,
    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. Andrew
    Andrew avatar
    47 posts
    Registered:
    22 May 2009
    23 May 2009
    Link to this post
    Ivan, thanks for the reply. How and where would I place this code in the Sitefinity environment? Would I need to inherit my own control from the RadPanelBar, then add that custom control to Sitefinity?

    Alternatively I could try doing it using css, hence my initial question about using a single background image. Is it possible to apply a background image to the entire control, and if so which css style would I need to use? Also, which css styles would I alter to change the height of each panel item, and the space between them?

    Thanks again
    Andy
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    24 May 2009
    Link to this post
    Hi Andrew,

    You can add the code in the Item_DataBound event of RadPanelBar control. You can find the built in SitePanelBar(RadPanelBar) control under ~/Sitefinity/UserControls/Navigation35/

    As for the css classes:

    The UL element for the root items has the "rpRootGroup" class applied. The LI for each item has the "rpItem" class applied. However, take a look at the following link to gather more information about CSS Skin File Selectors

    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. Andrew
    Andrew avatar
    47 posts
    Registered:
    22 May 2009
    26 May 2009
    Link to this post
    Hi

    Thanks again for your quick response as always. I've tried the css approach, which works, but I find that I have to include the "!important" tag on most of my styles otherwise they don't take effect. Is this expected behaviour or am I doing something wrong?

    For the purposes of testing I've installed the "blank project", and have added the following styles to "blue_right.css":
    .rpRootGroup  
    {  
        background-imageurl(Images/ulbg.jpg);  
        width200px !important;  
        padding0px 0px 0px 0px !important;  
        bordernone 0px #ffffff !important;  
    }  
    .rpText, .rpLink, .rpOut  
    {  
        list-stylenone;  
        width200px;  
        color#ffffff;  
        height30px !important;  
        bordernone 0px #ffffff !important;  
        backgroundnone !important;  
        padding0px 0px 0px 0px !important;  
        margin0px 0px 0px 0px !important;  
        line-height30px !important;  
    }  
     
    "ulbg.jpg" is a background image that I apply to the entire panel. Some of the above styles are probably redundant, but hopefully you get the idea of what I'm doing.

    Thanks again
    Andy
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    26 May 2009
    Link to this post
    Hello Andrew,

    You need to add important, because you have used the theme css file instead of the Menu css file to add your classes. Please take a look at Tutorial: Creating A Custom Skin

    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.
  8. Andrew
    Andrew avatar
    47 posts
    Registered:
    22 May 2009
    26 May 2009
    Link to this post

    Hi

    I'm not sure what you mean by "theme css file instead of the Menu css file". What's the difference between modifying the theme css and creating a new css like in the tutorial?

    Also, where is the Sitefinity equivalent of the \program files\telerik\ folder in step 4 of the tutorial?

    Thanks for your assistance so far.

    Andy

  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    26 May 2009
    Link to this post
    Hi Andrew,

    I'm not sure what you mean by "theme css file instead of the Menu css file". What's the difference between modifying the theme css and creating a new css like in the tutorial?


    Please check out The App_Themes Folder, However if you have a 10 controls the theme css could became more than 1000 rows. Also, as you have noticed you need to use !important on every property.

    Also, where is the Sitefinity equivalent of the \program files\telerik\ folder in step 4 of the tutorial?

    We use Telerik.Web.UI assembly, not the RadControls installation. You can get a trial version of Telerik.Web.UI - for instance the zip archive. There is a Skins folder which stores all css files and classes.

    Kind regards,
    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.
Register for webinar
9 posts, 0 answered