Article
eZ publish 3.1: Take It For A Spin
Style Sheets
Earlier, you probably noticed that, though we referred to style sheets in our layout templates, we never bothered to actually define the style sheets. This gives our Website a decidedly "bland" look and feel.
You could insert the formatting attributes throughout your Website, but it makes maintenance a nightmare. For instance, let's say you wanted to use Web color #99FFCC throughout your site, but after putting it into 365 different bgcolor attributes across global templates, you wake up and realize that that's a really ugly color. You'd have to go back and fix them all! It's not such a big deal when you've got global search and replace, but if you want to play with different options, it'd be nice to be able to change the color setting in one place, and have all 365 attributes change.
Enter: style sheets. There's a lot of hype, but really what style sheets let you do is name a group of characteristics, such as size, alignment, color, font, etc., and reference that name in your HTML using the "class" attribute. It's a great shortcut while you're developing and maintaining your site. There are plenty of places where you can learn more about Cascading Style Sheets (CSS), so I won't belabor the point. Visit SitePoint’s CSS category and HTML Help for good tutorials on CSS. Here, I'll just show you how to attach style sheets to your sitedesign.
Attaching a Style Sheet to Your Sitedesign
- If you're only going to have one style sheet (and for simple sites, that's probably all you need), you can just reference it in your pagelayout.tpl file.
- Go to the "[Install]\ezpublish\design\mydesign" directory, and create a directory called "stylesheets". This isn't strictly necessary, but it does keep things more organized.
- Open "[Install]\ezpublish\design\mydesign\override\templates\pagelayout.tpl" in a text editor, and add the following HTML just below the
<head>tag.<link rel="stylesheet" type="text/css" href={"stylesheets/mydesign.css"|ezdesign} /> - Download the style sheet file://mydesign.css and put it in "[Install]\ezpublish\design\mydesign\override\stylesheets\mydesign.css”
Visit http://localhost/. You should see the effects of your style sheet.
Sections
There's a bit of an elephant in the room, which we haven't talked about yet. Several times in the eZ publish interface, you probably heard mention of "sections." It's an important concept to understand as you develop with eZ publish, though in your first eZ publish site, you probably won't use them.
Sections divide your site up into different content "zones" that have a different appearance and behavior from other sections. For instance, the "news" and "corporate" areas in the demo site are different sections, and they look different from each other -- different color scheme, banner graphics, page layout, etc. Content can be assigned to any section. Unfortunately, the user interface for assigning content to sections is obscure, at best.
Assigning Content to a Section
- We're going to reassign "My Company" to the "News" section, and look at the effects on the demo site (viewed through the demo sitedesign).
- Visit http://localhost/index.php/demo/content/view/full/33/. This is the "My Company" section, which looks different from the "News" section. This is because the content in the folder "My Company" is assigned to section 6 (My Company), rather than Section 3 (News).
- Go to the admin interface at http://localhost/index.php/admin. Log in if needed as user "admin" password "publish" (no quotes). Click on the "Set Up" tab at the top of the admin interface, and then "Sections" on the left hand side. Click on the paper clip (Assign) to the right of "News Section.”
- Choose the radio button to "My Company" and click Select. This assigns the "My Company" directory to the "News" section. News templates will now be applied to the contents of "My Company". All sub items are also re-assigned.
- Visit http://localhost/index.php/demo/content/view/full/33/ again. You'll see that the "News" section templates have been applied to the contents of the "My Company" folder. It's a little nonsensical, as the News templates contain hard coded references to "News" items.
Note that this procedure doesn't move the content in the Website -- that's driven by the content’s location in the folders. It just affects which templates are used.
Well, I don't know about you, but for most of the sites that I'm interested in creating, I really only need a single section. Building sites with multiple sections is really beyond the scope of this article.
Wrapping it All Up
There is a lot to eZ publish. Here, we’ve barely scratched the surface -- we’ve only focused on one area, which is creating content-based sites that look the way you want them to. eZ publish 3 is a lot more flexible and powerful than eZ publish 2.2, but it's a lot more difficult to use, especially as there aren't any useful default templates to get you started.
Hopefully, this introduction will get you on your way to creating awesome eZ publish 3.1 Websites!