This isn’t supported directly by the plugin, and although the optional Tabby Responsive Tabs Customiser add-on can help produce custom styles without coding, it doesn’t include anything to add images or target unique styling attributes to individual tabs.
You can however use some custom css to achieve what you have described by applying an image background to each tab and hiding the text. You will probably also want to specify an alternative image to be show to indicate when the tab is selected.
The index numbers for tablist and tab in the selectors below indicate which tab group on the page and which tab in that tab group is being selected.
for example:
#tablist1-tab1 {
background: url("images/jake.png");
text-indent: -9999px;
height: 100px;
width: 100px;
}
#tablist1-tab2 {
background: url("images/milo.png");
text-indent: -9999px;
height: 100px;
width: 100px;
}
#tablist1-tab3 {
background: url("images/bella.png");
text-indent: -9999px;
height: 100px;
width: 100px;
}
#tablist1-tab4 {
background: url("images/fizz.png");
text-indent: -9999px;
height: 100px;
width: 100px;
}
#tablist1-tab1.responsive-tabs__list__item--active {
background: url("images/jake-alt.png");
border: none;
}
#tablist1-tab2.responsive-tabs__list__item--active {
background: url("images/milo-alt.png");
border: none;
}
#tablist1-tab3.responsive-tabs__list__item--active {
background: url("images/bella-alt.png");
border: none;
}
#tablist1-tab4.responsive-tabs__list__item--active {
background: url("images/fizz-alt.png");
border: none;
}
If you have tabs on more than one page and you only want to style tabs on a particular page, you should also add a body class in front of each selector to target that page only so that any tabs on other pages are not affected by these styles.
The recommended way to use add css to target the tabs is outlined in the plugin’s documentation.
The shortcodes used to create the tabs are designed to be as simple and easy to use as possible. The optional customiser add-on does add basic tinyMCE buttons to the visual editor to help with adding the shortcodes, however this manually adding the shortcodes should not present any problems.
