Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #189

In Tab Panel Magic 1 when I add more than 5 tab panels, only the first five have styled tab buttons. Can I have more than 5 tab panels on a page and have all tab buttons styled?

The Answer

Prepared Jul. 2006 by Al Sparber, PVII

Note: The Tab Panel Magic 1 system has been retired.
The newer Tab Panel Magic 2 system includes this a built in feature, you can add as many Tabs as you like. The TPM2 system even offers automatic scrolling of the tabs when there are more tabs than can fit in the allotted space. Upgrade pricing from TPM1 is available.

 

Yes. While, Tab Panel Magic 1 CSS is designed to support 5 tab panels, it's easy to increase the number of panels supported by simply editing a few CSS rules.

To Deploy this solution...

- Look for the following CSS selector names in your Tab Panel Style sheet:

#p7TP1 .p7TP_tabs a, #p7TP2 .p7TP_tabs a,
#p7TP3 .p7TP_tabs a, #p7TP4 .p7TP_tabs a,
#p7TP5 .p7TP_tabs a {...}

#p7TP1 .p7TP_tabs a:focus, #p7TP2 .p7TP_tabs a:focus,
#p7TP3 .p7TP_tabs a:focus, #p7TP4 .p7TP_tabs a:focus,
#p7TP5 .p7TP_tabs a:focus {...}

#p7TP1 .p7TP_tabs a:hover, #p7TP2 .p7TP_tabs a:hover,
#p7TP3 .p7TP_tabs a:hover, #p7TP4 .p7TP_tabs a:hover,
#p7TP5 .p7TP_tabs a:hover, #p7TP1 .p7TP_tabs a:active, 
#p7TP2 .p7TP_tabs a:active, #p7TP3 .p7TP_tabs a:active, 
#p7TP4 .p7TP_tabs a:active, #p7TP5 .p7TP_tabs a:active {...}

#p7TP1 .p7TP_tabs div.down, #p7TP2 .p7TP_tabs div.down,
#p7TP3 .p7TP_tabs div.down, #p7TP4 .p7TP_tabs div.down,
#p7TP5 .p7TP_tabs div.down {...}

#p7TP1 .p7TP_tabs div.down a, #p7TP2 .p7TP_tabs div.down a,
#p7TP3 .p7TP_tabs div.down a, #p7TP4 .p7TP_tabs div.down a,
#p7TP5 .p7TP_tabs div.down a {...}

Note: We've omitted the actual properties and values to save space and replaced them with an ellipsis inside the curly braces.

Each rule contains muliple selector names, separated by commas, each referencing a specific Panel ID. The default selectors range from #p7TP1 to #p7TP5. To support styling of tab buttons for more than 5 Tab Panels, simply append each selector to reference IDs that relate to the additional Tab Panels on your page. For example, if you add a 6th Tab Panel on your page, add a reference to #p7TP6 so that your rules look like this:

#p7TP1 .p7TP_tabs a, #p7TP2 .p7TP_tabs a,
#p7TP3 .p7TP_tabs a, #p7TP4 .p7TP_tabs a,
#p7TP5 .p7TP_tabs a, #p7TP6 .p7TP_tabs a {...}

#p7TP1 .p7TP_tabs a:focus, #p7TP2 .p7TP_tabs a:focus,
#p7TP3 .p7TP_tabs a:focus, #p7TP4 .p7TP_tabs a:focus,
#p7TP5 .p7TP_tabs a:focus, #p7TP6 .p7TP_tabs a:focus {...}

#p7TP1 .p7TP_tabs a:hover, #p7TP2 .p7TP_tabs a:hover,
#p7TP3 .p7TP_tabs a:hover, #p7TP4 .p7TP_tabs a:hover,
#p7TP5 .p7TP_tabs a:hover, #p7TP1 .p7TP_tabs a:active, 
#p7TP2 .p7TP_tabs a:active, #p7TP3 .p7TP_tabs a:active, 
#p7TP4 .p7TP_tabs a:active, #p7TP5 .p7TP_tabs a:active,
#p7TP6 .p7TP_tabs a:active {...}

#p7TP1 .p7TP_tabs div.down, #p7TP2 .p7TP_tabs div.down,
#p7TP3 .p7TP_tabs div.down, #p7TP4 .p7TP_tabs div.down,
#p7TP5 .p7TP_tabs div.down, #p7TP6 .p7TP_tabs div.down {...}

#p7TP1 .p7TP_tabs div.down a, #p7TP2 .p7TP_tabs div.down a,
#p7TP3 .p7TP_tabs div.down a, #p7TP4 .p7TP_tabs div.down a,
#p7TP5 .p7TP_tabs div.down a, #p7TP6 .p7TP_tabs div.down a {...}

That's it!

Back to the questions list