In Chapter 1, we installed the eZ Webin package as a sample 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:
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.
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.
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.
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.
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 Archive 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.
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 achive section ID that we previously created) and if it has, will hide the unnecessary sidebar.
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 otherswebstyletoolbar.css
: this stylesheet is imported for the frontend web toolbar that is used for editing the contentpagelayout.css
: this is where all of the default styles of the global pagelayout are definedcontent.css
: this is where all the default styles of the content classes are definedsite-colors.css
: this file is used to override the pagelayout.css
to skin a site differentlyclasses-colors.css
: this file is used to override the default styles defined by the content.css
fileTo 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.
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, just as we did in Chapter 5, 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.
18.118.32.222