I'm working with the Ajax Tab control for the first time in VS 2005 (.Net 2.0 FW)
I'd like to be able to set individual TabPanels to different background colors, etc. using CSS. I'm having trouble getting this to work for me. I set the CssClass property to a class in my stylesheet that should override the default style and it doesn't
seem to take.
I can reset the TabContainer.CssClass to a different class overriding the defaults and that works fine except that it changes all the tabs, which isn't what I need.
It's starting to get a little frustrating, so I thought I'd ask for a little help.
Like you said, this is just a question of removing the CssClass and adding another CssClass. The only difference between the CssClasses would be the Backgroundcolor. This way it seems like that is the only thing changing.
Below I will provide you with an example of a tabcontainer where the background switches.
Do note that the javascript for changing the background is not dynamic!
Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
It doesn't allow for change for inactive tabs (it would be cool if those were different colors, too),
What exactly do you mean?
Correct me if I'm wrong here .....
So for example : You have 2 tabs. TabOne where the background is white, and TabTwo where the background is green.
Do you want the TabSelectionArea (=well that button-thing to select a tabPane [:)]) of TabTwo to be green when TabOne is Active/Selected?
This would also mean that if you would have more then 1 inactive tab, that the inactive tabs could have different colors, right?
If that is what you want, I'd have to say: I don't think it is possible with the current Tabs in the AjaxControlToolkit.
Or maybe .... I'm just thinking here ..... maybe it is possible but ...... hmmmm, I'll get back to you on this.
Another way to go would be to build your own tabcontrol. This can be done with a multiview and hooking it up to some navigation-control. But you should consider the extra time/work that needs to be put into this.
Please let me know if I was correct with what you want (my explanations above).
Kind regards,
Wim
Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
I have 3 tabs. One tab is green, one blue and one red when active. When inactive all the tabs have the same coloring. I was hoping that it would be possible to make the inactive tabs a color roughly corresponing to their active colors. I'm not certain
that this is possible. That's a bit dissapointing.
I've wondered if the control could be extended and the tab coloring behavior changed.
Do you want the active Tab to be the red one? I mean: When I change active tabs, the active one becomes red?
Man I'd build a custom tabpanel :)
I have however something that might suit you also: Each tab has a different color. The active one is visible because it is fluidly connected to its tabpane. The inactive ones are disconnected from the tabpane by a visible line. The colors of the tabheader
and tabpane remains the same, active or inactive.
Since I'm no css wizard, this example is not dynamic. So if you want to add a tab, you should copy_paste_modifyIdNames :)
One additional note: I made the example a bit complex because I wanted the css-rounded corners implemented. Without them the css will be simpler. (I got my inspiration for the rounded corners here:
http://www.cssplay.co.uk/boxes/snazzy.html )
You could always suggest changes to the AjaxControlToolkit on the codeplex.com website. Then people can vote on it and maybe it gets implemented in future releases.
Kind regards,
Wim
Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
ChazClover
Member
60 Points
14 Posts
TabPanel problem
Feb 14, 2008 04:54 PM|LINK
I'm working with the Ajax Tab control for the first time in VS 2005 (.Net 2.0 FW)
I'd like to be able to set individual TabPanels to different background colors, etc. using CSS. I'm having trouble getting this to work for me. I set the CssClass property to a class in my stylesheet that should override the default style and it doesn't seem to take.
I can reset the TabContainer.CssClass to a different class overriding the defaults and that works fine except that it changes all the tabs, which isn't what I need.
It's starting to get a little frustrating, so I thought I'd ask for a little help.
TIA
deblendewim
Contributor
5590 Points
951 Posts
Re: TabPanel problem
Feb 15, 2008 11:07 AM|LINK
Hi Chaz,
Like you said, this is just a question of removing the CssClass and adding another CssClass. The only difference between the CssClasses would be the Backgroundcolor. This way it seems like that is the only thing changing.
Below I will provide you with an example of a tabcontainer where the background switches.
Do note that the javascript for changing the background is not dynamic!
Page:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TabContainerBG.aspx.vb" Inherits="TabContainerBG" %> <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <link href="TabContainerTheme.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function SetBgColor(){ var myTab = $find("TabContainer1"); if (myTab._activeTabIndex == 0){ myTab.removeCssClass('ajax__tab_xp-theme2'); myTab.addCssClass('ajax__tab_xp-theme'); } else if (myTab._activeTabIndex == 1){ myTab.removeCssClass('ajax__tab_xp-theme'); myTab.addCssClass('ajax__tab_xp-theme2'); } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager id="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="ajax__tab_xp-theme" OnClientActiveTabChanged="SetBgColor"> <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1"> <ContentTemplate> Tab1 </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> <ContentTemplate> Tab2<br /> hehe<br /> jaja </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer></div> </form> </body> </html>StyleSheet: (TabContainerTheme.css) Note that the only thing different in the 2nd theme is the background color in the ajax__tab_body
If you have questions/remarks please do so.
Kind regards,
Wim
EDIT: Images can be found here: http://mattberseth.com/blog/2007/09/more_sample_ajaxcontroltoolkit.html (look for the download link)
ChazClover
Member
60 Points
14 Posts
Re: TabPanel problem
Feb 15, 2008 08:11 PM|LINK
Wim,
That worked great! Thanks!
It doesn't allow for change for inactive tabs (it would be cool if those were different colors, too), but that's okay.
However if you know of a way to change individual tab's inactive coloring, that would be way cool.
Thanx again!
</c>
deblendewim
Contributor
5590 Points
951 Posts
Re: TabPanel problem
Feb 18, 2008 08:19 AM|LINK
Hi Chaz,
What exactly do you mean?
Correct me if I'm wrong here .....
So for example : You have 2 tabs. TabOne where the background is white, and TabTwo where the background is green.
Do you want the TabSelectionArea (=well that button-thing to select a tabPane [:)]) of TabTwo to be green when TabOne is Active/Selected?
This would also mean that if you would have more then 1 inactive tab, that the inactive tabs could have different colors, right?
If that is what you want, I'd have to say: I don't think it is possible with the current Tabs in the AjaxControlToolkit.
Or maybe .... I'm just thinking here ..... maybe it is possible but ...... hmmmm, I'll get back to you on this.
Another way to go would be to build your own tabcontrol. This can be done with a multiview and hooking it up to some navigation-control. But you should consider the extra time/work that needs to be put into this.
Please let me know if I was correct with what you want (my explanations above).
Kind regards,
Wim
ChazClover
Member
60 Points
14 Posts
Re: TabPanel problem
Feb 18, 2008 10:33 PM|LINK
What I was thinking was...............
I have 3 tabs. One tab is green, one blue and one red when active. When inactive all the tabs have the same coloring. I was hoping that it would be possible to make the inactive tabs a color roughly corresponing to their active colors. I'm not certain that this is possible. That's a bit dissapointing.
I've wondered if the control could be extended and the tab coloring behavior changed.
</c>
deblendewim
Contributor
5590 Points
951 Posts
Re: TabPanel problem
Feb 19, 2008 09:08 AM|LINK
Hi Chaz,
Do you want the active Tab to be the red one? I mean: When I change active tabs, the active one becomes red?
Man I'd build a custom tabpanel :)
I have however something that might suit you also: Each tab has a different color. The active one is visible because it is fluidly connected to its tabpane. The inactive ones are disconnected from the tabpane by a visible line. The colors of the tabheader and tabpane remains the same, active or inactive.
Since I'm no css wizard, this example is not dynamic. So if you want to add a tab, you should copy_paste_modifyIdNames :)
One additional note: I made the example a bit complex because I wanted the css-rounded corners implemented. Without them the css will be simpler. (I got my inspiration for the rounded corners here: http://www.cssplay.co.uk/boxes/snazzy.html )
I would also like to remind you that the images that are used in the css can be found in the link I posted in my previous reply.
(EDIT: Images can be found here: http://mattberseth.com/blog/2007/09/more_sample_ajaxcontroltoolkit.html (look for the download link))
Source:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TabContainerBG.aspx.vb" Inherits="TabContainerBG" %> <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <link href="TabContainerTheme.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function SetBgColor(){ var myTab = $find("TabContainer1"); if (myTab._activeTabIndex == 0){ myTab.removeCssClass('ajax__tab_xp-theme2'); myTab.removeCssClass('ajax__tab_xp-theme3'); myTab.addCssClass('ajax__tab_xp-theme1'); } else if (myTab._activeTabIndex == 1){ myTab.removeCssClass('ajax__tab_xp-theme1'); myTab.removeCssClass('ajax__tab_xp-theme3'); myTab.addCssClass('ajax__tab_xp-theme2'); } else if (myTab._activeTabIndex == 2){ myTab.removeCssClass('ajax__tab_xp-theme1'); myTab.removeCssClass('ajax__tab_xp-theme2'); myTab.addCssClass('ajax__tab_xp-theme3'); } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager id="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="ajax__tab_xp-theme1" OnClientActiveTabChanged="SetBgColor"> <cc1:TabPanel ID="TabPanel1" runat="server"> <headertemplate> <div id="xsnazzy_1" style="width:100px; height:20px;" onclick="changePadding(this);"> <b class="xtop_1"><b class="xb1_1"></b><b class="xb2_1"></b><b class="xb3_1"></b><b class="xb4_1"></b></b> <div class="xboxcontent_1"> <p>TabOne</p> </div> </div> </headertemplate> <ContentTemplate> Ieii euu ioi ou iiuuei oi iao ieiiuie ouuouauo euo euie oio aueiu eeui ueeuuui eio uiiio uaeuouee oe uuouau eioiiue oeoii oeuo ia a iiiaui eiiea o u oau eio oeeouoeu oieo uo uue eoia oaieu oeu ooeoo oauou oeeeea iiaaeuee oeeieuo eoaooo iiooeu. </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" runat="server"> <headertemplate> <div id="xsnazzy_2" style="width:100px; height:20px;"> <b class="xtop_2"><b class="xb1_2"></b><b class="xb2_2"></b><b class="xb3_2"></b><b class="xb4_2"></b></b> <div class="xboxcontent_2"> <p>TabTwo</p> </div> </div> </headertemplate> <ContentTemplate> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel3" runat="server"> <headertemplate> <div id="xsnazzy_3" style="width:100px; height:20px;"> <b class="xtop_3"><b class="xb1_3"></b><b class="xb2_3"></b><b class="xb3_3"></b><b class="xb4_3"></b></b> <div class="xboxcontent_3"> <p>TabThree</p> </div> </div> </headertemplate> <ContentTemplate> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer></div> </form> </body> </html>Css (TabContainerTheme.css):
Let me know if this suits you.
You could always suggest changes to the AjaxControlToolkit on the codeplex.com website. Then people can vote on it and maybe it gets implemented in future releases.
Kind regards,
Wim