デフォルトではタブ３つです。タブの色は background: #eee;一色です。
縦に並ぶタブはverticalで指定します。
アイコンのタブは３色あります。このように色分けするには・・・有料のAdd-onを購入するのが時短、ですが・・・
プラグインの「設定」の「詳細情報」に「デフォルトのスタイルを表示するには、 shortcodes.full.css ファイルを開きます」とあります。デフォルトのCSSがここで確認できます。
デフォルトのCSS
.su-tabs {
margin: 0 0 1.5em;
padding: 3px;
border-radius: 3px;
background: #eee;
}
.su-tabs-nav span {
display: inline-block;
margin-right: 3px;
padding: 10px 15px;
min-height: 40px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #333;
font-size: 13px;
line-height: 20px;
cursor: pointer;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.su-tabs-nav span:hover {
background: #f5f5f5;
}
.su-tabs-nav span.su-tabs-current {
background: #fff;
cursor: default;
}
.su-tabs-nav span:focus {
outline: currentColor thin dotted;
}
.su-tabs-nav span.su-tabs-disabled {
opacity: 0.5;
cursor: default;
}
.su-tabs-pane {
padding: 15px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background: #fff;
color: #333;
font-size: 13px;
}
.su-tabs-pane:not(.su-tabs-pane-open) {
overflow: hidden !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
height: 0 !important;
border: none !important;
}
.su-tabs-nav,
.su-tabs-nav span,
.su-tabs-panes,
.su-tabs-pane {
box-sizing: border-box !important;
}
とりあえず、タブの色を指定してみます→ 鉛丹色#ec6d51と山吹色#f8b500
【su_tabs vertical=”” class=”iro-tabs”】
CSS指定例とするとタブ名
/*★SUタブの色指定 class=”iro-tabs”*/
.iro-tabs .su-tabs {
background: #f5f5f5!important;
}
.iro-tabs .su-tabs-nav span {
background: #ec6d51 !important;/* タブ色 */
}
.iro-tabs .su-tabs-pane {
background: #fff!important;/* 本文色 */
}
.iro-tabs .su-tabs-nav span.su-tabs-current {
background: #fff!important;/* タブ色 */
}
３つ目のタブの色を「山吹色#f8b500」にするには・・・
３つ目の
【su_tab title=”タブ名” disabled=”no” anchor=”” url=”” target=”blank” class=””]タブコンテンツ[/su_tab】
の「class=”.iro3-tabs”」を個別指定・・・してもだめ・・・そりゃそうですね。
.iro3-tabs .su-tabs-nav span {
background: #f8b500 !important;/* ３つ目のタブ色 */
}
.iro3-tabs .su-tabs {
background: #f8b500 !important;/* ３つ目のタブ色 */
}
タブコンテンツ
★