Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Inside that is a group of them called TabbedPanelsContentGroup, and then the tabs themselves have the very aptly named TabbedPanelsTab class and then the whole 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 class names applied to it. All the widgets are structured this way. So really, if you spend some time in the structure of the widget, learning the different pieces of it, and the different classes then styling it and writing your own styles for it actually becomes pretty simple.
One of the easiest things to do however is to just go ahead and take the existing 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 are not used to hand coding and you're probably saying, man, James, towards the end of this title, he just hand codes everything. Well, it is the way that I like to work, but I'm not really letting my own personal preferences come into play here. It's just that sometimes this is much faster and a lot easier and for those of you 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 use them as much as you can. I use them myself still, but where it's appropriate to hand code, you definitely want 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 kind of difficult to do. So in this case we are just going to go down the list in order and modify each one that we come to, and that makes it a lot easier, because you can see all these selectors are really well commented.
So if you go into the CSS file for any of these UI Widgets, you're going to have a lot of commenting in here that tells you exactly what you're changing when you start 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 line towards the bottom of this and I am going to add a bottom margin to this of 2ems, and the reason that I'm doing that is so that our TabbedPanelsWidget and the 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 really all that familiar with CSS, it's always a good idea to save a backup of this file, so that any edits that you make to it that might break the syntax, it's really 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 and I'm going to find the TabbedPanelsTab. It's the sort of really big selector and we are going to modify this one a little bit as well. So the first thing that I am going to change here is I am going to change some 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 going to 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 going to 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 for the 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 am going to set the color on this to white, and that way we are going to be able to read 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 the tabs when people are hovering over them. All we are going to do really here is change the background color of this and I am 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 the other things that we've been doing. I am going to keep scrolling down, until I find the TabbedPanelsTabSelected and what I want to do here is I want to change the background color again to something that's a little bit more appropriate for the site, and I am going to do 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 to give 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 larger padding on the bottom of it and what that's going to do is it's going to force it down and it's going to make it look like the separation doesn't exist between the active panel and the content, which helps give us sort of a visual representation that those two elements are sort of touching each other.
So, as you are planning out your styles, you need to start thinking about things like this, like do I want those two to touch and the other two not to touch, and if 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 we are 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 get rid 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 bit smaller than the text around it. For padding, I am going to do 1em all the way around, and that's going to give space 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 going to 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 soon as we preview this in the page. So I am going to go ahead and preview this in one of my browsers and you can see what that styling has done for us. So there's that extra bit of padding at the bottom that's causing these guys to kind 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 is the active tab, which again, has sort of given that illusion that those two are sort of joined, whereas this one isn't. Now of course they were also using the same 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 sites that can really create compelling experiences. Go ahead and experiment with all these SpryWidgets, play around with all of their 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, integrating them into your own projects becomes very, very easy to do.
Get unlimited access to all courses for just $25/month.Become a member
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.