[Plugin: Arconix Shortcode Collection] 2 instances of Tabs on 1 page with different styles

Hi Kevin,

Thank you for the kind words. I’m glad you like the plugin. How did you originally customize the CSS for your tabs? Did you modify my plugin’s css directly or did you create your own CSS file? Is that site on the web that I could take a look at?

Sure the site is: https://tinyurl.com/7cnbjkm

The first instance of Tabs is on the top left of the homepage – under the logo – the Residential and Commercial links. The CSS for this I moved to my own CSS file located here: https://tinyurl.com/79pwkps

For the buttons (homepage) and accordion (Company Info/Meet the Team) I have the CSS here: https://tinyurl.com/858lo6a

Thanks for your quick reply!

I gotcha…

You have a couple options here, but either way you’re going to have to make some CSS adjustments. The easiest way I see is to make an adjustment to the top-left tabs vs the “standard” tabs, assuming you see yourself making fewer customized tabs than “standard” ones.

In such an event, in your plugins.css file add #page-15 before each arconix-... class declaration and that should take care of it.

Thanks for the input!

I added that like: “#page-15.arconix-tabs-horizontal{position:relative;}” (without the quotes, of course) to all the arconix classes in my plugin.css and it did change the new/2nd tab instance back to the default styling, BUT it also changed the 1st/customized instance I have at the top too – it got rid of my custom styling completely.

What am I missing?

1. I should have told you #post-15 not #page-15, my apologies
2. There should be a space between #post-15 and .arconix-...
3. Make sure you’re putting #post-15 before each .arconix-... declaration and not just the 1st one.

In order to build a “standard” tab group, you’ll have to add further specificity to your customized tabs, just like we’ve done with the home-page tabs, that way we make sure we only fire customized tabs css when it’s needed.

Does that make sense?

Brilliant! That worked perfectly.

Off to start styling this one now. ?? Thanks again so much for your help. Keep up the good work!

Hey i’m back!

I’m digging up this old post just so you can see the history of my setup that you helped me with a few months ago on my site at https://tinyurl.com/blfaym6.

Everything you helped me with (the way you see it now on my live site) works flawlessly.

HOWEVER, I’m now for the first time trying to add a new tab to the top, left instance of Tabs on my homepage (where you see Residential and Commercial tabs). But, for some strange reason any new [tab] I add to that area also shows up in the bottom right tab instance on my homepage.

The reverse is not true. In other words, I can add a new tab to the instance featured in the widget on the bottom right of my homepage (where you see Experience Geothermal, etc) and all works well.

But again, when I try to add a new tab in the top left instance (on post-15) it shows up in the bottom right widget instance as well.

I don’t get it?!

Hi Kevin,

Looking really good. Yeah, that’s was a bug in how I handled parsing each individual tab. I fixed that bug in v1.0.3, and it looks like you’re running 1.0.2. If you update, it should fix that issue

Worked perfectly! You’re the man, as usual!!! Thanks again for the quick reply.

you’re welcome!