CMS Development

reddot
Teilnehmer/-in

vast tabber - need help styling tabs

lösung

https://www.sonicu.com/room-conditions-mockup

Hi - I'd like to style the tabs mid-way down on this page so the active tab is a different color than rest of them. Can anyone suggest a way to accomplish this?

 

Also it would be nice to be able to make the tabs larger L-R so they are not so close together.

 

Thanks,

 

Chris

 

0 Upvotes
1 Akzeptierte Lösung
Kevin-C
Lösung
Trendsetter/-in | Partner
Trendsetter/-in | Partner

vast tabber - need help styling tabs

lösung

Hey @reddot 

 

The tabber uses a class called active to label the current tab, so you sould be able to modify the styling with that class.

 

.tabber-wrap .tabber-tabs li.active a {
  background-color: red; // change color here
}

To make the tabs wider by setting the size of the LI

@media screen and (min-width:768px) {
.tabber-wrap .tabber-tabs li {
  width: calc(100% / 5);
  text-align: center
  }
}

or by changing the padding of the a tag inside the LIs

@media screen and (min-width:768px) {
  .tabber-wrap .tabber-tabs li a {
    padding-left: 2em;
    padding-right 2em;
  } 
}
Kevin Cornett - Sr. Solutions Architect @ BridgeRev

Lösung in ursprünglichem Beitrag anzeigen

2 Antworten
Kevin-C
Lösung
Trendsetter/-in | Partner
Trendsetter/-in | Partner

vast tabber - need help styling tabs

lösung

Hey @reddot 

 

The tabber uses a class called active to label the current tab, so you sould be able to modify the styling with that class.

 

.tabber-wrap .tabber-tabs li.active a {
  background-color: red; // change color here
}

To make the tabs wider by setting the size of the LI

@media screen and (min-width:768px) {
.tabber-wrap .tabber-tabs li {
  width: calc(100% / 5);
  text-align: center
  }
}

or by changing the padding of the a tag inside the LIs

@media screen and (min-width:768px) {
  .tabber-wrap .tabber-tabs li a {
    padding-left: 2em;
    padding-right 2em;
  } 
}
Kevin Cornett - Sr. Solutions Architect @ BridgeRev
reddot
Teilnehmer/-in

vast tabber - need help styling tabs

lösung

Thanks Kevin-C! This got me on the right track.

 

Appreciate!

 

Reddot