change backgroundimage

3 posts, 0 answers
  1. Sigma
    Sigma avatar
    87 posts
    Member since:
    Apr 2012

    Posted 24 Dec 2012 Link to this post


    How can I change the background image of RibbonBar?

    Thanks in advance

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Dec 2012 Link to this post


    Try the following CSS to achieve your scenario.
    .RadRibbonBar_Default .rrbTabs
       background-image: url("../Images/img.gif") !important;

  3. Ivan Zhekov
    Ivan Zhekov avatar
    651 posts

    Posted 25 Dec 2012 Link to this post


    While Princy's solution is correct and will indeed change the background image of the tab container, the complete answer is somewhat longer.

    First, which parts of the RibbonBar do you want to change? Apart from the tab container, which Princy already covered, you have the following structure:

    • Ribbon
      • Tab container
        • Tab
        • Contextual tab
      • Commands area
        • Group
          • Item

    With each part being able to have different background.

    In addition, in order for the ribbon to have rounder corners in all browsers, we employ a certain amount of nesting to achieve this in terms, the actual selectors may vary.

    And finally, there are a couple of skin which are different from the rest e.g. the Metro family skins.

    So to properly answer your question, we need to know which skin you want to use (in case it's one of the metro skins) and then which part you would like to customize.

    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top