New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Dreamweaver CS3 Projects: Creating Custom Spry Widgets
Illustration by Don Barnett

Modifying Spry asset CSS


From:

Dreamweaver CS3 Projects: Creating Custom Spry Widgets

with James Williamson

Video: Modifying Spry asset CSS

As I've mentioned previously, Spry uses a combination of JavaScript and CSS to achieve the proper functionality. In this movie we'll begin modifying our widget's behavior by customizing the CSS found in the external SpryAssets. Depending upon where you store this you might actually move your SpryAssets CSS to your own external CSS document. You can keep it separate or you can even embed it in the page. So just because I'm modifying the external SpryAssets file doesn't mean that you might not want locate this code someplace else.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Dreamweaver CS3 Projects: Creating Custom Spry Widgets
1h 0m Intermediate Apr 18, 2008

Viewers: in countries Watching now:

Advanced Dreamweaver users wanting to add AJAX functionality to sites will find Dreamweaver CS3 Projects: Creating Custom Spry Widgets a valuable resource. Spry, Adobe's integrated AJAX framework, offers a built-in resource for providing richer user experiences. Instructor James Williamson shows how to go beyond Dreamweaver's installed Spry capabilities by creating custom Spry widgets. He delves into Adobe's online Spry documentation, demonstrates how to download and upgrade Dreamweaver to the latest Spry release, and examines how the Spry framework functions. Users will build a Sliding Panel widget, control the widget through JavaScript, and customize the panel content through the use of CSS.

Topics include:
  • Examining the Spry framework
  • Finding information on customizing Spry assets
  • Defining page structure
  • Using external JavaScript files to add interactivity
  • Modifying presentation through CSS
  • Customizing Spry widget functionality through JavaScript and CSS
Subjects:
Developer Web Projects
Software:
Dreamweaver
Author:
James Williamson

Modifying Spry asset CSS

As I've mentioned previously, Spry uses a combination of JavaScript and CSS to achieve the proper functionality. In this movie we'll begin modifying our widget's behavior by customizing the CSS found in the external SpryAssets. Depending upon where you store this you might actually move your SpryAssets CSS to your own external CSS document. You can keep it separate or you can even embed it in the page. So just because I'm modifying the external SpryAssets file doesn't mean that you might not want locate this code someplace else.

So this is the default location of it and if you're looking for it and where to find it, you'll find it in your SpryAssets directory. So, I'll double-click the SprySlidingPanels.CSS to open that up and it opens up right in Code View and we'll just scroll through and we'll modify some the CSS. Now a lot people are not used to the CSS driving actual functionality. Most people are used to CSS driving the look and feel something. But in Spry, classes are applied dynamically as things are happening within the widget so functionality can be changed based upon what's going on within a certain class selector. So I'm going to scroll down and we'll find the SlidingPanels selector and it's found on line 29.

Now I'd like you to notice how heavily commented these files are. Now that might not make a great deployment issue with all these comments so you can flatten these out, delete them or just strip the styles directly out of this and move the styles into your own code. But what the commenting is great for is learning about exactly what a selector is doing. So if you want to break down how the widget's formatted, how the functionality is enhanced and affected by the styles, you'll want to read through these comments. So we're going to find the SlidingPanels class style. Now this applying, remember, to the DIV tag that surrounds the entire Sliding Panels widget so this is kind the parent Sliding Panels tag.

So what we're going to do in this line below the last rule, we'll go ahead and add a new one and we're going to do a float to the left and I like to comment things out. So I'll do a little comment after this. So I'll insert a CSS based comment and just type in 'to give horizontal animation.' So our goal is to have our content scrolling left to right, not up and down, and by floating everything to the left and expanding the width of the content group, we're going to allow that to happen. That way everything can fit horizontally and not go up and down.

So the first step of course is floating the parent tag. CSS-based knowledge comes into play here guys. If you've ever worked with floating before, you know that if you take the child elements of a parent element and float them, that the parent element will collapse on itself. So by applying a left float to the parent element, we're ensuring that all of the floats will be contained. So we're about to float every other element in here and this way we're making sure they stay contained. Alright, so we're going to scroll down and we'll find the next selector, which is the SlidingPanelsContentGroup.

This is around each of the individual panels themselves so this is the grouping of the content panels and we'll make a slight change here. Instead of saying width 100%, I'm going change this to something rather outrageous. I'm going to type in- oh, I don't know. 10,000 pixels. Now I doubt that we need 10,000 pixels, but just in case we did I'm making this wider than I would ever possibly need it. And again I'll add a little comment here. So you're either leaving a note to yourself or whoever's coming behind you I'll type in 'increased width allows content to fit in container element.' Now you don't have to add these comments, but I find them to be extremely helpful.

And I'm going to collapse my panels here real quick do I can see more of my code. I find them to be extremely helpful because what they do is number one, they're marking the things I'm changing from the default styling so I can quickly and easily find the properties that I've changed. I also give myself a reason for changing these because if you just came back through and saw something with a width to 10,000 pixels, you would probably automatically assume that that was a mistake. So we'll go down below the last defined rule here and we'll type in float and we'll float that to the left as well and again, we're going to add a comment and that is going to say 'for horizontal animation.' So we're floating that to the left as well and we're giving it a really wide width.

So now the next thing to do is to go down and find the SlidingPanelsContent. Now this class is applied to the individual content panels themselves, so the DIV tag that surrounds the individual content for each of our items is contained within this. So this we need to be a lot more specific about. Instead of saying width 100%, I'll change the width to 700 pixels. Now that's something that would come up beforehand based on the images we're going to use and the width of that area. So again I'll go ahead and apply a comment here and say 'fixed width based on content.' So this is obviously something that we planned beforehand when we were taking a look at the layout.

We'll do the same thing with the height. We'll change that from 400 pixels to 220 pixels. And once again we'll add a comment, and we'll say 'fixed height based on content.' So the images that we're going to use are 200 pixels tall, and this'll give a10 pixels worth of spacing on top and bottom. And then we'll need to add a couple of extra things here. We're going to float this to the left as well. And again it's worth noting through a comment that this is for horizontal animation.

And then we're also going to give this a background and the background color that we'll give it is going to be #A8BAAA, which always makes me think of ABBA. And of course we're going to insert another comment here and this'll say 'background color to match the page layout.' That way, if for whatever reason the container does collapse, we still have a background color on the content panels themselves, and they won't be sort of floating in space. I'll go ahead and save this file. So notice that all the changes and edits that we made were made to the external cascading style sheet file for the specifics Spry, Sliding Panels.

We'll go back into our details_start file. And if I scroll down, I can see that even though it's not hidden right now, all of our elements are displayed horizontally, which is perfect. Now we'll go and preview this on our browser. I'll go and click on each one of these, and we can see that our functionality is a lot closer to what we were wanting originally. So regard- less of the fact that we just made a few CSS modifications, notice that the CSS modifications affected directly the functionality of this.

So the content doesn't look the way we want it to, but it is functioning the way we want it to. So our next task is to style the panel content to achieve the desired look and feel.

There are currently no FAQs about Dreamweaver CS3 Projects: Creating Custom Spry Widgets.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Projects: Creating Custom Spry Widgets.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.