Individually styled tabs

The tabs - by default - have a tasteful and neutral styling.

To add an extra class to a tab (for styling purposes), you can use add a class parameter:

{tab title="My Title" class="myclass"}

Color Classes

Tabs' stylesheet comes with styling for the classes blue, green, orange, red and grey.

Bootstrap Classes

You can also use the Bootstrap classes primary, info, success, warning and danger / error.

Solid Colors

Tabs comes with ready-to-use solid and color_content classes you can combine with the above mentioned color and state classes:

Custom styling

If you have sufficient CSS knowledge you can also add your own classnames and styling via CSS.

Take a look at the stylesheet that comes with Tabs in: /media/tabs/css/style.css

You can overrule the Tabs stylesheet by copying it or creating your own in: /templates/[YOUR TEMPLATE]/css/tabs/style.min.css

That way you can fully customize the styling of the tabs.

Please note that the css in the style.min.css is compressed (minified). To get the not-minified css, look in the style.css. But Tabs will load the file name style.min.css, regardless of whether the css inside that file is minified or not.
The original LESS files are included in the /media/tabs/less folder.

Here are 2 examples of what you can do.

Styling the tab title

Tabs allows you to style the title you place in the {tab} tag - right inside the tag. So you can make it bold or another font or even place images in there.