Skip to main content

Customize tabs

This page applies to:MindTouch Responsive

Tabbed containers allow for the organizational display of content in multiple ways in a limited amount of space. There are several LESS variables available for customization of these containers.

 

Screenshot

tabsmain1.png

Variables

@tab-background-color
Default value: lighten(@secondary-container-background-color, 3%)  
Definition: All inactive tabs that don't have visible content displayed.
tab1.png
@tab-background-color-active
Default value: @background  
Definition: The active tab that contains visible content.
tab2.png
@tab-border-color
Default value: darken(@secondary-container-border-color, 27%)  
Definition: The border color for all inactive tabs not currently being viewed.
tab3.png
@tab-border-color-active
Default value: @highlight-color  
Definition: The border color for the active tab that has visible content.
tab-border-color-active.png
@tab-font-family
Default value: @default-font-family
Definition: The font used in for the tabs (ex. Times New Roman, Arial, Verdana, etc). Lato is the default font family.
tab5.png
@tab-link-color
Default value: @secondary-link-color  
Definition: Color of the text in tabs not currently being viewed.
tab6.png
@tab-link-color-hover
Default value: @secondary-link-color-hover  
Definition: Color of the text when a user moves their mouse over the tabs not currently being viewed.
tab7.png
@tab-link-color-active
Default value: @primary-font-color  
Definition: Color of the text in the tab currently being viewed.
tab8.png
  • Was this article helpful?