Skip navigation
Currently Being Moderated

How can I format individual words in a TabbedPanel2 tab?

Apr 17, 2012 3:45 AM

Tags: #format #tab #ajax #sprytabbedpanels2

It seems that HTML tags are ignored in a SpryTabbedPanels2 tab. I know how to put a background image in via css, but I cannot then align the text to the bottom of the tab, so I cannot fake a large first word with an image. I would like to:

1/ Be able to format individual words in the tab

2/ Insert images anywhere in the tab (like you could in the old TabbedPanel)

3/ Insert breaks <br> in the tab (like you could in the old TabbedPanel)

4/ Align text within the tab.

I realise there are four questions here, but they all seem very related to me and hopefully with have either one or four tightly related answers.


Many thanks



  • Currently Being Moderated
    Apr 17, 2012 7:54 AM   in reply to gribblethwaite

    Try adding this

    #TabbedPanels2.TabbedPanels .TabbedPanelsTab.TabbedPanelsTabFirst {

        background: black;

        color: yellow;


    #TabbedPanels2.TabbedPanels .TabbedPanelsTab:nth-child(2) {

        background: orange;

        color: blue;


    #TabbedPanels2.TabbedPanels .TabbedPanelsTab.TabbedPanelsTabLast {

        background: yellow;

        color: green;


    The background can be an image


    Unfortunately nth-child does not work in IE8 and lower. If you want to do that, you will need to make some changes in SpryTabbedPanels2.js.

    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 5:07 PM   in reply to gribblethwaite

    You have probably also noticed that

    <div id="TabbedPanels2">

      <h2>Tab 1</h2>

    changes to

    <div class="TabbedPanels" id="TabbedPanels2">

        <div class="TabbedPanelsTabGroup">

        <div class="TabbedPanelsTab TabbedPanelsTabFirst PanelSelectorButtonUnselected">

          <a href="#">Tab 1</a>


        <div class="TabbedPanelsTab PanelSelectorButtonUnselected">

            <a href="#">Tab 2</a>

        </div><div class="TabbedPanelsTab TabbedPanelsTabLast TabbedPanelsTabSelected">

            <a href="#">Tab 3</a>



      <div class="TabbedPanelsContentGroup">

          <div class="TabbedPanelsContent PanelHidden" style="display: none; ">

            <h2 style="display: none; ">Tab 1</h2>

    once it has been through the JS mill.


    My thoughts, although the original version may seem a little bloated, it is robust and easy to customise. Version 2 is slightly more agile and has a few more features, but is an ugly beast when it comes to customisation. In fact the two versions, apart from the Spry name, bear no resemblence to each other.


    I have stuck with the original version as I have done with the menubar.



    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points