1 Reply Latest reply on May 3, 2009 6:45 PM by Nick Belaevski

    Customising Tabpanel to render rounded tabs

    syed a Newbie

      hi,

      I want to customise the tabPanel to render rounded tabs,After reading through the site documentation,i tried applying css to achieve the same,but unfortunately i couldnt find a single post on the forum on how to achieve this feature.Please give me some pointers on how this can be implemented.

      Trial 1

      .rich-tab-active {

      background-image: url('/sampleApp/images/tabs/roundedtab.gif');
      padding: 0px;
      }

      *roundedtab.gif is a single image with top left and right corners rounded.

      problem with this is ...image gets repeated if the text size is big..also applied repeat,but of no use..

      Trial2

      i tried splitting the image into 3 halves,left middle and right..left & right images have rounded corners..

      i used the image in css as follows

      .rich-tab-active {
      background-image: url('/sampleApp/images/middleTab.gif');
      }
      .rich-tabhdr-side-cell{
      border: 0px;
      border-top-width: 0px;
      }
      .rich-tabhdr-side-border {
      background-image: url('/sampleApp/images/leftTab.gif');
      width:10px;
      }

      but the problem here was..same image repeats on the left and right side of the tab...

      is there a way to specify the left side of the tab and right side with appropriate images respectively..

      If its not possible to change the layout of the tab to be rendered as a rounded tab,what is the approach that i would have to use to acheive this feature..