- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Vast Tabber module - need a way to style tabs
Mar 21, 2020 3:32 PM
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>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content