Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
22nd February 2011

Creative Spry Tabbed Panels

Dreamweaver uses the Spry framework to add interactivity to a page. here we experiment with the Spry Tabbed Panels widget to create an attractive finish

Creative Spry Tabbed Panels

THE SPRY FRAMEWORK is a JavaScript library that has a host of powerful widgets that give designers the option to incorporate rich user experiences without the need to code. The current widget line-up includes Spry Tabbed Panels, the flexible, functional and space-saving widget. Introducing tabbed panels in Dreamweaver is relatively simple and painless, but it is the manipulation of the CSS that takes the widget to a new level. The standard layout is grey and uninspiring and desperately needs an injection of imagination and colour. The widget is effectively made up of a selection of div tags which are styled using CSS. All the div tags within the widget are customisable via the associated CSS file. Users can manipulate the individual tabs, introduce background images and control the style of the content. Here we’re going to introduce some concepts and techniques to give tabbed panels a splash of colour and style.

01 Add tabbed panels

Creative Spry Tabbed Panels

To add the basic tabbed panels go to Insert>Spry>Spry Tabbed Panels. The page will need to be saved before adding the widget. The default widget is equipped with two tabs and two content areas. To add more select the whole widget and click the blue tab in the top-right corner to activate the appropriate Properties panel.

02 New tabs

Creative Spry Tabbed Panels

To add a new tab/panel simply press the ‘+’ button in the Properties window. Add as many as needed. These can be rearranged into order, however all are going to be renamed, negating the need to arrange. The first item to work on is the tabs. Double-click TabbedPanelsTab in the CSS Styles panel and remove all borders.

03 Change text and font

Creative Spry Tabbed Panels

The Tabbed Panels widget adds default text for each tab, eg <li class=”TabbedPanelsTab” tabindex=”0”>Tab 1</li>. Select the text, delete and add your own text. Now double-click TabbedPanelsTab to view the current font options. Select the desired font from the Font-family drop list and select the desired font size.

04 Resize tabs

Creative Spry Tabbed Panels

By default the tabs in the widget do not have any set height or width. For this tutorial the aim is going to be to stack the text over two lines, and this will be achieved by setting the width of the tabs. Switch to the Box category and then set the width to 100 pixels (or whatever width is suitable for you).

05 Padding

Creative Spry Tabbed Panels

The default tabs have a selection of padding options to help position the text. This can be modified to position as you desire. In this example the left and right padding has been removed and the width of the tab extended to compensate. The text has been centred via Block>Text-align.

06 Tab spacing

Creative Spry Tabbed Panels

By default the spacing between the tabs is set at one pixel to the right. To push the tabs further apart it is simply a matter of increasing the padding. Select the Box category and change the right margin from 1 to 2. Now press Apply, save the CSS file and preview the page via F12, or File>Preview in Browser.

07 Coloured tabs

Creative Spry Tabbed Panels

The tabs in the widget have three different states; normal, selected and hover. Each state is assigned a different colour. To modify the normal state colour go to TabbedPanelsTab and choose a new colour. To modify the hover state go to the TabbedPanelsTabHover class. To modify the selected state visit TabbedPanelsTabSelected.

08 Background images

Creative Spry Tabbed Panels

Now it is time to create background images to add a little more style for the different states. The tabs are currently 110px wide and 70px high. Add the 4px padding to get a total of 118px and 78px. Take away 5px from height for the pointer to be added and create in Photoshop.

09 Apply images

Creative Spry Tabbed Panels

First delete all the current background colours for Tab, TabHover and TabSelected. Select TabbedPanelsTab and add buttonnormal.png as the background image and set background-repeat to no-repeat. Next add buttonhover. png to TabbedPanelsTabHover and buttonselected02. png to TabbedPanelsTabSelected.

10 Content

Creative Spry Tabbed Panels

The widget has a content area which is associated with each tab. To customise, double-click TabbedPanelsContentGroup and remove all borders except the bottom. This will be styled to give the content a defined finish point. Now select TabbedPanelsContent and delete any background colour.

11 Add content

Creative Spry Tabbed Panels

The final step is to create content to appear in each panel. To populate a panel, first select a tab and click the eye icon. This will display the corresponding content panel. The height of the content panel is undefined so it will expand to fit any content. Now add content using standard HTML and CSS.

12 Font alternatives

Creative Spry Tabbed Panels

The advent of web fonts means that designers can incorporate new styles without worrying if the font will be substituted. One solution is the Google Font Directory at http://code.google.com/webfonts. Select a font, click Get the code, copy and paste the code and put into the head of the page. Now add into the CSS as normal.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Pingback: DesignFiltr | Web Design Photoshop Tutorials Social Resources And News

    • alvaro echeverria

      Great, clear and precise.
      This is a good example of a plenty and usefull tutorial
      Thanks

    • ishwar

      GREAT INVENTION

    • Drew

      I’d like to use a different image for each tab – ie. social icon tabs – how do I do this?

      create different classes for each tab? each with a background image?

    • Rony

      How would i set up a button that would allow me to add and remove tabs?
      Thanks

    • Andy

      very informative.

      How can you add two or more spry tab panels in one website page? I have especially having problem with the Spry tab panels JS files. Is it also possible to place your custom id and class names in the predetermined id and class names? THanks

    • Heather

      I can’t seem to remove the dotted border Firefox is applying to these tabs once selected. I’ve tried various solutions listed online but none of them seem to be working. Thanks

    • http://www.icpnetworks.co.uk/ Bob Scott

      Hi

      Can the tabbed panel be selected by sending a querystring to the page with the spry tabbed panels on it.

    • joselito

      hi, i would like to ask, even this question has been ask from above thread but i cant seem to find the answer.
      >> i wanted to create an interactive looks tabbed panel using different backgrounds of each tabbed. i tried to alter the .TabbedPanelsTabSelected by removing the background color and make ids to each of the LIs inside the TabbedPanelsTabGroup / TabbedPanelsContentGroup. and from the ids i assigned colors. but it seems it isnt working. can u please help me in this matter. this is just my hobby, i dont study these at school. i would like to create a tabbed panel that looks like organizer, that each tab and its content will have corresponding color. thanks

      to bob scot:
      do you mean hyperlink to the next tab, i found this and this seems to be working.from tab1 i used a anchor tag to navigate specifically to some page of tab5. sorry i am noob.

      open first panel
      open panel

    • joselito

      a href = #tab5page4 onclick = TabbedPanels1.showPanel(tab5) open first panel

    • http://joponiwyvek.wordpress.com/2013/04/19/getting-the-website/ awsome site

      WOW just what I was looking for. Came here by searching for john mccain website

    • http://fortunatedevil720.soulcast.com http://fortunatedevil720.soulcast.com

      Heya! I just wanted to ask if you ever have any problems with hackers?
      My last blog (wordpress) was hacked and I ended up losing months of hard work due to no
      backup. Do you have any methods to prevent hackers?