Basic customization of <tabber>s is provided through the .custom-tabber class. You can enable it by wrapping your tabber in a div with the class, like so: <div class="custom-tabber">. Tabbers can be made to go down the side instead of over the top by adding data-direction="vertical" to the wrapper div: <div class="custom-tabber" data-direction="vertical">.
Custom tabbers require the "Custom Tabber" gadget. The gadget is enabled by default, but in the off chance something went wrong and you can't see the examples below you should take a look at your preferences.
Examples
Default tabber
First tab contents
First tab contents
Second tab contents
Second tab contents
Third tab contents
Third tab contents
Default custom tabber
Styled custom tabber 1
Styled custom tabber 2
Default vertical custom tabber
CSS Properties
The most common CSS properties people want to use are exposed through custom CSS properties. If you want to use something that isn't listed down below contact Himmalerin.
The most up-to-date list of exposed CSS properties and their default values will always be the wiki css itself. If something mentioned below doesn't work as intended it's likely the css was edited but this guide was never updated to reflect those changes. If the css and the guide disagree, the css will always win. For that reason, I highly recommend you read the css.
Wrapper Styles
Styles for the wrapper around the individual tab buttons.
| Variable Name | Description | Default Value |
|---|---|---|
--wrapper-justify-content
|
Sets the position of the individual tabs. See mdn:justify-content. | flex-start
|
--wrapper-margin
|
Sets the width of the wrapper. See mdn:margin. | 0
|
--wrapper-width
|
Sets the width of the wrapper. See mdn:width. | 0
|
--wrapper-border-width
|
Sets the width of the border around the wrapper, set to 0 to disable the border. See mdn:border-width.
|
0 0 1px 0
|
--wrapper-border-style
|
Sets the style of the border around the wrapper, set to none to disable the border. See mdn:border-style.
|
solid
|
--wrapper-border-color
|
Sets the width of the border around the color, set to transparent to hide the border. See mdn:border-color
|
#999
|
Base Tab Styles
The "Tabber Tabs" are wrappers around individual Tabber Tab Links.
| Variable Name | Description | Default Value |
|---|---|---|
--tab-justify-content
|
Sets the position of text inside tabs. See mdn:justify-content. | 0 0 -1px 0
|
--tab-margin
|
Sets the amount of margin around tabs. See mdn:margin. | 0
|
--tab-padding
|
Sets the amount of padding inside tabs. See mdn:padding. | 0
|
--tab-border-width
|
Sets the width of the border around tabs, set to 0 to disable the border. See mdn:border-width.
|
0 0 1px 0
|
--tab-border-style
|
Sets the style of the border around tabs, set to none to disable the border. See mdn:border-style.
|
solid
|
--tab-border-color
|
Sets the width of the border around tabs, set to transparent to hide the border. See mdn:border-color.
|
#999
|
--tab-width
|
Sets the width of tabs. See mdn:width. | auto
|
--tab-height
|
Sets the height of tabs. See mdn:height. | auto
|
--tab-background
|
Sets the background of tabs. See mdn:background. | transparent
|
--tab-text-decoration
|
Sets the text-decoration of text inside tabs. See mdn:text-decoration. | none
|
--tab-font-style
|
Sets the font-style of text inside tabs. See mdn:font-style. | normal
|
--tab-font-weight
|
Sets the font-weight of text inside tabs. See mdn:font-weight. | 500
|
--tab-font-size
|
Sets the font-size of text inside tabs. See mdn:font-size. | 14px
|
--tab-font-family
|
Sets the font-family of text inside tabs. See mdn:font-family. | Rubik, sans-serif
|
--tab-color
|
Sets the color of text inside tabs. See mdn:color. | var(--theme-page-text-color)
|
Active Tab Styles
Styles that are used when a tab is selected (active state). These styles override default tab styles.
| Variable Name | Description | Default Value |
|---|---|---|
--tab-border-width--active
|
Sets the width of the border around active tabs, set to 0 to disable the border. See mdn:border-width.
|
var(--tab-border-width)
|
--tab-border-style--active
|
Sets the style of the border around active tabs, set to none to disable the border. See mdn:border-style.
|
var(--tab-border-style)
|
--tab-border-color--active
|
Sets the width of the border around active tabs, set to transparent to hide the border. See mdn:border-color.
|
var(--tab-border-color)
|
--tab-background--active
|
Sets the background of active tabs. See mdn:background. | #fff
|
--tab-color--active
|
Sets the color of text inside active tabs. See mdn:color. | #222
|
Hovered Tab Styles
Styles that are used when a tab is being hovered over (hover state). These styles override both default and active tab styles.
| Variable Name | Description | Default Value |
|---|---|---|
--tab-border-width--hover
|
Sets the width of the border around hovered tabs, set to 0 to disable the border. See mdn:border-width.
|
var(--tab-border-width--active)
|
--tab-border-style--hover
|
Sets the style of the border around active tabs, set to none to disable the border. See mdn:border-style.
|
var(--tab-border-style--active)
|
--tab-border-color--hover
|
Sets the width of the border around active tabs, set to transparent to hide the border. See mdn:border-color.
|
var(--tab-border-width--active)
|
--tab-background--hover
|
Sets the background of active tabs. See mdn:background. | var(--tab-background--active)
|
--tab-color--hover
|
Sets the color of text inside active tabs. See mdn:color. | var(--tab-color--active)
|
Vertical Tabber Defaults
Different defaults are set when using vertical tabs.
| Variable Name | Old Default Value | New Default Value |
|---|---|---|
--wrapper-margin
|
0
|
0 12px 0 0
|
--wrapper-width: Use --wrapper-width to change the width of the tabs.
|
N/A | N/A |
--wrapper-border-style
|
solid
|
none
|
--tab-border-radius
|
3px 3px 0 0
|
3px
|
--tab-border-color--active
|
#999
|
transparent
|
--tab-background--active
|
#fff
|
#06f
|
--tab-color--active
|
#222
|
#fff
|