4 Replies Latest reply: Apr 18, 2012 12:35 AM by gribblethwaite RSS

    How can I format individual words in a TabbedPanel2 tab?

    gribblethwaite Community Member

      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

       

      Jeremy

        • 1. Re: How can I format individual words in a TabbedPanel2 tab?
          Ben Pleysier CommunityMVP

          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.

          • 2. Re: How can I format individual words in a TabbedPanel2 tab?
            gribblethwaite Community Member

            Hi Gramps

             

            Many thanks for your reply. I do understand how to change things for individual tabs, as long as it is for the whole tab, so background colours and images, text colours etc can all be done via css as you suggest - although I did it a slightly different way that I think will work with IE8 and below by IDing each tab because I have a fixed number of tabs/panels, then styling the ID via css.

             

            What I really want to do is create a similar effect as the tabs I made on this page: www.axter.co.uk/excelspot6-10.html where I mix images and text and use <br> to split and justify them. I used the V1 TabbedPanel on that site, and it does all I need so the simplest thing may be just to regress to V1 on the site I'm working on now. I just figured V2 must be better...

             

            Thanks again for your help - any further comment would be very welcome.

             

            Jeremy

            • 3. Re: How can I format individual words in a TabbedPanel2 tab?
              Ben Pleysier CommunityMVP

              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>

                  <div class="TabbedPanelsTab PanelSelectorButtonUnselected">

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

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

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

                  </div>

                </div>

                <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.

               

              Gramps

              • 4. Re: How can I format individual words in a TabbedPanel2 tab?
                gribblethwaite Community Member

                Hi Gramps

                 

                Thank you very much for your reply.

                 

                I think you are right, V1 is the way to go. I shall rip out the V2 code and regress.

                 

                As far the the menus go I think there is one great reason to keep it and one great reason to change - It is a hopeless mess in design mode, you HAVE to check it in live mode and you cannot easily select anything under the menu - a fault in Dreamwever that will need significant work to fix. On the other hand, Menu V1 does not work properly on touch devices - it was to get a site working on the iPad that forced my change to Menu2.

                 

                I will, therefore go with Menu2 and TabPanels1.

                 

                Once again, thank you for your comments. Maybe CS6 will bring good news???

                 

                Jeremy