Unable to change the font color of bootstrap accordion on SharePoint Online
-
01-01-2021 - |
문제
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>
해결책
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
제휴하지 않습니다 sharepoint.stackexchange