Unable to change the font color of bootstrap accordion on SharePoint Online

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/226005

Question

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>
Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top