Tab Addon
Andrew Freeman
Hi.
I've created some tabs, and I want the colours slightly different for a few of them.
I've added this code to change the background colour of the last three tabs:
sppb-content1-7 {
background-color: #E2f3f9; }
sppb-content1-8 {
background-color: #E2f3f9; }
sppb-content1-9 {
background-color: #E2f3f9; }
But I want the background to stay dark blue like the others when active. Could anyone point in the in the right diredction?
Paul Frankowski
Accepted AnswerHi Andrew,
Look at HTML generated from your site:
<li class="active"><a data-toggle="sppb-tab" id="sppb-content1-6" class="" href="#sppb-tab1-6" role="tab" aria-controls="sppb-tab1-6" aria-selected="true"> <span class="sppb-tab-icon" aria-label="Compliance"><i class="fas fa-angle-right" aria-hidden="true"></i></span> Compliance </a></li>
As you can see, if menu item (tab) is active it gets "active" class name. Now use this, for example, like that:
.active > #sppb-content1-6 { .... }
Now your turn.
Andrew Freeman
Accepted AnswerHi Paul,
thank you so much, I'd tried a dozen combinations. I still get a bit consused with all the classes etc.
Much appreciated.
Paul Frankowski
Accepted AnswerThere is Code Inspector tool (browser tool) ... it shows you everything.
Andrew Freeman
Accepted AnswerHi Paul,
I know, I use it all the time and can usually figure it out.
I was using variations of li.active as per how the others are style.
sppb-addon-cfb18062-6099-407b-b461-4e52cdcf1417 .sppb-nav-custom > li.active > a, #sppb-addon-cfb18062-6099-407b-b461-4e52cdcf1417 .sppb-nav-custom > li.active > a:hover, #sppb-addon-cfb18062-6099-407b-b461-4e52cdcf1417 .sppb-nav-custom > li.active > a:focus
Anyway, it's sorted, thanks.