This isn’t supported directly by the plugin, but is possible with a bit of tweaking. The way to do this would be to use a child theme and follow the instructions in the plugin’s FAQ to copy the plugin’s styles into the child theme’s stylesheet. You will need to a a small snippet of php to the child theme’s functions.php to then prevent the default styles from loading.
Viewing the page source will enable you to identify unique classes to apply unique styles to specific tab groups on specific pages.
Thread Starter
rainyg
(@rainyg)
Hi cubecolour,
Thanks for your speedy reply!
So basically I’ll have to add
<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>
into the child theme’s function.php to prevent the loadup of the default style.
But how do I actually create 2 different sets of styling for each set of tabs? The class names will remain the same even though they’re in a different page right? So in this case, is it possible to create unique class/ids for the 2 different sets of tab?
For example
I have the first group of tabs:tab 1, tab 2, tab 3 in the homepage
and I would like a second group of tabs: tab 4, tab 5, tab 6 in the about page.
I would like to customise the styling for the 2 different set of tabs.
Sorry if I did not manage to fully understand what you meant in your reply! Really appreciate your help
Thread Starter
rainyg
(@rainyg)
Hi all~ just a little update.
I’m not sure if this is the right way of doing this but I’ve resolved this by creating and hiding an empty tabby div where the shortcode is at.
<div id="hiddentabby">[tabby][tabbyending] </div>
[tabby title="First Tab"]
Tabby ipsum dolor sit amet, kitty sunbathe dolor, feed me.
[tabby title="Second Tab"]
Lay down in your way catnip stuck in a tree, sunbathe kittens.
[tabbyending]
This way, the tablist count adds by 1 thus giving them a unique ID!
Thanks for your help once again cubecolour!
I probably wouldn’t have thought of that but if it works for you it should be fine. It might be worth bearing in mind however that this could potentially cause issues in the future if you add any more tabgroups. my preferred approach would probably to target individual pages using any page specific classes added to the body tag – although the presence of these would depend on the theme used.
Thread Starter
rainyg
(@rainyg)
Could you be so kind to guide me through an example of how I can actually target an individual page using that “page specific” classes? I’ve done a google search and it seems like I’ll have to edit the javascript codes? I’m still quite raw at programming so pardon me if my question might seem a little silly to you hehehe
I should be able to have a look at this for you & give you some more specific pointers if you can post links to the pages on your site where you want to style the tabs.
The tabby responsive tabs customiser add-on plugin can probably be used to help build the styles you need for each set of tabs, and then the css that generated can be copied into your child theme with greater specificity applied to target specific pages/tabgoups.
Thread Starter
rainyg
(@rainyg)
Hi! I’ve managed to create the page-specific classes and they’re working well! 🙂
Thanks for the fantastic suggestion!
Great – glad you got it working.
If you’d like to leave a review of the plugin, you can do so at https://wordpress.org/support/view/plugin-reviews/tabby-responsive-tabs
