Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Our chosen flavor of presentation for our HTML data set, the Master/Detail region, doesn't look all that spiffy right now. So our final task is to tackle both the default MasterDetail page CSS that Dreamweaver added to our site and to tweak our own page styles to bring our Master/Detail region in line with the rest of our site. So I am in the 14 folder, if you're following along with the exercise files with me just go in the 14 folder and open up the galleries.htm and that's currently where we have our Data Set widget. We're going to be working on the CSS extensively in this one. So what I am going to do is I am going to minimize my panel so they're just icons and I'm going to switch over to Split Screen view and I am using Vertical Split Screen view and I'll probably expand the Code view a little bit because this is a very narrow widget so I don't really need a lot of the screen to be able to see that.
I am also going to click in the Design portion and switch that over to Live view so that when I scroll down I can see the actual data itself rather than placeholder data. You can also see how really bad this looks and how much it needs to be fixed. So one of the things that I would like to talk about before we get into this is that if you don't understand the structure of your Spry widgets, you are not going to able to format them properly. So you want to take some time before you start jumping into the CSS to look exactly at what elements are structured, how they're named, where classes are being used versus IDs- really get a good idea for where everything is structured. Also, you should know your external style sheets as well.
So you can understand the interaction between the added Spry CSS versus your existing styles. That way you know where you'll need to overwrite certain things to get the styling that you need. Well, using the Related Files feature, I am going to switch over to my SpryMasterDetail CSS so I am going to click inside my Code view and I'll switch over to the SpryMasterDetail.CSS, so that I am focusing on those styles. We'll tackle them first and then we'll deal with our external styles. Alright, I am going to scroll down and I am going to find the MasterDetail.MasterContainer rule. This is controlling the container around our detail regions.
Currently it has a background color, a border, a width and a float and an overflow and it's the width, float and overflow that are really causing us a lot of trouble right now. So we're going to modify this and we're going to modify in a big way. Go ahead and highlight all of these properties and we're just going to replace them with a simple color and the color is going to be #FFF, so that it's white and then we're going to go ahead and save that. Now you may or may not see that reflected automatically so you may actually have to click on that Spry widget in order to see the functionality. Now you can see that the header region up there where there Master region is, isn't having the float problems or the width problems that we had before.
So it's looking a lot better already. We're going to go down just a little bit more and we're going to find a second rule down here which is MasterDetail MasterColumn and we're going to change that one as well. Currently we have a background color and that default background color is light gray and that doesn't look really all that good. So we're going to replace the background color with a bottom border. So go ahead and highlight the background color property, change that to border-bottom and we're going to give it a bottom border of 1 pixel solid and we give the color #FFF and again if you want to see that update, just go and save the external stylesheet file and if you click on Live view, it should go ahead and update for you and now we see that bottom border rather than the gray background color. So again, perfect, that's exactly what we're looking for.
Let's keep going. I'll scroll down and the next rule is dealing with that MasterColumnHover, so when you hover over it, you'll notice we're getting a light gray background right now. We want to change that. So we're going to highlight the color that we're getting. We're going to change that EAEA color with 848484 and go and save that. That will bring a little bit more in line with our page. Now if you don't see that change reflected automatically, don't worry. We still have to overwrite some of our internal styles as well to get the functionality we're looking for. So if that doesn't change automatically, don't worry about it right now.
We're going to go down to the MasterDetail MasterColumn selected and that would mean when you click on one of these, the selected style- ah, so there's our background color that we're looking for. So now we want to change the currently indicated selected one and currently it's giving us 848484 as well. Let's change that and let's give that a darker gray, so let's give that #333, We'll leave the color as white, we'll just change the background color so that the indicated one is a little darker. Well we're almost done with our SpryMasterDetail CSS. Let's save that and we're going to scroll down just a little bit further and we're going to find MasterDetail.DetailContainer.
Now, this is the container that is surrounding the Detail region so the Camera, the Resolution, the Megapixels, they're all controlled by this one and again we have some width, floating, and overflow issues that are sort of driving the rest of this. What I want to do is I want to get rid of the width, float and overflow. I am going to leave the border and the padding and I am going to change the border property out too. So I am going to highlight that and I'm going to replace border with a background color. So I'm going to choose background-color and we'll give it a simple background color of #768577.
Don't forget the semi colon. So that's a dark green color there and for our padding, we'll leave the padding at 10 pixels. Again if you click inside that Master/Detail region, you should see that update a little bit. So the problems we had with the width, the floating, all that have gone away now and even though we don't quite see our background color yet. Now one of the reasons for that is specificity. Sometimes you're going to make a change to your MasterDetail CSS, you'll update it and you won't actually see that change reflected. Well, the reason for that is that you probably have some site wide CSS that's overwriting that. So we're going to make this rule a little bit more specific. In front of the MasterDetail class selector I am going to type in a #sidebar.
Our widget's found within a div tag with an ID of sidebar. So we've just added to the specificity of that and now when I click over here, now I see the background color showing up, because we've made that rule more specific. Now keep in mind that I just made a site wide change. So if I were using this type of the widget throughout my site I either would want them to look all exactly the same or I would need to start writing some embedded styles or using some additional ID selectors in order to make sure that each one of them looked the way that I wanted them to look. Alright, excellent! I am going to switch back to Design view.
I'll save my file and I'll just do a Save All and I'm going to preview this in my browser to see how far we've come with our changes. So we'll scroll down and my hover is working. When I click on one of these I can see that the indicator is now that dark gray, which is wonderful. We're getting that light green background color that we were wanting and we don't really have any of those width issues that we had before. So it's formatting the way more or less that we wanted to. It's not totally finished yet, however, and one of the things we're going to have to do is go into our external site wide style sheet and add some styles that are specific to this MasterDetail widget.
So we're going to leave our browser and come back into Dreamweaver. Now inside Dreamweaver I am once again going to go to my Split Screen view and I am going to change the code from our Spry MasterDetail to our main.css. So this is our external styles. Once again I can change these windows so I've got a little bit more room within my code window and I'm going to scroll down all the way to the bottom of my code and here we're going to add a new section. So whenever I add a new section to my CSS I always throw in a little CSS base comment and inside that I'll add little separator to let people know or let myself know later on that this is a new section.
So here we'll say a MasterDetail specific styles and everybody has their own way of doing this. So if you don't use dividers, you don't have to put one there. I just like doing that so I can tell what one region of code is versus another. Below that, the first thing we're going to target is our MasterContainer and the spacing issues that we have with the margins and the padding. Some of the styles in the site are overwriting this causing some odd spacing. So let's go ahead and write a selector that's very specific that targets that. So I'm going to try do a descendent selector of .twoColFixSmSide, so two col fix small side, this is the class that's applied to the body tag that explains which type of layout we're using in our site. Then another space and we're are going to do #sidebar and then another space and then div, dot, capital M, Master, capital C, Container. So that is a very specific selector, a descendent selector that is targeting any MasterContainer inside of a div tag that's inside of an element called sidebar that's inside of an element with the class two column fixed small side.
I'll put a curly brace and hit Enter and on the next line I am going to type in margin and I'm going to do a bottom margin, so margin-bottom and we'll give it a bottom margin of 1em and then we're going to give it a padding bottom of zero. So that's helping overwrite some of those default styles. Again if you want to see what that's going to look like you can click inside your Master/Detail region, after you save your file and you should see a tightening up of those regions. So that's perfect, it's exactly what we want. Let's add a couple of more. So let's do #sidebar, space, div#check, space, h2.
Now this is going to target headers for our Master/Detail region. We have another element that has an ID of check that surrounds these. And underneath that we're going to change our font size so font-size and we're going to do 0.8 em and then we're going to do margin of zero all the way around and then specifically we're going to set a margin bottom to 1 em and that will help with our specific styling of those headers. Underneath that let's do #sidebar, space, div#check, space, p and that's going to target any of the paragraphs which are the individual items, Resolution, Megapixels, Weight.
And for those guys we're just going to go ahead and set a margin bottom of 1 em and that will go ahead and add a little bit of vertical margin between those guys. Again I can save this, click on my Live Data view and I should see the improved spacing between them, perfect. Now the last thing that I want to do is Resolution, Megapixels and Weight. Those little "sub-headings" really don't look any different though they don't vary visually between their information and so we're going to use a class style to make them look a little bit different. So let's go back into our code and add one more selector. So .checkTitle and so we're writing a class selector here and we're going to give it a font size of 1.2 ems, we're going to give it a font weight of bold and we'll give it a color #333, so that will just darken it up a little bit.
OK. We'll save that and of course we're not going to see any change with that. I am going to switch back over to Design view and turn Live view off and then what I'll need to do is I'll need to highlight each one of these guys, Resolution, Megapixels and Weight, and I do have to be really, really careful here. I just want to make sure I highlight the text and nothing else. I don't want to replace any of other existing classes. So I am just going to highlight the text, nothing else, and using the Properties inspector I'll give it a class of checkTitle. And I should automatically see it change its formatting. And if you see anything else happen like certain things disappear or certain spacing starts getting weird, just undo that and go back and make sure that you have applied that correctly.
Alright, we'll go and save that. We'll preview that in our browser and now our widget looks the way we wanted to. It's behaving the way we wanted to and it's formatted exactly the way we want it to. Now, one last little thing that I want to do here is I want to prove to you that this data is coming in live from our other page. You can see that the resolution of the Sony Camera is listed at 2560. We're going to fib on that a little bit. I'm going to close my browser, I'll go back into my Files panel and I want to open the Gear.htm page. Again that's where the data is coming from.
Let's scroll down into the table here. I am going to change that. I am going to make Sony happy and I am going to increase that maximum resolution to 3000 from 2560. So I am going to go and save that and then I'll switch back over the Galleries view. Now I don't need to update a thing, all I have to do is preview this on my browser again and I can prove to you that the data is live and then scroll down. Now notice that the Sony's resolutions is listed at 3000, so it is pulling that data in runtime as this page loads from our external page, which is just awesome. So our Master/Detail region bas based on our Spry HTML Data Set is now styled and formatted the way we want. Now it may have seemed a little bit more involved than we needed to get. The purpose of doing this is to show you that when you were using these Spry wizards in your own sites you'll need to carefully plan and execute your styles in order to get the desired results.
Will it use multiple widgets? Will it share CSS files? Should you consolidate all your CSS at one place or organize your widget styles through a dedicated external style sheet? Every site is unique and your planning challenges will be unique to each one. So put plenty of emphasis on planning and testing as you add Spry functionality to your workflow.
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.
Your file was successfully uploaded.