Loading ...

Tabs Template | Communifire Documentation

Comments (3)

   
ashley.biggers

How do I implement this tabs template in my site? I see it as a template in the Section Widget, but can't figure out how to make it populate. 

4/4/2020 03:24 PM
 · 
by
   
gskamau

Hey Ashley,

To implement this template, drag Button Widgets into the Section widget, and use the Tab Template for the buttons. You can see an example of this on the Recognition page.

Grace

4/4/2020 07:05 PM
 · 
by
   
cdale

Hey  Grace Kamau , 

Is there a way to customize the tabs background/font size? I'm trying to add in the css in the template but do not see any changes happening. 

Thanks, 
Chloie

6/22/2020 07:23 PM
 · 
by
   
gskamau

Hi Chloie,

Below is sample CSS that changes the tab background and font size. Note that if you're adding the CSS directly in the Page Builder template, it should be wrapped in style tags.

<style>
    .nav-tabs li a { font-size: 20px; background-color: blue; }
</style>

Grace

6/22/2020 07:45 PM
 · 
by
   
cdale

Thanks  Grace Kamau ! Is there a trick to add it in the button widgets css custom class?

6/22/2020 09:15 PM
 · 
by
   
gskamau

Hi Chloie,

Give the button widget a custom CSS class.

Then modify the CSS to target li elements with that class.

 .nav-tabs li.my-custom-button-class a { font-size: 20px; background-color: blue; }

You can add the CSS code in the template or in Control Panel > System > CSS Overrides. Adding it in CSS overrides is better practice.

Grace

6/22/2020 09:42 PM
 · 
by

Pages

Intranet Software