CMS Development

reddot
参加者

Vast Tabber module - need a way to style tabs

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>

0 いいね!
4件の返信
JanetArmstrong
トップ投稿者 | Solutions Partner
トップ投稿者 | Solutions Partner

Vast Tabber module - need a way to style tabs

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. 

reddot
参加者

Vast Tabber module - need a way to style tabs

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>

 

0 いいね!
jieyintan
HubSpot Employee
HubSpot Employee

Vast Tabber module - need a way to style tabs

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!

0 いいね!
reddot
参加者

Vast Tabber module - need a way to style tabs

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

 

Best,

 

Chris

0 いいね!