How to Configure an eZ Publish Site

We will now perform some minor tweaks to the appearance of the site. These modifications are a simple introduction to the template system and the CSS organization in eZ Publish.

Adding a link to the home page on the horizontal menu bar

By default, clicking on the company logo on any page brings visitors to the site’s home page. However, for added browsing convenience, we will add a link to the home page on the horizontal menu bar.

To do so, we must first add a link object in the root of our content node tree through either the Website Interface or the Administration Interface. Enter “Home” for the name and “/” for the URL. After publishing the link, we must add the Link class to the list of allowed classes on the top menu. This is found in settings/override/menu.ini.append.php:

[MenuContentSettings]
TopIdentifierList[]
TopIdentifierList[]=folder
TopIdentifierList[]=feedback_form
TopIdentifierList[]=gallery
TopIdentifierList[]=forum
TopIdentifierList[]=article
TopIdentifierList[]=frontpage
TopIdentifierList[]=link

The link now appears on the horizontal menu bar, but is in the middle of the items:

Home link in the middle of the menu

To move the Home link to the far left, set its priority level in the Administration Interface to be lower than all of the other top-level objects.

Update priority levels

The link now appears first on the left, but we must make one final modification. Notice that if you click on the “Home” link on the top menu, it opens in a new window or tab. The desired behavior is for it to open the home page in the same window or tab.

We must locate the appropriate template that generates the XHTML for the horizontal menu bar. We will begin our search by examining the pagelayout template. The pagelayout is the main template that dictates the overall look of the site. For the Website Interface, the pagelayout template is located at /extension/ezwebin/design/ezwebin/templates/pagelayout.tpl

Within pagelayout.tpl, notice the following code, which indicates where the code for the top menu is located:

<div id="topmenu">
   {include uri='design:menu/flat_top.tpl'}
 </div>

In flat_top.tpl, we find the following code, which populates the menu item if it is an object of the Link class:

<li id="node_id_{$item.node_id}"{if $item_class} ")}"{/if}><div><a href={if eq( $ui_context, 'browse' )}{concat("content/browse/", $item.node_id)|ezurl}{else}{$item.data_map.location.content|ezurl}{/if} target="_blank"{if eq( $ui_context, 'edit' )} onclick="return false;"{/if}>{$item.name|wash()}</a></li>

We remove target=”_blank”, which caused the Home link to open in a new window.

Adding a logo

We will replace the “COMPANYLOGO” image that appears on every page with our eZ Tennis logo:

eZ Tennis Club logo

We can upload the new logo in the Site settings page in the Website Interface. However, the system will automatically resize the image to a size that is smaller than we would like. Therefore, we must change the setting that controls how much eZ Publish will scale down the image.

In settings/eng/image.ini.append.php and settings/fr/image.ini.append.php, change the [logo] block to be as follows:

[logo]
Reference=
Filters[]
Filters[]=geometry/scaledownonly=199;74

Now we can upload the logo as described and it will be resized as indicated.

CSS modifications

After changing the default size of the logo, our top menu needs to be moved down slightly. This is accomplished by editing one of the CSS files from the skin site package in /var/storage/packages/local/empower_enterprise/files/default/file.

By looking at the XHTML page source (by selecting "View... Page Source" in Firefox, or a similar function in other browsers), we see that the top menu is contained in a div called “topmenu”. As a result, we must locate the CSS file that dictates the style for that div.

As was explained in the article How to Skin an eZ Publish Now Site, site-colors.css overrides the styles for the global pagelayout (not related to content), and classes-colors.css overrides the styles specifically related to content classes.

Therefore, we will edit site-colors.css and remove the “margin-top” style in the topmenu div:

div#topmenu

{
 margin-top: -20px;
 padding-left: 0.5em;
 background-color: #FFFFFF;
}

Also, as mentioned earlier, the language links are hidden in this skin. We will reveal them by removing the section in site-colors.css that refers to the languages div (which can also be identified in the XHTML page source):

div#languages
{
 background-image: none;
 display: none;
}

Changing the URL for the language links

Now that the language links are shown in the top left of the page, we must update them to reflect the siteaccesses that we simplified earlier. This can be done in the Look and feel page in the Design tab of the Administration Interface or on the Site settings page of the Website Interface.

The site URLs should be “tennisdemo.ezsystems.ca” and “tennisdemo.ezsystems.ca/fr”; siteaccesses should be “eng” and “fr”; and, the language names can remain the same, as they represent the text displayed for each link. You can optionally change the French language name to “Fr” to be consistent with the renamed siteaccess.

Edit the language links

Note that you must make these changes in both the French and English siteaccesses. In the Administration Interface, this means that you must edit the Look and feel page in both French and English. In the Website Interface, this means that you must access the Site settings page via both the French and English siteaccesses.