The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Post UI Tabs
Use shortcodes within tab name (2 posts)

  1. GideonKimani
    Posted 3 years ago #

    I'd like to use images within the tab name but since I can't use HTML, is it possible to use shortcodes instead?


  2. Mark / t31os

    Plugin Author

    Posted 3 years ago #

    Unfortunately i don't think it would be wise to try and allow shortcodes inside another shortcode, the shortcode parser just doesn't handle these cases extremely well and i'm not really prepared to add another layer of shortcode parsing to the plugin to support it either.

    What i can offer to do though, is to add support for unique classes on the tab names, so you would be able to customize the CSS for tabs on a per tab basis.

    For example, assume this is the tab markup for a moment..

    <div id="tabs-1">
    		<li class="ui-state-default ui-corner-top"><a href="#tabs-1-1">Tab 1</a></li>
    		<li class="ui-state-default ui-corner-top"><a href="#tabs-1-2">Tab 2</a></li>
    		<li class="ui-state-default ui-corner-top"><a href="#tabs-1-3">Tab 3</a></li>
    ... rest of the markup, etc ...

    And now imagine that same markup with unique tab classes, eg.

    <div id="tabs-1">
    		<li class="my-tab-1 ui-state-default ui-corner-top"><a href="#tabs-1-1">Tab 1</a></li>
    		<li class="my-tab-2 ui-state-default ui-corner-top"><a href="#tabs-1-1"><a href="#tabs-1-2">Tab 2</a></li>
    		<li class="my-tab-3 ui-state-default ui-corner-top"><a href="#tabs-1-1"><a href="#tabs-1-3">Tab 3</a></li>
    ... rest of the markup, etc ...

    You then have a unique class for every tab(using ids instead of classes is also an option), giving you room to style those tabs with images if you so choose, for example(based on the above).

    #tabs-1 li.my-tab-1 { background: transparent url(/path/to/image1.jpg) no-repeat center center; }
    /* If you wanted to hide the tab text at the same time */
    #tabs-1 li.my-tab-1 a {
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    	filter: alpha(opacity=0);
    	-moz-opacity: 0;
    	-khtml-opacity: 0;
    	opacity: 0;
    	/* Cross browser opacity */
    #tabs-1 li.my-tab-2 { background: transparent url(/path/to/image2.jpg) no-repeat center center; }
    /* It doesn't need to stop there, you could change the height, padding or whatever you want on a per tab basis this way */

    Naturally if i did add these additional classes to the plugin, i'd have to ensure the tab class names are unique across however many sets of tabs are on the page, so the names would likely run a bit longer than the example i gave above, but it would in essence provide the functionality i've demonstrated.

    Thinking out loud, i could optionally append the post name, id or some other identifier if users such as yourself think it will be useful.

    Let me know what you think.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Post UI Tabs
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.