Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
With our Accordion styles now added to our secondary styles, we can turn our attention to modifying the look and the feel of our widget. So in this exercise we are going to spend a good bit of time in our CSS. Now don't let that scare you because this is really a great way to get a feel for how our Accordion widget operates. So are going to switch over to shows_secondary.css. That is where we copied all of those Accordion widgets selectors in our last exercise. I am going to scroll up until I find the top of them. And that may take a while.
Now the first thing we want to do-- we have a character set rule there. We really don't need because we are already telling it which encoding characters to use in a previous CSS files. So go ahead and get rid of that. All the SpryAccordion commenting, we are going to leave that. That is great information for you to read through as you're building your own Accordions and we just going to modify and to create some new styles and as we do that we will talk about these selectors and what they're controlling. So we're going to scroll down to find our first selector. The first selector is a generic selector is that is the Accordion selector.
Now if we look at our commenting above it, it is going to give some information about this and notice that it says "If you want to constrain the width of the Accordion widget, set a width on a Accordion container". By default an Accordion expands horizontally to fill up available space. If you want to make it a specific width you'll need to go ahead and-- you'll need to go ahead and define that here. So there is some great information here. Scroll down and we are going to find the AccordionpanelTab. We are going to modify this one a little bit. The first thing we have to change the background color. It is default background color and we want to use colors that we have already been using in our site. So, we are going to change this from #CCCCCC to #d8c296. That is one of the colors that we have been using. It's a light tan color and we are going to change the padding from 2 pixels to 4 pixels to give us a little bit of space around our element.
Now the next thing we want to do is actually add a few styles and we need to add a couple of styles that are going to be controlling our AccordionpanelTab information. So we are going to stay right below the AccordionpanelTab. We are going to sort of group these guys together. So now we need to create some new styles and we want to drive the content inside the tab and if you remember, we styled that content with an h4. So we just need to write some descendant selectors that are going to target our h4. So we go down below this rule and we will start another rule. We will keep all our AccordionpanelTab rules together. Just as we would if we were creating any other style sheet. So I will type in .AccordionpanelTab h4 and we will open up our curly brace and go down the next line. And first thing we will do is just go ahead and zero out the margin. And the next thing is we will throw in some padding.
Now we are going to use shorthand notation for our padding here. So we are going to pass in a value 2 pixels for the top value, 2 pixels for the right value, 4 pixels for the bottom value and then we are going to pass in 18 pixels for the left value and the reason we are doing that is that will push the text away from the left edge of the tab and we are giving it enough space there so we can put can background graphic to go along with our heading. So we go to the other next line and go ahead and define a font for it. We'll use the Font shorthand. We will pass along a size of 1em and then after that we will pass along the actual font of Trebuchet. I want just pass along that font family. Just use the font list that we edited earlier. So type in a semicolon there, go down the next line and we will pass in a background property and for our background we are just going to type in a U to trigger the URL code hinting. Click Enter and that allows us to browse.
We want to go in our image's directory and I will scroll down, and we will go ahead and find the tab_closed.gif. tab_closed and you can see a little preview over there, looks like a little plus symbol. So we will go ahead and choose that and then we need to pass in a few parameters to that. So after that we will type in no-repeat and then a space and left, another space and then 50%. So that will position it to left edge and center it vertically to 50%. That will be the end of that rule. So I will hit Enter and I will make sure it close my curly brace. And I scroll down a little bit and we are going to go ahead pass it in one more Accordianpanel style in.
This one is actually going to be triggered by a state of the Accordianpanel. So, if you remember the Static classes that we talked about in the previous exercise, the ones that you can't change its name unless you actually pass in a variable into the constructor functions. So we are going to take advantage of one of those. So type in .AccordionpanelOpen .AccordionpanelTab h4, and if there is any argument for renaming these, it is certainly not having to type them over and over again. So, we are going go down to the next line and here we are going to do just one property. I am going to assign a background property and we will assign a URL as well and we are going to browse to our images again and this time we are going to scroll down until we find the tab_opened. Go ahead and choose that.
That will pass in some parameters data as well. So no-repeat left and then again 50%. So it is going to be positioned in exactly the same spot. Go ahead and close your curly brace for that. So essentially what we have done here is we have styled our h4s and our tabs and we have given them a background graphic. Now, it is going to have a different background graphic based on whether the panel is closed or if the panel state reports as open. So as panels open and close, the background graphic is going to change here and give some user feedback. Let's save this file. Switch over to our current.htm and why don't we go ahead and test that in our browser? So this will open up in Firefox. I'm just going to scroll down.
Now note the initial state of our Accordion. The image is open and notice that it has the minus symbol beside it, whereas the Painting Information and the Note from the Artist have plus symbols. When I click on Painting Information, it changes. I'll click on a Note from the Artist, it changes as well. Now our styles aren't persisting and we are not quite finished with all of our styling yet, so why don't we closed the browser out and in our next exercise we will continue modifying our Accordion widget styles.
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.