Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the earlier videos in this chapter you've seen how to specify the content, header, and sidebar for a custom page template. But how do you style it? There are a number of techniques available, but we're going to concentrate on one based on WordPress-generated code. Let me show you what I mean by going into Live Code view. I'm going to go ahead and enable Follow Links Continuously from the Live view options dropdown. And now let me scroll over a bit and collapse this panel so we can see what's going on.
I'm going to click onto the Explorers link here and once I do, you'll see in the body tag that's on line 19, one of the classes that is added is page-template-explorers-php. If we look at a standard page, like the homepage, that body class is not there. So what we want to do is use this class as our lead selector, so I'm just going to select it and then copy.
Now let's go to style.css from our Related Files toolbar, and I'm going to scroll down all the way to the bottom where I have some styles for another template file. And I'm going to put it in one for Explorers. I like to add in a CSS comment here to make it easy to find these styles, so /* call this Explorers */ close that out. Now I'm going to put a period as the class indicator and then paste in my copied selector. And now I want to target the content area first.
What we're going to do is we're going to float both the content area and the widget area left, and this will have the effect of moving the sidebar over to the right-hand side. So I'll further target the selector by entering in #content, and that's my main content area. Now we want to do a second selector in the same group, so I'm just going to copy the page-template-explorers- php portion of that and then paste it in.
And now we want to target the sidebar, which you might recall has a class of widget-area. So I'll open a curly brace, put in by property, choose float:left. And let's close the curly brace. Now you'll notice that when my screen refreshes, there is my sidebar over on the right, but there's a little bit of an issue: the bullets of the list item are expanding beyond where I want them to. So let's go ahead and put in a margin-left property to handle that.
Let's head back to our Split view. And I'm going to add in another targeted area, but I am going to continue to use this page- template-explorers-php selector. And I also want to grab widget area, because I'm going to target the unordered list within that widget area, so you might as well have them both. I'll copy that and then press Return after the closing curly brace, paste in the start of my selector, and add a ul.
So let's open the curly brace, press Return, and then enter in margin-left: and let's make it 20 pixels, okay. We'll close off the curly brace. Now let's click back into Live view, and it looks like it's lining up pretty well. All right! All I need to do now is save my style sheet, and we're good to go. There's really no limit to the degree you can style a custom page template. Just remember to incorporate the dynamically added body class, which you can uncover via Dreamweaver's Live Code view.
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.