Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
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.