Style Rounded Corner images of UltraWebTab thru external stylesheet

Infragistics UltraWebTab control offers multiple styling options, many of them can be set via external CSS classes. As a matter of fact about only element you cannot style via external stylesheet is rounded corner images. Or can you?

By default images used to give the tabs rounded-corner look are referenced directly in UltraWebTab ASPX markup:

<RoundedImage
   SelectedImage="./images/ig_tab_selected.jpg"
   NormalImage="./images/ig_tab_normal.gif"
   HoverImage="./images/ig_tab_hover.jpg"
   FillStyle="LeftMergedWithCenter">
</RoundedImage>

So, for example if SelectedImage looks like this:

Default Selected Image of UltraWebTab

It will give your tab appearance like this

Selected Image of UltraWebTab in action

Let’s examine it closer. If your look in browser at rendered HTML of this tab it looks like this (I’ve removed some attributes to simplify view):

<TD class=xuwtHome_2>My Test Tab</TD>
<TD width="5" class=xuwtHome_2R>&nbsp;</TD>

Where

.xuwtHome_2 {
   BACKGROUND: url(./images/ig_tab_selected.jpg) no-repeat left top;
}

.xuwtHome_2R {
   BACKGROUND: url(./images/ig_tab_selected.jpg) no-repeat right top;
}

So in reality tab consists of 2 TD elements: First one, on the left, takes the left part of the image as a background; Second on the right – small “rounded” part from the right part of the image (in this case 5 pixels, see TD‘s WIDTH atribute)

Selected Image of UltraWebTab Explained

Knowing this we can now model our CSS class to reference and render rounder corner image:

.TabStyleSelected /* Style of left TD. Add font and other styles for tab title */
{
   background-image: url("./images/ig_tab_selected.jpg") !important;
}

.TabStyleSelected + td /* Style of right TD. Width from width of right rounded part */
{
   background-image: url("./images/ig_tab_selected.jpg") !important;	
   width:5px !important;
}

Note “+” CSS selector on Line 6. It tells browser to apply this style to next sibling TD element (in our case right TD) of the element to which original style is applied (in our case left TD element). Also note “width” attribute on Line 9. It is the width of right “rounded” part of the image. If your image is different and rounded part takes more/less – adjust this value accordingly.

After the style is set like this it just a matter of assigning class to tab element(s). If you want to make this style default for all tabs – use SelectedTabStyle element:

<SelectedTabStyle CssClass="TabStyleSelected"/>

If you want to apply separate round corner styles to individual tabs (which was not possible originally with round corner images set in stone set in ASPX markup) you can do that as well:

<igtab:Tab>
   <SelectedStyle CssClass="TabStyleSelected" />
</igtab:Tab>

Or even do it programmaticaly

oTabControl.SelectedStyle.CssClass = "TabStyleSelected"

Similar approach can be used to define “normal” and hover tab styles and if you need to change rounded styles (either globally, or per tab) no need to change ASPX markup, no need to rename original images or paste your images over original, just create new images and reference them in the stylesheet.

2 replies on “Style Rounded Corner images of UltraWebTab thru external stylesheet”

  1. Would this work with UltraWebTab version 11.1.20111.2064? I can’t seem to get this to work.

  2. @wgfrench: Actually this was implemented in 11.1 (don’t remember specific build). Could u tell me what exactly doesn’t work?

Leave a Reply

Your email address will not be published. Required fields are marked *