AJAX Tab Container/Panel Styles

Last post 10-09-2007 11:58 AM by dwhite. 8 replies.

Sort Posts:

  • AJAX Tab Container/Panel Styles

    09-17-2007, 12:51 PM
    • Loading...
    • stitz
    • Joined on 06-14-2007, 3:43 PM
    • Posts 6

    Hello,

    Has anyone successfully overwridden the AJAX Tab Container styles? When I attempt to create custom styles for the tab container or tabs, all styling goes away completly on the tabs. I must be doing something wrong. Can anyone provide some clear examples of overwriding these styles? Thanks.

  • Re: AJAX Tab Container/Panel Styles

    09-17-2007, 1:34 PM
    • Loading...
    • dwhite
    • Joined on 02-08-2007, 9:25 AM
    • Bristol, CT
    • Posts 1,175
    You can look here: http://www.asp.net/AJAX/Control-Toolkit/Live/Tabs/Tabs.aspx at the Tabs Theming section for how to go about styling the tabs...

    -Damien

    ** Remember to mark posts as the answer to help future users. **
    Visoft, Inc - Web Site | Blogs
  • Re: AJAX Tab Container/Panel Styles

    09-17-2007, 2:06 PM
    • Loading...
    • xthjan
    • Joined on 06-22-2005, 6:42 PM
    • Posts 18

    I was working with overwridden themes for tabs, but it doesn't work sucessfully. After that, I copy from the masters css style for tabs and paste in my own css, but it doesn't work too...

    It generate a problem in tabs with the margin automaticly assigned.

    Please if someone can do work correctly the tabs whit personalized styles post the correct clases overwridden.

  • Re: AJAX Tab Container/Panel Styles

    09-26-2007, 12:46 AM
    • Loading...
    • stitz
    • Joined on 06-14-2007, 3:43 PM
    • Posts 6

    I have followed the asp.net/ajax toolkit tab theming information and I am still unable to get the styling to work. When I try to override the styles, I loose all styling all together. Does anyone have examples of working styles for the ajax tabs?

  • Re: AJAX Tab Container/Panel Styles

    09-26-2007, 9:14 PM
    • Loading...
    • dwhite
    • Joined on 02-08-2007, 9:25 AM
    • Bristol, CT
    • Posts 1,175

    I've create a blog entry for you in regards to theming the tabs; along with the source code... http://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx

    Hope this helps.

    -Damien

    ** Remember to mark posts as the answer to help future users. **
    Visoft, Inc - Web Site | Blogs
  • Re: AJAX Tab Container/Panel Styles

    10-08-2007, 7:35 PM
    • Loading...
    • Foovanadil
    • Joined on 10-05-2007, 4:14 PM
    • Posts 2

     

    I posted on your blog as well but what about styling the individual tab panels seperatley so that I can control each tabs style?

     

    I followed your example and got the container styling working fine but I can't figure out how to control the tab panels individually.

     

    Any ideas.

  • Re: AJAX Tab Container/Panel Styles

    10-09-2007, 5:28 AM

    Try this link, I came across it today on Silverlight.net...

     http://mattberseth.com/blog/2007/09/more_sample_ajaxcontroltoolkit.html

  • Re: AJAX Tab Container/Panel Styles

    10-09-2007, 11:34 AM
    • Loading...
    • Foovanadil
    • Joined on 10-05-2007, 4:14 PM
    • Posts 2

    Thanks for the link. It isn't quite what I looking for though. He is placing different icons on the tabs by altering the header template.

     

    What I need to do is give an entirely different style for each tab (header, outer, inner, body, and hover states).  There may be some sort of CSS trick that can be done to accomplish this but my CSS skills are lacking.

     

  • Re: AJAX Tab Container/Panel Styles

    10-09-2007, 11:58 AM
    • Loading...
    • dwhite
    • Joined on 02-08-2007, 9:25 AM
    • Bristol, CT
    • Posts 1,175

    You can assign a custom CSS directly to the tab.  I'm not sure exactly of the syntax for this, but bascially you want to assign the CSS to the SPAN on line 1 in my example

    01 <span id="..." class="ajax__tab_active">
    02   <span class="ajax__tab_outer">
    03     <span class="ajax__tab_inner">
    04       <span id="..." class="ajax__tab_tab">Tab 1</span>
    05    </span>
    06  </span>
    07 </span>

    -Damien

    ** Remember to mark posts as the answer to help future users. **
    Visoft, Inc - Web Site | Blogs
Page 1 of 1 (9 items)
Microsoft Communities
Page view counter