0

I am unable to change the font color of an accordion to white. I tried to override with css using below code but still doesn't work. please see the code below.

    <head>
        <style>
                .panel-default > .panel-heading {
                    background-color:#00B3AB;
                   color:White !important;
                }

                 /*.panel-body
                 {
                    background-color:#000;
                }*/

                 .navbar a {
                    color: white;
                }

   </style>          
</head>
            <body>
                </br>    


              <div class="accordion-option">
                <h3 class="title"></h3>
                <a href="javascript:void(0)" class="toggle-accordion active" accordion-id="#accordion"></a>
              </div>
              <div class="clearfix"></div>
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                     C-Quest
                    </a>
                  </h4>
                  </div>
                  <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <table width="100%" class="ms-rteTable-6" cellspacing="0">
               <tbody>
                  <tr class="ms-rteTableEvenRow-6">
                     <td class="ms-rteTableEvenCol-6" style="width: 16.66%;"> 
                        <strong>​Name</strong><br/></td>
                     <td class="ms-rteTableOddCol-6" style="width: 16.66%;"> 
                        <strong>​Email Address</strong><br/></td>

                     <td class="ms-rteTableOddCol-6" style="width: 16.66%;"> 
                        <strong>​Position</strong><br/></td>
                     <td class="ms-rteTableEvenCol-6" style="width: 16.66%;"> 
                        <strong>​Location</strong><br/></td>
                     <td class="ms-rteTableOddCol-6" style="width: 16.66%;"> 
                        <strong>​Contact Number</strong><br/></td>
                  </tr>
                       <tr class="ms-rteTableEvenRow-6">
                            <td class="ms-rteTableEvenCol-0">​Manju Sreenath<br/></td>

                     <td class="ms-rteTableOddCol-6" rowspan="1">​<span style="color: #002060; font-family: calibri, sans-serif; font-size: 11pt;"><a href="mailto:ManjuS@keoic.com">ManjuS@keoic.com</a></span><br/></td>

                     <td class="ms-rteTableOddCol-6" rowspan="1">​<span style="color: #002060; font-family: calibri, sans-serif; font-size: 11pt;">Senior Quantity Surveyor</span><br/></td>
                     <td class="ms-rteTableEvenCol-6" rowspan="1">​Kuwait<br/></td>
                     <td class="ms-rteTableOddCol-6" rowspan="1">​<span style="color: #002060; font-family: calibri, sans-serif; font-size: 11pt;">+965 2461 6000 Ext.6805</span><br/></td>
                  </tr>


               </tbody>
        </body>
1

Try this code May be useful to you,

The line controlling font-color on nav bar currently is in bootstrap.css and reads as follows:

.navbar-default .navbar-nav > li > a {  color: #777;}

Inside style.css - you have tried to change the color in a few places, mainly here:

.navbar-default, .navbar-nav > li > a, .dropdown-menu {
background-color: #c8f57a;
border: 0 none;
color: #2d4207;
font-family: "Josefin Sans",sans-serif;
margin: 0;
text-transform: uppercase;
}

You may set precedent for your style.css rule to take priority by adding !important after the color:2d4207;. so, the new CSS in style.css would read as follows:

.navbar-default, .navbar-nav > li > a, .dropdown-menu {
background-color: #c8f57a;
border: 0 none;
color: #2d4207 !important;
font-family: "Josefin Sans",sans-serif;
margin: 0;
text-transform: uppercase;
}

You may read up on CSS Specificity here: developer Mozilla - Specificity

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.