Hi, as above image, this is my webtab control, first tab is Activetab, 3rd tab is hover tab, other as deactive tabs.
Since color of the text inside deactive tabs make it difficult to read, I wish to change the text color on ig_webtab.css.
As I know igtab_THText will change all tabs text color together, but didn't found the relative part only for text color on deactive tab..
I am using Infragistic for ASP.Net 2010, version 10.3.20103.2088.
Anyone know how to make it?? Thank !!
Hi Cengwah,
That is correct, if you change css for normal state of tab-item, then it wil affect all other states, until other states have its own css attributes which override normal state.Note: those overriden attributes should be located in html after css with normal state: that is just a rule of a browser for priority of conflicting attributes.
You may modify css directly in the ig_webtab.css (igtab_THText, igtab_THTextHov, igtab_THTextSel, igtab_THTextAct, igtab_THTextDis), but it is more flexible to modify properties of a particular WebTab. Below is example for you.Also any tab-item may have its own unique styles. For example, 4th tab changes css only for its main state, but since its class is located after all others, it has highest priority and keeps same attributes for all (hover, selected, etc.) states.
<style type="text/css">.redClr{color:red;}.yellowClr{color:yellow;}.whiteClr{color:white;}.blackClr{color:black;}</style>...<ig:WebTab ID="WebTab1" runat="server" Width="350px" Height="200px"> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1"></ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 2"></ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 3"></ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 4"> <TabCssClasses TextCssClass="blackClr" /> </ig:ContentTabItem> </Tabs> <TabItemCssClasses TextActiveCssClass="whiteClr" TextCssClass="redClr" TextHoverCssClass="yellowClr" TextSelectedCssClass="whiteClr" /></ig:WebTab>
Hello, I need help, I need change the color in mouse hover, my netadvantage version apply orange color to tab when i put the mouse over a tab.
Regards
Hi Hans,
The appearance of all elements in WebTab is defined by css classes, which are provided by current theme (StyleSet). It means that if application needs to modify appearance, then it has 3 choices.
1. Provide another theme, which will define all expected classes (it can be predefined, like Default, Claymation, etc. or a custom theme)
2. Modify attributes in css classes used by current theme.
3. Override specific attributes for particular elements using css properties of WebTab. WebTab exposes absolutely all classes used by theme-css as server properties.
For example, for your case the easiest way is to disable hover background by removing background attributes from all default xxxHov classes (#2). - If your application uses default styleset, then open ./ig_res/Default/ig_webtab.css in text editor. - Find igtab_THCenterHov, igtab_THTailHov and igtab_TabHov classes and remove from them all attributes which start with "background" - If you want another (not white) forecolor, then change color attribute in igtab_THTextHov class.In this case web tab will not change background on tab-item hover.
Note: names of css classes use following rules:igtab_ - belongs to WebTabpossible name straight after igtab_ - name of style set, for example, for Claymation it will be igtab_ClaymationXxxxT - top location or tabs. It can be T, L, T or B (top, left, right, bottom)H - orientation of text. It can be H or V (horizontal, vertical)Xxxx - name of class. It can be Tab, Text, Center, Content, etc.
Example for #3 requires much more efforts. Application should provide not only override-css classes, but also create all background images which should be defined in those classes.
For background of hover items that should be at least 3 classes.
<style type="text/css"> .myHoverTab {....} .myHoverCenter {....} .myHoverTail {....} .myHoverText {....}</style><ig:WebTab ID="WebTab1" runat="server" ...> <TabItemCssClasses CenterHoverCssClass="myHoverCenter" HoverCssClass="myHoverTab" TailHoverCssClass="myHoverTail" TextHoverCssClass="myHoverText" /></ig:WebTab>