Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Michael
225
Is it possible to change a single Tab Heading background colour?
posted

Is it possible to change a single Tab Heading background colour within the a web tab control?

So for example, I might have the one tab control with tab headings A, B, C, can I make just one of them a different background colour? I know how to change all of them using the "RoundedImage" tag with "NormalImage", "HoverImage" etc, but I'm trying to effect just one tab heading within the series.

So far I've used a "DefaultImage" to the left of each the tab headings to give a visual indication of status, but the client would rather the background of the tab heading be changed instead.

Thanks for any help.

Michael.

  • 24497
    posted

    Hi Michael,

    Considering names of properties which you mention, you probably ask about UltraWebTab control rather than WebTab.

    If it is UltraWebTab and you use RoundedCorners, then there are no options to change background for one tab item. If RoundedCorners are not used, then you should use TabItem.Style.BackColor property for a particular tab item.

    If it is WebTab, then you should use several properties of ContentTabItem.TabCssClasses.
    First, you may verify that your setting have effect by using something like "background:orange". After that you should build 3 background images with your colors (left-edge:main, center, right-edge:tail) and use them for corresponding properties. You also may use "state" css properties in that class and add extended images for Hover, Selected, Disabled states for that tab item.
    Below is example for main state of 3rd tab:

    <style type="text/css">
     .tabMainCss
     {
      /*background:orange;*/
      background-image:url(./images/maintab.gif);
     }
     .tabCenterCss
     {
      /*background:orange;*/
      background-image:url(./images/centertab.gif);
     }
     .tabTailCss
     {
      /*background:orange;*/
      background-image:url(./images/tailtab.gif);
     }
    </style>

    <ig:WebTab ID="WebTab1" runat="server" Height="179px" Width="284px">
         <Tabs>
          <ig:ContentTabItem runat="server" Text="Tab 1" ImageUrl="./images/close.gif">
          </ig:ContentTabItem>
          <ig:ContentTabItem runat="server" Text="Tab 2" ImageUrl="./images/close.gif" Enabled="false">
          </ig:ContentTabItem>
          <ig:ContentTabItem runat="server" Text="Tab 3">
          <TabCssClasses CssClass="tabMainCss" CenterCssClass="tabCenterCss" TailCssClass="tabTailCss" />
          </ig:ContentTabItem>
         </Tabs>
    </ig:WebTab>