WP TABS Plugin is cludgy, incomplete and requires Pro version to populate the tab and panel fonts without custom css

Plug in management page
Edit Tabs INACTIVE
Shaped Plugins Site

Pros: Nice hover/click management
Cons: Requires Pro if you don’t want to style yourself and all content is managed in the plugin, to in the page/post editor.
The tabs section title is not generic and requires a number for each :-/

(css added to current WP Tabs specific settings):


.sp-tab__section_title_27512 {
font-size: 18px ! important;}

.sp-tab__section_title_27658 {
font-size: 18px ! important;}

.sp-tab__nav-link .sp-tab__tab_title {
font-size: 14px ! important;
font-weight: 400! important;
line-height: 1.4em ! important;}

Examples Tabs 1 & 2
[ wptabs id=”27512″] [ wptabs id=”27658″]

The following CSS package saved here alleviates this overall, (but it’s hard to manage too many tabs solutions)
/* 20200818 ————————— — */

.sp-tab__section_title_27512 {
font-size: 18px ! important;}

.sp-tab__section_title_27658 {
font-size: 18px ! important;}

.sp-tab__nav-link .sp-tab__tab_title {
font-size: 14px ! important;
font-weight: 400! important;
line-height: 1.4em ! important;}

/* — Title Font Size >Title HTML Tag — /
.sp-tab__nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
background-color: rgba(20, 60, 100, 1)! important;}
/ — Tabs Top Bar Background — */

/* — Top Bar Bottom Border — */
.sp-tab__nav-tabs {border-bottom: 2px dashed rgba(20, 60, 100, 1) !important;}

/* — Title Background Color —/
.sp-tab__nav-link {
background-color: rgba(20, 60, 100, 1) ! important;
/ — Tabs Colour — */
margin-bottom: 0px ! important;
border: 1px none rgba(0, 222, 0, 0)!important;
border-bottom: 1px none rgba(20, 80, 110, 0) ! important;}

.sp-tab__nav-tabs .sp-tab__nav-link:focus,
/* — Tabs Hover — /
.sp-tab__nav-tabs .sp-tab__nav-link:hover {background-color: rgba(0, 100, 150, 1) !important;}
/ — Tabs Active — */
.sp-tab__nav-link.sp-tab__active {background-color: rgba(0, 90, 140, 1) !important;}

/* –UNWANTED PADDING IN PULLDOWN PANE — /
.sp-tab__card-body {padding: 0rem !important; margin-bottom: -2px !important;}
.sp-tab__card-body {-ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0rem !important; margin-bottom: -2px;}
/ –UNWANTED PADDING IN PULLDOWN PANE — */

.sp-tab__tab-content > .sp-tab__tab-pane {
background-color: rgba(255, 255, 255, 1) !important;
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4) !important;
-webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4) !important;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4) !important;
border: 0px solid #00ff00 !important;
/+placement: -4px -4px;/
position: relative !important;
left: -1px !important;
top: -5px !important;
padding: 0px !important;
}

---

---