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

  • Resolved Kevin Fisher


    Awesome plugin! I’m using it on a new site – I have Tabs and Buttons on my homepage and Accordion and Bullets on interior pages.

    But, I need to add another instance of Tabs on the homepage in another widget area. My first instance I highly customized the CSS to fit my design. However, for this second instance I want it to look more like your Tabs demo and the default styles.

    How can I change the PHP (or whatever) so that I can use a different set of CSS styles for this 2nd instance?

    I tried a couple of other Tab plugins first to get around this problem but they all conflicted with the older jQuery library and broke Shortcodes already in use. I’d rather just use your plugin to do it all if possible.

    Thanks for any help you can provide!!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author John Gardner


    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:

    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:

    For the buttons (homepage) and accordion (Company Info/Meet the Team) I have the CSS here:

    Thanks for your quick reply!

    Plugin Author John Gardner


    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?

    Plugin Author John Gardner


    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

    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?!

    Plugin Author John Gardner


    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.

    Plugin Author John Gardner


    you’re welcome!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Plugin: Arconix Shortcode Collection] 2 instances of Tabs on 1 page with different styles’ is closed to new replies.