Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Examining the Spry framework
- Finding information on customizing Spry assets
- Defining page structure
- Modifying presentation through CSS
Skill Level Intermediate
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.