Setting template styles
Video: Setting template stylesIn 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.
- Next steps
Viewers: in countries Watching now:
In this course, author Joseph Lowery shows how to create a robust WordPress-based site using Dreamweaver. The course lays out the essentials of planning a site, explains how to implement custom sidebars, and demonstrates building page templates. The course also explains how to integrate PHP functionality and extend the WordPress database.
- Understanding development environment requirements
- Working with existing WordPress content
- Handling standard pages
- Managing full posts
- Coding a basic template
- Adding a custom sidebar
- Working with WordPress functions
- Inserting PHP code in posts
- Including a recordset
- Outputting data
- Linking to dynamic pages
Setting template styles
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.
There are currently no FAQs about Dreamweaver and WordPress: Building Sites.