locked
Tab border - Changing yellow to blue RRS feed

  • 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

    Thursday, March 9, 2017 10:49 AM

All replies

  • Thursday, March 9, 2017 11:56 AM
  • 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

    Friday, March 10, 2017 7:33 AM
  • User-444581312 posted

    Thanks Cathy

    Monday, March 13, 2017 3:13 PM
  • User-707554951 posted

    Hi Darren Rockett,

    Have you solved your problem yet?

    Best regards

    Cathy

    Thursday, March 16, 2017 9:48 AM
  • User-444581312 posted

    Hi Cathy, 

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

    Friday, March 17, 2017 8:44 AM