VK Blocks Pro のタブブロックを CSS でカスタマイズしてみた

タブブロックの 追加 CSS クラスに ujs_tab_labels-normal と入力する。

子テーマの style.css などに以下のコードを追加する。

.ujs_tab_labels-normal .wp-block-vk-blocks-tab-item.has-border-top {
    /* ボーダーを太く */
    border-top-width: 5px;
}
.ujs_tab_labels-normal .wp-block-vk-blocks-tab-item.has-border-top > .wp-block-group.has-border-color {
    /* ボーダーをタブと同じ色に */
    border-color: inherit !important;
}
/* マウスホバーでタブの高さが変わる */
.ujs_tab_labels-normal .vk_tab_labels {
    height: 40px;
}
.ujs_tab_labels-normal .vk_tab_labels li {
    margin-top: 0;
}
.ujs_tab_labels-normal .vk_tab_labels li:hover {
    margin-top: -5px !important;
}