Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Customizing the style

From: Creating a First Web Site with Dreamweaver CS6

Video: Customizing the style

When you add a widget, one of the first things you'll do is you'll start to customize the content, just like I've done here. I have actually added a Lightbox Gallery widget to my website, and I've customized the content to show my images. So I can click through there and see the images as well as some of the text. But now what I need to do is I want to jump in and make sure everything works appropriately with my current website. For instance, I might need to stylize some of these boxes a little more. And even when I scale it down, well, it looks pretty good, but then oh, look what happens.

Customizing the style

When you add a widget, one of the first things you'll do is you'll start to customize the content, just like I've done here. I have actually added a Lightbox Gallery widget to my website, and I've customized the content to show my images. So I can click through there and see the images as well as some of the text. But now what I need to do is I want to jump in and make sure everything works appropriately with my current website. For instance, I might need to stylize some of these boxes a little more. And even when I scale it down, well, it looks pretty good, but then oh, look what happens.

This sort of pops out of this box. And in fact, this is always at a fixed width, so I want to customize and stylize the look, as well as how it functions. And I'm going to do that by going into this portfolio HTML and then just referencing the style sheet. So right in here, when I added it, it added this style tag right here, and you can see some of the different selectors right here that I can select, and the content below.

So I can take a look at this container. And with it selected, what I can do is I can look at the properties for this container. Down here I can see oh, that's where the width is fixed to 500 pixels. I usually don't like things with fixed widths, because it just is going to lock it down a little too closely, and I need it just to be a lot more flexible. So I changed that to 100%. Now this will be flexible regardless of the page size. So I can click Live view, and you can see it here. In fact, even as I minimize this panel, you can see how it stretches across. And then let's take a look at it on a tablet size. That's what the tablet size looks like and even the mobile size.

Everything fits in nice and neat, because--let's turn that off--I was able to change the width to 100%. All right! Going back in here, I can customize this some more. In fact, as I take a look at this, I have this item a image, which are all of these images, and I like it, but I want to do something a little bit different. I think the white is a little too stark, and in fact, I have a lot of black going on. So I want them to start out nice and dim with a black border and then when you roll over on them, or hover over them, I want them to turn red. Basically, the border will turn red. And then I think this looks pretty good as is.

So coming in here, I can select this item a image, and I can see that background color comes from right here, and actually from a couple different places, but it's really just a matter of changing what you see down in here. And I change that from white to black. And since I have Live view on, it changes it immediately. I like how that looks. I think that looks sharp. Even that thin line kind of echoes this font that I'm using. So I can go with that, but that extra white is actually just coming from the border.

Now I notice that as I roll over them they get dimmer, and to be honest with you, I think they should start out dim and then brighten as in, hey, you know what, select me. So if I take a look right in here, I can see, oh, down here, opacity is set to 1, and 1 is 100%. But I can change that to 0.7 and make it 70%. Now it starts out at 70% and will actually brighten, okay. So let me even make that more like 60%, so we can see an even bigger change.

But it's going from 60% to, what else? Well, what's happing on the hover? I'll take a look at the hover right here. Oh, there it is, opacity. I can change that, instead of 80%, change that to 1. And now there it is, and as I roll over them, they pop. Okay, so that's really working out pretty well. In fact, the last thing I want to do here is just make sure that border turns to red as well. So as I select it, you can see my one-pixel-solid border gives me that hex color.

And I can guess at what this is, but if you were get kind of stuck on what's what, what you can always do is say, hey you know what? This is the border. I'm so used to the Properties panel that I'm given, when I double-click on it, so I'll double-click and okay, that's what border is. Okay, that's what each one of these things are. In fact, this last one I want to change that to red. So that's an easy way to change that, to figure out what color that is. It's now FF0000, and when I roll over it, you can see that looks good.

It matches the design, exactly what I'm going for. As I Preview this in a browser, it's going to ask me to save all the files that I've modified. You can see my gallery right here. It's flexible. With that at 100%, I can roll over these images. It looks good, even clear down to the mobile version. Very sharp. So again, adding widgets is easy. Customizing the content is pretty straightforward. And then you can start to have some fun by customizing the CSS that gets added when you add a widget.

Show transcript

This video is part of

Image for Creating a First Web Site with Dreamweaver CS6
Creating a First Web Site with Dreamweaver CS6

30 video lessons · 40476 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

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.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Dreamweaver CS6.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

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

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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:

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:

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

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.