Add a class to a tab

each tab already has a unique id which can be used for styling.
eg the first tab of the first tabgroup on a page can be targetted using the id: tablist1-tab1

G’day,

That’s fine until a new tab is added, particularly if inserted before existing tabs, and the IDs change. CSS ideally shouldn’t target IDs if at all possible, and this is but one reason.

Also, adding classes allows for the same tab colour across multiple pages, regardless of how many tabs there are in a tab set. e.g. have a colour for Food, another for Wine, another for Technical, etc. and allow for some pages to have Food + Technical, others Wine + Technical, still others Food + Wine + Technical, etc.

cheers,
Ross

Thanks Ross, if you send me a message via the contact form on my site I would be happy to have a look at it a modification that adds this feature, and possibly add it to the plugin.

G’day,

Sorry for dropping the conversation, I got tied up with other work (including my own plugin support).

I took a good look at the plugin code, and can see how it could be a bit complex to add custom-defined classes. What I’ve opted for instead is to add classes based on the tab target, being a cleaned-up version of the tab title. I’ve added classes to the desktop-based list items, the mobile-based heading, and the panel.

https://dl.dropboxusercontent.com/u/26305751/tabby-responsive-tabs.classes.zip

Here’s a patch file so that you can easily see what has changed. There’s some end-of-line whitespace trimming unfortunately, but otherwise you should be able to easily see the minimal changes I made.

https://dl.dropboxusercontent.com/u/26305751/tabby.patch

I hope that you can merge this change into your core code. If not, no problem, I’ll keep a private fork.

cheers,
Ross

Thanks Ross – that looks like a good approach.

This is working well on my test sites, and doesn’t seem to add any overhead or unwanted side effects, so code based on this is likely to be added into the next release v1.3.0 – with this feature credited to you of course.

Thanks, no credit needed, it was all pretty simple. I look forward to it being in the official release sometime ??

cheers,
Ross

I would sorely like this feature. Tabby Tabs is a fantastic plugin, but it is limiting that all the tab lists look the same across my site.

baffo2000, I think what you are asking for is different to what has been discussed on this resolved topic, which is the ability to add unique styles to each tab within a tab group.

If you require the ability to style tabgroups differently on different pages (or even multiple tabgroups on the same page), you can add a wrapping div with a unique class around each set of tabby shortcodes with a div and use these classes in custom CSS with higher specificity to add unique styles to each tab group.

I am planning to switch to tabby responsive tabs as my current plugin is no longer supported and is incompatible with the latest releases of WordPress.

Just one question. I have up to 25 tabs, so the tab headers can occupy 3 rows. My tests with Tabby indicate that this works OK, but is Tabby intended to work this way or is it just a matter of chance (in which case it cannot be guaranteed to work in a future release)?

Regards
Andy

You should have started a new forum thread for this question as it is not related to the topic of this resolved thread.

Guarantee is not a word That should be used when talking about free software.

The plugin’s output is responsive. It was designed so that a single row of tabs is shown when the browser viewport is above a certain width (eg desktop browsers) and displays an accordion wjen the width id below that responsive breakpoint.

The plugin was not intended to display several rows of tabs as that defeats the object of the responsive display. When there are more tabs than can be shown in a single row, they will wrap and there is no reason for that to change in the future. The plugin was not intended to be used like this but it does work. The plugin was designed so that the active tab is visually contiguous with the active content panel. When there are more tabs than can fit in a single row, the active tab may not be adjacent to te content panel so the visual cue of the tab and panel being joined will be lost. When used like this a custom set of styles to make the tabs look more like buttons might improve the display.