Tab border - Changing yellow to blue

Question

User-444581312 posted

Does anyone know how I can change the top border on the active and non active tabs to be blue rather than the default yellow? Also occurs when you hover over a tab.

     <act:TabContainer runat="server" ID="Tabs" ActiveTabIndex="0" Height="440px">
                                    <act:TabPanel runat="server" ID="tpDetails" HeaderText="Details">
                                        <ContentTemplate>
                                            Test
                                        </ContentTemplate>
                                    </act:TabPanel>
                                    <act:TabPanel runat="server" ID="tpHistory" HeaderText="History">
                                        <ContentTemplate>
                                            Test
                                        </ContentTemplate>
                                    </act:TabPanel>
                                    <act:TabPanel runat="server" ID="tpAlerts" HeaderText="Alerts">
                                        <ContentTemplate>
                                            Test
                                        </ContentTemplate>
                                    </act:TabPanel>
                                </act:TabContainer>
                            </div>

Thanks

Answer 1

User-444581312 posted

Found the following link

http://appetere.com/post/ajax-toolkit-tab-control-css-and-layout-problems

Answer 2

User-707554951 posted

Hi Darren Rockett.

I make an sample as below.

 <style type="text/css">   
          .ajax__tab_xp .ajax__tab_header .ajax__tab_active .ajax__tab_tab{
              background-image:none !important;
                background-color:red ;
          }
          a[class="ajax__tab_tab"]:hover{
               background-image:none !important;
                   background-color:red ;
          }

    </style>

   <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <act:TabContainer ID="TabContainer1" runat="server">
                    <act:TabPanel runat="server" ID="tpDetails" HeaderText="Details">
                                        <ContentTemplate>
                                            Test tpDetails
                                        </ContentTemplate>
                                    </act:TabPanel>
                                    <act:TabPanel runat="server" ID="tpHistory" HeaderText="History">
                                        <ContentTemplate>
                                            Test tpHistory
                                        </ContentTemplate>
                                    </act:TabPanel>
                                    <act:TabPanel runat="server" ID="tpAlerts" HeaderText="Alerts">
                                        <ContentTemplate>
                                            Test tpAlerts
                                        </ContentTemplate>
                                    </act:TabPanel>
                                </act:TabContainer>

Output screenshot as below:

Best regards

Cathy

Answer 3

User-444581312 posted

Thanks Cathy

Answer 4

User-707554951 posted

Hi Darren Rockett,

Have you solved your problem yet?

Best regards

Cathy

Answer 5

User-444581312 posted

Hi Cathy, 

I had to manually alter the gifs, the solution above was too blocky, thanks though.