Video: Adding Spry effects

The default styles for SpryWidgets are typically very generic and while they're designed so that they won't exactly ruin a layout, it's doubtful you'll ever have a situation where you don't want to modify them, at least a little. Fortunately, Adobe has made that extremely easy to do. So I have the graphic-design file open here from 11_04 directory, and before we start styling our SpryWidget I want to go over the structure just a little bit. So if I click inside one of these panels, I am going to switch over to a split screen view so we can see what's going on here. You can see that each one of these panels is a div with a class of TabbedPanelsContent.

Discover how to build web sites, prototypes, and more in this course on Adobe Dreamweaver CS6. Author James Williamson shows designers how to take control of their site by properly naming and structuring files and folders; how to create new documents and web pages from scratch or with starter pages; and how to add content such as text, images, tables, and links. James also provides a background on the languages that power projects built in Dreamweaver—HTML and CSS—and introduces the programming features in the application, for developers who want to dig right into the code. The last chapter shows how to finesse your project with interactive content such as CSS3 transitions and Spry widgets.

Adding Spry effects

The default styles for SpryWidgets are typically very generic and while they'redesigned so that they won't exactly ruin a layout, it's doubtful you'll everhave a situation where you don't want to modify them, at least a little.Fortunately, Adobe has made that extremely easy to do.So I have the graphic-design file open here from 11_04 directory, and before westart styling our SpryWidget I want to go over the structure just a little bit.So if I click inside one of these panels, I am going to switch over to a splitscreen view so we can see what's going on here.You can see that each one of these panels is a div with a class ofTabbedPanelsContent.

Inside that is a group of them called TabbedPanelsContentGroup, and then thetabs themselves have the very aptly named TabbedPanelsTab class and then thewhole thing is sort of wrapped in this TabbedPanels1 id or TabbedPanel.So it's just a series of nested div tags and lists that have specific classnames applied to it.All the widgets are structured this way.So really, if you spend some time in the structure of the widget, learning thedifferent pieces of it, and the different classes then styling it and writingyour own styles for it actually becomes pretty simple.

One of the easiest things to do however is to just go ahead and take theexisting styles and modify them and that's exactly what we are going to do.So in Code View I am going to switch over to SpryTabbedPanel.css.Now I know there are probably some of you out there who are designers that arenot used to hand coding and you're probably saying, man, James, towards the endof this title, he just hand codes everything.Well, it is the way that I like to work, but I'm not really letting my ownpersonal preferences come into play here.It's just that sometimes this is much faster and a lot easier and for those ofyou guys, I want to ease you into doing coding a little bit.

So the Visual Tools of Dreamweaver are great, and I fully expect you to usethem as much as you can.I use them myself still, but where it's appropriate to hand code, you definitelywant to do that, and in this case, trying to go over to the CSS Style Panel.Well, I will just show you.See that, that's what we have to edit.So figuring out exactly which one you're looking at is sometimes kindof difficult to do.So in this case we are just going to go down the list in order and modify eachone that we come to, and that makes it a lot easier, because you can see allthese selectors are really well commented.

So if you go into the CSS file for any of these UI Widgets, you're going to havea lot of commenting in here that tells you exactly what you're changing when youstart affecting these selectors.So it just makes a lot of sense, in this case to hand code it.So the first thing I am going to do is I am going to go into TabbedPanels.The only thing I am going to do here is I am going to create a brand-new linetowards the bottom of this and I am going to add a bottom margin to this of2ems, and the reason that I'm doing that is so that our TabbedPanelsWidget andthe content below it have a little bit of space.So I am just going to add a little bit to that.Now I also should mention that if you're going to do this and you're not reallyall that familiar with CSS, it's always a good idea to save a backup of thisfile, so that any edits that you make to it that might break the syntax, it'sreally easy just to start over again from a clean copy.

So I would advise you to always make a backup of this.Now the next thing we are going to do is we are going to keep scrolling down andI'm going to find the TabbedPanelsTab.It's the sort of really big selector and we are going to modify this onea little bit as well.So the first thing that I am going to change here is I am going to changesome of the padding.I am going to change the padding to 8px and 16px.So what that's going to be is 8px top and bottom, 16px left and right.The next thing I am going to do is adjust the margin a little bit and I am goingto change it from 0px,1px, 0px,0px to 0,3px, space 3px.

So whenever you have four values like this, it's top, right, bottom, and left.So what I'm doing is right of 3px and bottom of 3px and that 3px margin is goingto match all the other visual elements that we've had in our site.We've had this sort of 3px space between all of them.So that just helps us stay consistent.For font, I am going to change that as well.So I am just going to highlight all of this and I am going to change this out.I am going to type in normal 1em:, so the size is going to be 1em and then forthe font itself I am going to use.Bitter, Georgia, Times, and serif.

So we are using the web font that we've been using throughout the site.For background color.I want to change that as well and I am going to change that to rgb (251, 174, 44).So that's the orange color.The active tab is going to be blue and the inactive tab is going to be orange.Now I am also going to get rid of these borders.I've got the margin that's going to be controlling the spacing between them.So we don't really need those borders.I am going to get rid of that, and the final thing that I am going do is I amgoing to set the color on this to white, and that way we are going to be able toread the text on that orange background.

I am going to go ahead and save that and move down to my next selector.So for the TabbedPanelsTab hover, this is going to control the styling of thetabs when people are hovering over them.All we are going to do really here is change the background color of this and Iam going to change it to rgb (65, 61, 62).That's that sort of dark gray that we've been using throughout the site.So again, we are really just kind of making the colors consistent with all theother things that we've been doing.I am going to keep scrolling down, until I find the TabbedPanelsTabSelected andwhat I want to do here is I want to change the background color again tosomething that's a little bit more appropriate for the site, and I am going todo rgb (2, 99, 174).

That's the blue color we've been using.I am going to remove that bottom border;where the margins control the spacing between these elements and I am going togive it a margin-bottom of 0:, and then a padding-bottom: 11 pixels.So again, the actual selected tab, that's going to have a slightly largerpadding on the bottom of it and what that's going to do is it's going to forceit down and it's going to make it look like the separation doesn't exist betweenthe active panel and the content, which helps give us sort of a visualrepresentation that those two elements are sort of touching each other.

So, as you are planning out your styles, you need to start thinking about thingslike this, like do I want those two to touch and the other two not to touch, andif so, how can I style these effectively to make that happen?I am going to continue to scroll down until I find our final selector that weare going to be modifying, and that is this one, the TabbedPanelsContentGroup.Now just like the other selectors -- and we've done before, I am going to getrid of the borders, so I am going to strip out all the borders there.I am going to change the background color to rgb (2, 99, 174).Now remember that is the blue color we've been using.

Then I am going to add some properties here.I am going to change color to white.So once again I want to change the actual text inside the content.I am going to change the font size and that's going to be .9ems, so a little bitsmaller than the text around it.For padding, I am going to do 1em all the way around, and that's going to givespace between the edge of the content group while in the text itself.And then finally, for line-height I am going to 1.8 and that's basically goingto control the spacing of the lines inside of it. Okay, that's it!I know it seems like a lot of, I know we've been doing this for a little while,but I mean, think about it.

We only modified, what was it, four or five rules?That's it, that's all it took to do the styling that we are going to see as soonas we preview this in the page.So I am going to go ahead and preview this in one of my browsers and you can seewhat that styling has done for us.So there's that extra bit of padding at the bottom that's causing these guys tokind of overlap and touch.Notice that the margin is creating the spacing between these guys;that's not a border, and then clicking on it sort of just changes which one isthe active tab, which again, has sort of given that illusion that those two aresort of joined, whereas this one isn't. Now of course they were also using thesame color scheme that we have throughout the site.

By combining the functionality of these SpryWidgets with your own custom styles,like we did here, you can easily integrate interactive elements in your sitesthat can really create compelling experiences.Go ahead and experiment with all these SpryWidgets, play around with all oftheir settings, play around with their styling.If you're just experimenting, you can't really break anything, right?So just experiment with things, change things, see what they do.Once you are comfortable with how they're structured and styled, integratingthem into your own projects becomes very, very easy to do.

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.

Already a member ?

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

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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:

new course releases

newsletter

general communications

special notices

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:

new course releases

newsletter

general communications

special notices

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