Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
8th July 2009

Style Spry widgets with CSS

ADOBE’S SPRY FRAMEWORK MAKES CREATING DYNAMIC CONTROLS EASY, BUT IT’S UP TO YOU TO MAKE THEM LOOK GREAT

Style Spry widgets with CSS
ADOBE’S SPRY FRAMEWORK MAKES CREATING DYNAMIC CONTROLS EASY, BUT IT’S UP TO YOU TO MAKE THEM LOOK GREAT.

THE INTRODUCTION OF Spry elements into Dreamweaver CS3 gave designers a whole new set of tools to work with. No need for intricate JavaScript knowledge or time-consuming CSS issues, a couple of clicks and Dreamweaver does the job for you. This is perfect for quick creation of dynamic page elements, but the default line-up is at best functional. The colours and borders can be modified so that the Spry Accordion in its various states matches the theme of the page. However, to fully realise the potential of the Accordion widget, a little imagination and knowledge needs to be employed. We used the Apple Downloads page (www.apple.com/downloads) as our inspiration. To create the effect, a number of background images are called into action, found on the disc, along with some additional CSS. The creation of individual CSS classes for each div tag in the code makes sure that there is far greater control over the output.

Download the Tutorial Files
Originally appeared in Web Designer Issue 147 – Author: Steven Jenkins

01 New label
Style Spry widgets with CSS
To get started, place the mouse cursor on the page where the Spry component is to be placed, head to the Insert menu and select Spry>Spry Accordion. Dreamweaver will ask Please save this document before inserting widgets; press OK and save the file in the desired location. Now save the file again and head to File>Preview in Browser to see the Accordion in action and appreciate its function. By default, the Spry component displays two panels named Label 1 and Label 2. To add an additional label to the
proceedings, click the blue tag to display the Properties window, if not already on display. Next, click the Add Panel (+) button to add another panel to the Accordion. To rearrange the labels, select the appropriate label and use the accompanying up and down arrows to order it as you wish. By default, the Accordion is given the name Accordion1; you may change this to a more relevant one if necessary or if desired.

02 Rename div tags
Style Spry widgets with CSS
By default, the Spry Accordion code in Dreamweaver is generic for all tabs, panels and content. When the CSS for the AccordionPanelTab is modified, this affects all the panels in the widget. This is perfectly okay for a quick creation of a widget, but to give greater control over the creation process, we are going to create classes for every element, ie panel and content. This will allow each panel to decide its own colour, borders and the rest. Switch to Split View to view the div tags to be modified: AccordionPanelTab and AccordionPanelContent. AccordionPanel is essentially a container tag and will be modified at a later date. In the top panel, labelled Label 1 and Content 1, rename AccordionPanelTab and AccordionPanelContent as ‘AccordionPanelTab1’ and ‘AccordionPanelContent’. Now repeat these steps for the remaining panels and content, simply adding ‘2’ for the second set and ‘3’ for the third set.

03 Copy and paste
Style Spry widgets with CSS
Now open the SpryAccordion.css file, if not already open, and locate the .AccordionPanelTab class. Select the complete code set and hit Ctrl+C to copy. Now paste the code three times just after the original code. Head back to the first of the newly copied code and rename the .AccordionPanelTab class as ‘.AccordionPanelTab1’. Head to the next set of code and rename .AccordionPanelTab2 and rename the final pasted code as ‘.AccordionPanelTab3’. Next, find the .AccordionPanelContent class and copy and paste the code three times after the original code. Now rename the code ‘.AccordionPanelContent1’, ‘.AccordionPanelContent2’, ‘.AccordionPanelContent3’. You will now have all the necessary CSS code that corresponds with the div tags in the HTML page. This will allow the individual panel and content tags to be styled individually. This is essential to help achieve the desired design at the end of this tutorial.

04 Remove borders
Style Spry widgets with CSS
To start the Spry transformation, first add background images to the individual tabs. We have provided the files on the disc. Double-click .AccordionPanelTab1 in the CSS panel to open the Rule Definition window, delete the current background colour, hit Browse, select silvert.gif followed by no-repeat, and press Apply and OK. Open the .AccordionPanelTab2 class, add the silverm.gif image, select no-repeat and press Apply and OK. Finally, add the silverb.gif image to the .AccordionPanelTab3 class. Save the CSS file and head to File>Preview in Browser to see the new-look widget. All the panel tabs in the widget boast a border; to remove, open the AccordionPanelTab1 class, select Border and delete any content. Repeat this step for the other two AccordionPanelTab classes. This will leave a border left, right and centre. This belongs to the Accordion class; double-click to open, head to Border, delete any content and press Apply and OK.

05 Text styling
Style Spry widgets with CSS
Now preview the current build in your favourite browser and see how the widget is starting to take shape. Currently, the Accordion container tag expands to the width of the page. To fit the widget to the current selection, open the Accordion class, select Box and add 188 pixels to the Width box. This is the width of the background images used in the AccordionPanelTab classes. The next step is to modify and position the text in each of the panels. To change the actual text, ie Label1, select and type in the new title and repeat this for each panel. To style the text, first open the corresponding class, ie AccordionPanelTab1. Now select a font from the drop-down list; we are using Calibri, a Windows Vista font. Choose the size and colour – we have chosen 13 and a very dark grey (#333333). Repeat this process for the other two panel tabs. Changing the font will automatically resize the panel height. Head to the AccordionPanelTab class, select Box and make the height 24 pixels to accommodate the whole background image, and repeat for all. Currently, the padding is two pixels all-round; change this, eg, Top; 5 pixels, Left: 4 pixels, to position the titles. To compensate for the padding and make sure all the panels meet properly, adjust the height for each panel, eg, 24 pixels – 5 pixels = 19 pixels. If using a different font, adjust the padding and height to suit.

06 Style content boxes
Style Spry widgets with CSS
By default, the content panels do not have any borders, giving the widget a very open look. To give the widget more structure, a couple of borders are going to be added to each. Double-click .AccordionPanelContent1 in the CSS panel, select Border and uncheck all the Same for all checkboxes. Under Style, select Solid for Left and Right, under Width add one pixel for Left and Right and finally, under Color, add #EEEEEE for Left and Right. Save the CSS file and repeat the same selections for .AccordionPanelContent2 and .AccordionPanelContent3. Each content panel only contains the default text, ie Content1. Before adding any content, padding needs to be put in place to keep it away from the left and right borders. Open .AccordionPanelContent1, add four-pixel padding Left and Right, save and repeat for the remaining two content panels. Finally, before adding any content to the content panel, determine the font, font size and style via each of the .AccordionPanelContent2 classes. Again, we have chosen Calibri at 13 pixels in dark grey.

07 Create content
Style Spry widgets with CSS
Each content panel can contain any content that you wish, but here we are going to add a list of text links. This can be added using the paragraph <p> tags, unordered or ordered lists or simply the <br> tag. We have used the latter. After adding the content for the first content panel, it is a good idea to copy and paste into the remaining panels. This gives consistency and also saves time. Head to the HTML file, locate the current text, ie Content 1, Content2, Content3, and replace with the new text. To complete the text in each panel, add a link by selecting the text and adding in a link in the Property Inspector. This will revert the links to the default blue and underline style. To change the style to match the original text style, first head to Modify>Page Properties>Links. Select the appropriate font and size, change all the link options to the same colour and select Never underline from the Underline style drop-down list, and press Apply and OK.

08 Alternative backgrounds
Style Spry widgets with CSS
Currently, each time a panel opens, it retains the same silver background image as added before. The next step is to add an alternative background each time a panel opens, and change the colour of the text to make it more visible on the darker background. Head to the CSS file and copy and paste three versions of the .AccordionPanelOpen .AccordionPanelTab and name accordingly. Double-click .AccordionPanelOpen .AccordionPanelTab1, select Type and match the font, size and colour to the same style used back in step five. Select Background, delete the Background color and add the image bluet.gif. Repeat this, adding bluem.gif to .AccordionPanelOpen .AccordionPanelTab2 and bluem. gif to .AccordionPanelOpen .AccordionPanelTab3. Style the text for all. The text hover effect is still applied to the text in the panel tabs in both their open and closed states. Change the .AccordionPanelTabHover colour to the same as in the title defined in step five (#333333). Change the .AccordionPanelOpen .AccordionPanelTabHover colour to the same as defined before (#FFFFFF). Save and preview.

09 Finishing touch
Style Spry widgets with CSS
When the bottom panel is open, it currently lacks a bottom border. However, simply adding a bottom border will add a straight line, spoiling the effect that the curved background images have created. Quickly view the current state of the widget to appreciate this comment. We are going to add a curved outline background image to complete the look and give consistency to the design. Adding a background image inside the bottom content panel will mean that the image and border do not line up properly. Adding the image outside the div tag means that it will not line up when the bottom panel is closed. To achieve the desired effect, we are going to use an AP div (Absolutely Positioned div tag). Switch to the HTML file and go to Insert>Layout Objects> AP Div. Copy the code <div id=”apDiv1”></div> and paste after the last content in content panel 3. This will be added to the CSS panel as #apDiv1; double-click to open and add the curvebottom.gif image via Browse in Background and select no-repeat so only one instance is seen. Now click on the div and resize using the resize handles, getting as close to the image outline as possible. Now save and preview to see how well positioned it is. Move into position before using the L (Left) and T (Top) boxes for perfect positioning.

Tags: , ,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Adel

      Hi

      I am unable to see the images that illustrate the css styling of the spry widgets

      are the links broken?

      thanks for this post

    • Sean Donnelly

      Greetings from across the pond.
      Nice tutorial, but after the first image, ALL of the images in this tutorial are essentially ‘dead’,
      as in UNAVAILABLE. The same goes for most of the other tutorials that I have looked at.
      This being a web site for ‘WEB DESIGN’
      The irony is almost more than I can handle.

      Cheers, Peace and all that good stuff
      ~ Sean

    • Carole N

      I tried this as it’s exactly what I wanted to do with an accordian widget in my site but as soon as I changed the names of the tab and content divs by adding the numbers, the widget animation stopped working! Am I missing something?!

    • Gavin McKay

      As Sean Donnelly said: The irony is almost more than I can handle. Please update the image links as all the images are missing for this tutorial and it looks like a good one. Thanks

    • http://www.funkyiphonegiftsforall.com Salvador Truont

      I am usually to blogging and i really recognize your content. The article has actually peaks my interest. I’m going to bookmark your website and hold checking for brand spanking new information.