1 Reply Latest reply on May 3, 2009 8:46 AM by Nick Belaevski

    Rounded Tabs

    jFoundation java Newbie

      Hi,

      How can i customize tab panel to render rounded tabs i e tabs with top left and top right corners rounded.

      We tried by customising the css class available for tabPanel component,but we are not able to acieve the desired result.

      Trial 1

      Desired Output :
      Tabs with rounded corners

      Logic:
      Divided the image into 3 halves - left,middle,right.

      left,and right images have rounded corners.


      have used rich-tabhdr-side-border with left image as back-ground,but problem is ,we cannot specify left side border and right side border.


      Css Used :

      .rich-tab-active {
      font-family: Arial;
      font-size: 11px;
      font-weight: bold;
      color: #ffffff;
      background-image: url('/bw-webapp-3.1.0/images/tabs/TabMid_Selected.gif');
      }

      .rich-tab-inactive {
      font-family: Arial;
      font-size: 11px;
      font-weight: bold;
      color: #896b42;
      border: 1px Solid e7dfd3;
      background-color: #fffffb;
      background-image: url('/bw-webapp-3.1.0/images/tabs/TabMid.gif');
      }

      .rich-tabhdr-side-cell{
      border: 0px;
      border-top-width: 0px;
      }
      .rich-tabhdr-side-border {
      background-image: url('/bw-webapp-3.1.0/images/tabs/TabLeft_Selected.gif');
      width:12px;
      }


      Actual Output :

      left image gets rendered on both the sides of the tab...ineffect doesnt render the required tab with rounded corners.


      Trial2

      One of the topics on the forum suggested to use a background image,hence tried the same.

      http://www.jboss.org/index.html?module=bb&op=viewtopic&t=121472

      Logic

      Use a rounded background image

      Actual Output
      If the text for the Tab header is big then the image gets repeated which makes it look ugly,if i use background-repeat:no-repeat ..image is not repeated but ,the text expands beyond the image..


      if CSS is not the way to achieve this,please let us know how we can acheive this .