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.

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

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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).

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.

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.