Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Our Spry widget styling is almost complete and in this last exercise before we star customizing our Spry widget, we're going to add the background graphics. If I scroll down a little bit, I can see that all of our content panels are looking pretty good, but we don't have any imagery in there and we'd like a larger version of the image itself. So instead of using an image tag, we're going to use a background graphic and I talked about that a little bit before, but I want to go into a little bit more detail now. So we could have certainly inserted an image and then use the float left or float right on the image to have the text float around it.
One the problems with Spry widgets that animate is that as they animate a lot of times the floated text or floated elements will not float until the animation is fully resolved. It's as if the browser takes a moment to resolve the animation first before it resolves the float. And so because of that, it can be can be sort of buggy with the way it animates. You can have text that breaks one way as it animates and then breaks in another way as it stops. So to prevent that I've removed any floats from my content panel that's going to animate. And to do that, we've applied margins of left margins to our h2 and to our paragraph that's pushing it to the right and allowing enough space for our background graphic to show up.
You may have remembered from our earlier structure that each of our panels has an ID. Panel zero, one, two and 3. That's what we're going to use to hook our styles into to give ourselves our background graphics. So I'm going to flip over to Code View again, and you can see that I've opened up the Chapter 9 details_start file. So again, if you're following along with me, go into the Chapter 9 folder and open up detail_start. I'll collapse my panels. And I'm going to go right back up to the code we were just working on, which is in the head of a document. And about on Line 27 is what we're going to start with.
So I'll insert another break on this and I'll insert another CSS comment and here I'll add a little bit of a divider line. I'm going to type in 'formatting for background graphics.' And you can call that anything you want. That would be fine. Just some mental note to yourself about what these styles to follow next are going to do. So I'll click Enter or Return to go down to the next line. And on Line 29, I'm going to type in #mainContent. So again we're being very specific about where this is located. It's found in the mainContent region and it's going to add to the specificity of the rule and then #panel0 because panel zero is an ID so we use # for that. I'm going to open my curly brace and I'll type in background.
The first thing I'll do is add a color so I'm going to type in #A8BAAA. And again us that's the green color we were talking about. Now I start typing in URL, this is one of features I love about code hinting in Dreamweaver. As I type in U, the code hinting comes up and says URL and if I hit Return or Enter, it allows me to browse for that image. So that is really neat. I'm going to go into the Chapter 9 directory and to my images and inside my images, I'll find a folder called details. So I'll go in details.
And in my details, I'll find the hoody_detail. Now you might notice that in this directory, I also have another version of this call blur and that's going to come into play later on when we customize our animation to give the appearance of blurring as it animates. So we'll say OK. And now it says url images/details/hoody_detail.jpg. We'll set a couple parameters for it. We'll do no-repeat and we'll give it a horizontal positioning of 10 pixels away from the edge and then a vertical positioning of 5 pixels.
Type in a semicolon and don't forget to close your curly brace. Each of these panels is only going to change in the name of the graphic that's being used and the panel number. So this a prime candidate for copying and pasting. So I'm going to highlight the whole line, copy it, and paste it below the line. I'll change the panel number from zero to one so remember to do that in the ID of the selector. And then I'll change the graphic name from hoody_detail, and that is going to become tshirt_detail. Go ahead and paste that line again.
And this will become panel2, and that's going to change from hoody_detail to bag_detail. So the no-repeat, the horizontal positioning, the background color, those all remain the same. And let's do our last one, which will be panel3, and that one is to change from hoody_detail to longt and there's one other really important little thing. That one is details.JPEG. So as you're creating your graphics you might want to do a better job of making sure they're all the same. So the first one should read hoody_detail, the second one should be tshirt_detail, then bag_detail followed by longt_details (plural) .jpg, so you should be good there.
So we'll go ahead and save this file, and if I preview this in my browser, and if I scroll down, now I can see the background graphics and as I animate, look at that. That is a fully functioning widget. Now most people would leave their Sliding Panels widget right there. They wouldn't really extend it past that, but that's the whole point of customizing Spry widgets. So in our last movie, we're going to do a little additional class styling to enhance its functionality and we're going to pass some additional parameters into the constructor function to change the rate of animation to go along with a change in styling that we're going to make as well.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101804 Viewers
61 Video lessons · 88555 Viewers
71 Video lessons · 72373 Viewers
56 Video lessons · 104074 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.