The Tabs & Accordions - by default - have a tasteful and neutral styling.
But you can customize them by using a variety of themes, as well as individually styling each tab and accordion with a dedicated color.
Individual Style
Colors
Tabs & Accordions stylesheet comes with the following colors that you can give to each tab or accordion, by using a color="..." attribute.
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Syntax
{tab-nested title="None"}
No color
{tab-nested title="Red" color="red"}
color="red"
{tab-nested title="Orange" color="orange"}
color="orange"
{tab-nested title="Yellow" color="yellow"}
color="yellow"
{tab-nested title="Green" color="green"}
color="green"
{tab-nested title="Teal" color="teal"}
color="teal"
{tab-nested title="Blue" color="blue"}
color="blue"
{tab-nested title="Purple" color="purple"}
color="purple"
{tab-nested title="Pink" color="pink"}
color="pink"
{tab-nested title="Grey" color="grey"}
color="grey"
{tab-nested title="Black" color="black"}
color="black"
{/tabs} You can also set the tabs or accordions to have a random color if you desire, by giving them a color="random" attribute.
Random
My first tab
Random
My second tab
Random
My third tab
Random
My fourth tab
Syntax
{tab title="Random" theme="Colorful" color="random"}
My first tab
{tab title="Random" color="random"}
My second tab
{tab title="Random" color="random"}
My third tab
{tab title="Random" color="random"}
My fourth tab
{/tabs} Colored Panels
By adding a color-panels="true" attribute to the first tab/accordion of a set, the content of the block will also be colored. For example:
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Syntax
{tab title="None" active="random" theme="Colorful" color-panels="true"}
No color
{tab title="Red" color="red"}
color="red"
{tab title="Orange" color="orange"}
color="orange"
{tab title="Yellow" color="yellow"}
color="yellow"
{tab title="Green" color="green"}
color="green"
{tab title="Teal" color="teal"}
color="teal"
{tab title="Blue" color="blue"}
color="blue"
{tab title="Purple" color="purple"}
color="purple"
{tab title="Pink" color="pink"}
color="pink"
{tab title="Grey" color="grey"}
color="grey"
{tab title="Black" color="black"}
color="black"
{/tabs}{tab title="None" active="random" theme="Colorful" color-panels="true"}
No color
{tab title="Red" color="red"}
color="red"
{tab title="Orange" color="orange"}
color="orange"
{tab title="Yellow" color="yellow"}
color="yellow"
{tab title="Green" color="green"}
color="green"
{tab title="Teal" color="teal"}
color="teal"
{tab title="Blue" color="blue"}
color="blue"
{tab title="Purple" color="purple"}
color="purple"
{tab title="Pink" color="pink"}
color="pink"
{tab title="Grey" color="grey"}
color="grey"
{tab title="Black" color="black"}
color="black"
{/tabs} Extra Class
To add an extra class to a tab or accordion (for styling purposes), you can use add a class parameter:
{tab title="My Title" class="myclass"}Styling the Title
You can style the title of a tab/accordion - right inside the tag. So you can make it bold or another font or even place images in there.
Title with some styled text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Look, an image!
Aenean commodo ligula eget dolor. Aenean massa.
Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Ṩῥἕcịᾳḻ ḈĦẚrḯḉṯɇṛş
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim.
Syntax
Indentation in example code is just for clarity. You should not indent your tags and text.
{tab title="Title with some styled text"}
[TEXT]
{tab title=" Look, an image!"}
[TEXT]
{tab title="Ṩῥἕcịᾳḻ ḈĦẚrḯḉṯɇṛş"}
[TEXT]
{/tabs} Themes PRO
Tabs & Accordions Pro also come with several different themes that you can use.
The Free version only offers the Neutral and Custom themes.
You can select your Default theme in the Plugin Settings, or override it in each set of tabs/accordions by adding it to the first syntax, eg:
{tab title="My Tab Title" theme="Accent Lines"}Here is a showcase of all the available themes:
Neutral
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Accent Lines
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Colorful
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Dark
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Light
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Lines
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Lines Colorful
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Minimal
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Pills
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Pills Colorful
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Pills Dark
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Pills Light
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Pills Minimal
None
No color
Red
color="red"
Orange
color="orange"
Yellow
color="yellow"
Green
color="green"
Teal
color="teal"
Blue
color="blue"
Purple
color="purple"
Pink
color="pink"
Grey
color="grey"
Black
color="black"
Dynamic Heights PRO
By adding a dynamic-heights="true" attribute to the first tab/accordion of a set, the active tab handle will become larger to make the distinction clearer.
Vice versa, if this feature is enabled by default in the Plugin Settings, you can disable it by adding a dynamic-heights="false" attribute to the first tab/accordion of a set.
Custom Styling
You can override styles via template CSS overrides. How to override the CSS files, can differ depending on the template you use. So you might need to ask your template developer for support on that.
Here is the information Joomla provides for the standard way:
https://docs.joomla.org/Understanding_Output_Overrides#Media_Files_Override
You can check the CSS files that come with Tabs & Accordions to see how to style things (see the media/tabsaccordions/css and media/tabsaccordions/scss folders).
Custom Theme
You also have the ability to choose the 'Custom' theme. This will result in pretty much no styling at all. And you will need to override the custom.css (and custom.min.css) file via your template.
Only use this option if you fully understand how CSS works and you know what you are doing.