Creating a Design with eZ Publish 4 Templating System: Part 2

Exclusive offer: get 50% off this eBook here
eZ Publish 4: Enterprise Web Sites Step-by-Step

eZ Publish 4: Enterprise Web Sites Step-by-Step — Save 50%

Master eZ Publish's flexible web development for the enterprise

€23.99    €12.00
by Francesco Fullone Francesco Trucchia | October 2009 | Content Management Open Source

Read Part One of Creating a Design with eZ Publish 4 Templating System here.

eZ Webin

For this article it is assumed that the eZ Webin package is installed as a frontend for our site. This package is very flexible and is usually used as a starting point for developing a new site. By default, it includes:

  • A flexible layout
  • Some useful custom content classes (blog, event, forum, article, and so on)
  • Web 2.0 features, such as a tag cloud and comment functions
  • Custom template operators

In our project, we will extend and override the eZ Webin template in order to create the Packtmedia Magazine site and add some features needed for the project. We will see this step-by-step as we understand better how eZ Publish works.

Overriding the standard page layout

The page layout is the main template and defines the style of the entire site. To create a page layout template, we need to create a file named pagelayout.tpl and place it inside the templates folder of our design extension.

As we said, we will work with eZ Webin. This extension doesn't use the standard page layout but overrides the standard page layout with its own custom behavior. We need to do the same overriding from the eZ Webin pagelayout.tpl.

To override the template, we have to copy it in our design's extension folder placed in extension/packtmedia/design/magazine/templates/. Now open a shell and execute this:

# cd /var/www/packtmediaproject/extension
# cp /ezwebin/design/ezwebin/templates/pagelayout.tpl /packtmedia/
design/magazine/templates/

We will use this new pagelayout.tpl file to implement the wireframe that we developed in the previous sections.

Section for our project

eZ Publish includes features for creating a particular view in order to add content objects inside specified sections. For example, if we take a look at our wireframe, we need to assign a different layout for rendering the Issue archive folder and its subfolders.

To do this, we have to create a new section in the administration panel and associate it to the entire Issue archive subtree. After that, we can use the fetch functions to select the correct view for that section.

Creating a new section

To create a new section, we have to open our browser and from the site's backend, select the Setup tab from the top menu. We then need to navigate to the Sections link in the left-hand menu, and then click on the New section button.

Creating a Design with eZ Publish 4 Templating System: Part 2

Next, we will create a new section called Archive and select the default Content structure value in the select menu.

Creating a Design with eZ Publish 4 Templating System: Part 2

Now, a new Archive link will appear in the Sections list. We have to click on the + button to the left of the Archive link, and then select the Issue archive node, by selecting the relevant checkbox.

Creating a Design with eZ Publish 4 Templating System: Part 2

After we have saved, click on the Select button. All of the Issue archive subfolders will be placed inside the Archive section. We have to remember the ID of this section, which we'll use to create the override rules. In this case, the section ID number is 6, as seen in the first screenshot in the Creating a new section section.

Setting up the section permission access

By default, eZ Publish creates private sections that only an administrator can access. To make a section public, we need to give read permission to anonymous users.

To set up the rules, we have to go back to Setup tab on the top menu, and then click on the Role and policies link on the left-hand menu.

Creating a Design with eZ Publish 4 Templating System: Part 2

Here, we have to click on the Edit button on the right-hand side of the Anonymous link, and then click on the New policy button.

Creating a Design with eZ Publish 4 Templating System: Part 2

Next, select the content option in the Module field, and then click on the Grant access to one function button.

Creating a Design with eZ Publish 4 Templating System: Part 2

Select the read option in the Function field, and then click on the Grant limited access button.

Creating a Design with eZ Publish 4 Templating System: Part 2

Next, select the Anonymous option for the Section field. Click on the OK button, and then click on the OK button on the Edit <Anonymous> Role page.

Creating a Design with eZ Publish 4 Templating System: Part 2

Now, the anonymous user can access the Archive section.

In the next paragraph, we will use this section to create custom override rules.

Customizing the page layout

After we copy the pagelayout.tpl template into the new path, we have to work on it in order to create the three columns inside the content layout of the eZ Webin template.

To do this, first of all, we have to remove the leftmost sidebar, along with the secondary navigation menu, inside the Archive section that we have created.

Open the pagelayout.tpl file that you have copied into your favorite IDE, and take a look at the code.

At line 62 we will find the following code:

{if and( is_set( $content_info.class_identifier ), ezini(
'MenuSettings', 'HideLeftMenuClasses', 'menu.ini' )|contains(
$content_info.class_identifier ) )}
{set $pagestyle = 'nosidemenu noextrainfo'}

Here, eZ Webin hides the side menu if the content class belongs to the array returned by the ezini operator.

We now need to extend the IF sentence and add a control to the section ID, by using the following code:

{if or(and( is_set( $content_info.class_identifier ), ezini(
'MenuSettings', 'HideLeftMenuClasses', 'menu.ini' )|contains(
$content_info.class_identifier ) ), $module_result.section_id|eq(6))}
{set $pagestyle = 'nosidemenu noextrainfo'}

As we can see, this code will now check to see if the browsed section has an ID equal to 6 (that is, the archive section ID that we previously created) and if it has, will hide the unnecessary sidebar.

CSS editing

Luckily, the entire template code of eZ Webin is strongly semantic and all of the elements have their own IDs and classes. Thanks to this, we can change a lot of things by simply working on the CSS.

By default, the CMS uses six CSSes. These are:

  • core.css: this is the global stylesheet where all of the standard tag styles for eZ Publish are defined; usually, this file is overridden by all of the others
  • webstyletoolbar.css: this stylesheet is imported for the frontend web toolbar that is used for editing the content
  • pagelayout.css: this is where all of the default styles of the global pagelayout are defined
  • content.css: this is where all the default styles of the content classes are defined
  • site-colors.css: this file is used to override the pagelayout.css to skin a site differently
  • classes-colors.css: this file is used to override the default styles defined by the content.css file

To edit the CSS, we have to copy the original eZ Webin stylesheet from the /var/www/packtmediaproject/extension/ezwebin/design/ezwebin/stylesheets folder to our design directory and then to execute the following commands:

# cd /var/www/packtmediaproject/extension/
# cp -rf ezwebin/design/ezwebin
/stylesheets/* packtmedia/design/magazine/stylesheets/

Now, every time that we want to change the stylesheet, we have to remember to edit the CSS files in the design/magazine/stylesheets/ directory of our extension.

Creating a new style package

In eZ Publish, as we did for extension, it's possible to create a portable style package, so we can share and reuse our custom style in other sites. We can do this by navigating to the backend admin site and uploading the new stylesheet that we want to use.

First, we have to create our CSS files by using our favorite CSS editor; we have to remember that they will override the default styles, so we only need to add the lines that we want to change.

Creating a Design with eZ Publish 4 Templating System: Part 2

After we create the new stylesheet files, we have to open the browser, click on the Setup tab, and then click on the Package link in the left-hand sidebar.

The system will ask us where we want to create our new package.

We will select the local repository and click on the Create new package button. eZ Publish will then ask us which kind of package we want to create. We have to select the Site style wizard, and then click on the Create new package button.

Creating a Design with eZ Publish 4 Templating System: Part 2

We can now choose a thumbnail for the style that we are uploading, or continue without it.

After selecting the thumbnail, the wizard will ask us to choose the CSS file that we previously created. Select it, and then click on the Next button.

Creating a Design with eZ Publish 4 Templating System: Part 2

With the wizard, we will also upload one or more images, for example a new logo file, or other images related to the CSS. To not upload files, we simply have to click on the Next button without selecting a file in the form.

Creating a Design with eZ Publish 4 Templating System: Part 2

We have to remember that all of the images that we upload will be saved in a subfolder named images, which will be placed in the same directory as the stylesheet. This will be useful when we need to set the relative path of the images used inside the CSS.

We can now add the package information and export it to our PC (if required).

Creating a Design with eZ Publish 4 Templating System: Part 2

The new style package will automatically be installed in the eZ Publish package folder. It will be accessible from the Design tab, via the sidebar's Look and Feel link.

If we select the package and clear the cache automatically, it will be applied to the frontend.

Creating a Design with eZ Publish 4 Templating System: Part 2

Summary

In this article, we learned the basics of the templating system of eZ Publish. We worked on template's function and operator, and also learned how to extend the default WYSIWYG editor of eZ Publish.

Moreover, we created the site wireframe and learned how the design overriding feature works. We also created a new stylesheet package, and applied it to our extension.

eZ Publish 4: Enterprise Web Sites Step-by-Step Master eZ Publish's flexible web development for the enterprise
Published: October 2009
eBook Price: €23.99
Book Price: €38.99
See more
Select your format and quantity:

If you have read this article you may be interested to view :

About the Author :


Francesco Fullone is a geek who, in his spare time, acts as the founder and the CEO of Ideato, a Web 2.0 company based in Italy. He is a senior consultant, skilled in Agile methods and any kind of PHP development. He is also the president of the Italian PHP User Group (GrUSP) and an evangelist on open source software and PHP technologies. You can meet him in Italy at one of the tech conferences, where he usually participates as a speaker or a staff member.

Francesco Trucchia, after taking a degree in computer science, worked for some years as a web engineer on small, medium, and large projects for some Italian companies. He is now the co-founder and the CTO of Ideato, a PHP Italian company that is expert in web software development, systems integration, and Agile methods. He likes to develop with Agile methods. He has introduced these practices in Ideato for their software's lifecycle process, and has received a lot of positive feedback for it.

Books From Packt

Joomla! 1.5 SEO
Joomla! 1.5 SEO

jQuery 1.3 with PHP
jQuery 1.3 with PHP

Drupal 6 Site Blueprints
Drupal 6 Site Blueprints

Plone 3.0 for Education
Plone 3.0 for Education

Ext JS 3.0 Cookbook
Ext JS 3.0 Cookbook

Papervision3D Essentials
Papervision3D Essentials

Solr 1.4 Enterprise Search Server
Solr 1.4 Enterprise Search Server

Zend Framework 1.8 Web Application Development
Zend Framework 1.8 Web Application Development

 

 

 

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software