Now let’s take an overview of the skin editing process. I’ve said here at the beginning that we’re going to be able to do this without knowing any code. And yet here we are talking about HTML and CSS. Well, we’re using the term HTML and the term CSS specifically because that’s what these buttons say. And if you’re a code person, you recognize that what you’re doing here is changing the HTML. And when you’re creating a style, what you’re doing is changing the CSS. But this is easily just has said boxes and packages because that’s what we’re doing here is we’re creating and arranging boxes. And we’re creating and setting up packages. So the fact that it’s HTML and CSS isn’t particularly important to you if you’re not going to know the HTML and the CSS. It just happens to mean that that’s the result of working with boxes is it results in HTML. The result of working with packages is it results in CSS. That’s all you really have to know.
In the HTML section, you create and arrange structure and you add placeholders for content. Those are the two things you do with the 1/3 possible exception of you could also place content using the text box. But primarily, you create and arrange structure and you add placeholders for content. And then in the CSS section, you style the structure and the content.
So that’s how those two things are broken up or that’s how the tasks are resolved in those two areas. Arrange… create and arrange structure, add placeholders, that’s HTML. Style the structure and the content, that’s css.
So when you’re editing a skin, you can start with very simple stylistic edits. And an example of a very simple stylistic edit could be coming over here to CSS and say, let’s change the color of the tagline. So right now, the color of my tagline is this gray… let’s make it blue. So a simple stylistic change would be to come over to the package that styles a tagline and it says site tagline so that’s our package. If we click on that and it brings up options and our text color, we could say… right now it’s using is… it’s using… this is a variable color too and we could change the variable instead. But for the moment, I’m just going to pick a blue color there and hit save. I don’t need to hit save actually but there it is. This has been changed.
So that’s a very simple, stylistic change. And you can get a long way with very simple stylistic changes like that. We can also change the font so we could come back over here and go back to site tagline and our font setting. And we could come along and let’s say let’s use Arial Black instead and save. And now it’s Arial Black, right? So there are those kinds of things, very simple stylistic edits that you can make, very easily simply by opening up the package, editing the options and that change is done.
So there are also that possiblity of very simple structural edits. So somebody earlier asked me, “Well, can you move the nav menu?” Well actually, you can move the nav menu. You can say shift the nav menu down here to below the header. Pardon me, I don’t need to shift it in this case. That’s one of the things you need to figure out the difference between is shift dragging and just dragging. If I’m moving it inside of a container, I could just drag it. And now that I’ve done that, the nav menu has been moved down. I’ll save that template for a second and now the nav menu has been moved down below the header, right? And it’s happened on the front page.
So if I come over and look at a different page, let’s say we go to the About Us page, it hasn’t changed there. It’s only changed on the front page. Notice how this isn’t blue? This isn’t blue yet because I haven’t yet… in the Skin Editor, hit save CSS. Once I hit save CSS, the changes that I can see here actually get reflected on the actual site. So now it’s been changed. So I made a change in this… in the front page by simply dragging that around.
So that’s a simple structural edit. You can move boxes around. The simple structural edit may also mean that you delete boxes or you remove boxes. So you could theoretically, again, from the front page, you could shift drag the site tag line out of here and then now the tagline is not on your front page but it exists elsewhere. So that’s what happens when you change templates like that or change things in the template.
Let’s see, let’s go back to our front page and open up our header. And we’ll shift drag our site tagline back and then drag it under the title. And now we’re back to our original condition. And there we are on our front page back to sort of where we were.
Okay, so those are simple stylistic edits and simple structural edits.
Somebody asks, “I have the 201 classic skin and there is no front page template under Pages. Why do you suppose that is?” Well, actually I’m going to ask you why do you suppose that is? Under what sort of circumstances would there not be a front page template? Well, it would be the case when you aren’t using a static front page. There’s no reason to show you a front page template edit if you don’t have a static front page. So if you’ve got your site created as a blog and your home page is a blog page then you’re not going to see that front page template. You’re only going to see the front page template in the case of a site that has a static front page set up under Reading Settings.
So those are simple edits. Now we’re going to talk about other more complex edits because the typical editing process has a process like this. You start off by creating a box. Once you’ve created the box, you place the box. Once you’ve placed the box where you want it, you add a content placeholder to the box because of course, the box, by itself is going to do you nothing. Once you’ve added the content placeholder to the box, you create a package and link that package to the box then you adjust the package settings. And then finally, you add the reference of the package to the compile list.
Okay so this is the process that you are going to go through over and over again for a typical structural/stylistic template change. If you’re just dragging it away or a box away or just juggling boxes around, you’re not following this whole process. But if you’re going to create a brand new box then you’re going to create the box, place it, add placeholder content to it, create the package and link it to the box. Adjust the package settings so that you’ve created a style and then add the reference to that package in the compile list. And it’s going to go in that circle over and over and over again.
We’re going to go through examples of that here today.