Vast Tabber module - need a way to style tabs

[#1]

Hi, 

Looking for help with CSS please. I’ve created a tabbed resource library on this page (towards bottom)  https://www.sonicu.com/

I’ve used the Vast Tabber module to do this. It works ok, but I’d like to style it so the tabs are color-coded or highlighted in some way to stand out from each other. This is what I don’t know how to do.

It would be great if someone could take a look at the Vast Tabber module, and provide example code or some other way to affect the appearance of the tabs.

This module does not have style options within HS editor. I am guessing styling may be possible using CSS? Currently, there are no linked stylesheets.

I’m pretty new to CSS, so unable to write my own from scratch, but usually I can edit / play with existing CSS or HTML to make changes. I notice that within the HS module editor there is a window to enter CSS, under the HTML / HubL window. Would that be where I should add the CSS?

Here is the HTML / HubL code for reference.

       <div class="tabber-wrap">

            <ul class="clearfix tabber-tabs">

              <li class="active"><a>{{ widget.tab_1 }}</a></li>

              <li><a>{{ widget.tab_2 }}</a></li>

              <li><a>{{ widget.tab_3 }}</a></li>

              <li><a>{{ widget.tab_4 }}</a></li>

              <li><a>{{ widget.tab_5 }}</a></li>

              <li><a>{{ widget.tab_6 }}</a></li>

            </ul>

            <div class="tabber-content">

              <div class="tab-pane active">{{ widget.tab_1_content }}</div>

              <div class="tab-pane" id="tab-2">{{ widget.tab_2_content }}</div>

              <div class="tab-pane" id="tab-3">{{ widget.tab_3_content }}</div>

              <div class="tab-pane" id="tab-4">{{ widget.tab_4_content }}</div>

              <div class="tab-pane" id="tab-5">{{ widget.tab_5_content }}</div>

              <div class="tab-pane" id="tab-6">{{ widget.tab_6_content }}</div>

            </div>

        </div>

[#2]

To style different color tabs:

.tabber-tabs > li > a:nth-child(2) {

      background: red;

}

.tabber-tabs > li > a:nth-child(3) {

      background: blue;

}

.tabber-tabs > li > a:nth-child(4) {

      background: green;

}

... etc.

You may also need to change the .active class. 

[#3]

Janet,

Thank you for the help. I'm having difficulty making it work due to my inexperience. Would it need to go in the 'tabber-wrap' section of code something like this?

  <div class="tabber-wrap">

            <ul class="clearfix tabber-tabs">

              <li class="active"><a>{{ widget.tab_1 }}</a></li>

              <li><a>{{ widget.tab_2 }}</a></li>

.tabber-tabs > li > a:nth-child(2) {

      background: red;

}

              <li><a>{{ widget.tab_3 }}</a></li>

.tabber-tabs > li > a:nth-child(3) {

      background: blue;

}

              <li><a>{{ widget.tab_4 }}</a></li>

.tabber-tabs > li > a:nth-child(4) {

      background: green;

}

etc...

            </ul>

[#4]

Hi @reddot !

You can put the CSS code snippet that Janet provided you in your CSS file. It looks like your page is built on HubSpot. Here's how to find your CSS file:

• Open up your page's template in your Design Manager
• Look on the right "Edit" panel > Find the section "Linked Stylesheets"
• Under "Linked Stylesheets", you should see a file ending with .css.
• Hover over that, and click to edit.
• You can add the code snippet right at the bottom of your CSS file. :

Let me know if that works!

[#5]

Thank you Jieyintan! I'll give that a try - hopefully later today or this weekend for sure.

Best,

Chris