Subtitles of the Movie

In this movie let's start looking at customizing the HTML. Let's go through just a few things that you can do with that HTML file. Go to the back end of your website, choose your specific template and click Edit and then right in there we can go ahead and click Edit HTML. What I'm going to do is just show you a few things you can do. First of all you can create your own css file. I can go in here, give it the new name of that css for it to cascade down through and save it and it will automatically take effect. Now let me show you what it did to this site because I don't actually have a file with that name, so you can see how it messes up the layout. You can see how that css file's really needed so that way it can put things and lay things out, make it pretty and make it work. Now the HTML's there, so it's getting stuff there, but your look and all that business is really messed up. What we need to do is go back here, take that back out and go ahead and hit Save. But I do recommend if you're going to make a lot of css changes to definitely change that in your HTML, make a brand new file that way you can work through it. The next thing I want to show you is how to work with these divs, these different divisions and they all have ID's, remember that ID refers to the css. It's saying that that ID and this css describes that area, so what I want to do is go down here and look at the Div id for search and for pathway. You can see our search box is over here at the right. Let's go up here and let's take a look at those positions. User4 is where the search box is. The breadcrumb is where home is. So right here user4 search the pathway is where the breadcrumb is and home is the pathway, that's the ID. Let's switch these around so you can see what that does on the HTML. I'm going to save that. We'll go back to our page, Refresh. You can see now the breadcrumb, the pathway Home is over here at the right, user4 has the search box now there over at the left. I'm going to take out the positioning so you can see the change a little easier. What I'd have to do then is go into my css and kind of work on moving the search box over. If I want to maintain the pathway over there at the right, that's fine, too, but I could work on that spacing and margins if I wanted to do that. But that's one of the things you can do with this HTML. One more thing I want to show you is down at the bottom, see how it has this specific text? A lot of the templates are going to have specialized text down there that you can change to your information, so on the html file we'll scroll to the bottom here. Here's the Powered By statement and then here's also the link that it's providing. And then I'm going to go ahead and save that. Again we have a backup, remember, of this file, this HTML file, so if we make a mess we just go upload that FTP up there. I'm going to Refresh the page. Now I'll go down to the bottom here and here it is. It's got the link active, it's got my new text. So there's your start with customizing that HTML. A lot of the HTML questions I get are just simply changing some of this text that you're going to see around there and then maybe moving things around if, for some reason, maybe your placements in your modules or things like that, your positioning isn't working on your actual back end, your administrative side, so you can do that in the HTML if you want to move things around. So take a minute, take a look at your HTML file, try to change the positions on a couple of items, flip them around. Try to give it the path for a new style sheet so that you've done that and then look for specific text for your template. See if you can go in there and change that. Usually that's the biggest thing on the html that people need changed.