In this tutorial, we will walk through an example that shows how to customize the skin of the default eZ Publish Now design. Note that the goal is not to show CSS best practices, but rather to demonstrate the process of modifying an eZ Publish Now site's CSS and the ease with which it can be done. The actual creation of a design is also beyond the scope of this tutorial, as we will use an existing design as the end goal.
This tutorial will help non-technical designers efficiently apply their creativity when working with eZ Publish. You can follow along step-by-step by using an eZ Publish 3.9.2 installatin.
Readers should have some basic knowledge about CSS; therefore, we will not provide detailed explanations for the CSS code used. You should also know how to perform basic editing tasks in eZ Publish; thus, specific instructions on how to edit content have been omitted.
Default and target designs
The following screenshot is the default design of eZ Publish 3.9.2:
Default design
We will work towards the following design:
Target design
Before we work on the design, we will make some simple content modifications and set up our working environment.
Adapting the content
The front page (which uses the Frontpage content class) has different content elements that we can easily adapt. The left column of the target design displays the three latest articles from the Company/Press Room/Grenland section without any corresponding pictures. The center column displays a welcome article (which we will create under the root node). The right column displays boxes from the Products section.
Readers who are unfamiliar with the basic concepts of the Website Interface can consult the documentation (see the user guide under the Website Interface 1.2 section).
After making the content modification, we now have the following front page:
After content modification
Working environment
In this tutorial, we will use the Mozilla Firefox browser and two useful Firefox extensions: the Web Developer tool-kit (including a toolbar) and Firebug (which enables us to visualize and identify the CSS elements to be changed):
Firefox with Firebug
CSS files in eZ Publish
The following screenshot shows the different CSS files that are used in eZ Publish, using the Web Developer extension mentioned above:
Folder for target design files
The general process will be to edit (via a CSS editor of your choice) the two empty CSS files to override the elements of the default design. Where images are needed, simply point the style item to the images folder.
You should now have Firefox open (with Firebug installed and enabled) on your eZ Publish installation and be connected to the server in order to update the CSS files.
We will begin by editing site-colors.css (any CSS editor can be used) to design the front page. See the comments beside each style element in the CSS snippet below for an explanation:
body {
background-image: none; /* This will remove the default background image */
margin-top: 1em; /* we adjust the margin at the top of the page */
font-family: Tahoma; /* font chosen for the global site */
font-size: 11px; /* font size for the global site */
line-height: 125%; /* amount of space between the text lines */
}
a {
color: #C80000; /* color for links */
}
/* we also want to add shadows on the sides of the header */
div#page {
background-image: url(images/head_shadowL.gif);
background-position: left top;
background-repeat: no-repeat;
padding-left: 10px;Using the code above, we achieve the following result:
Global style changes
We can also change the company logo and the banner, but this does not require any CSS modifications. To add a new logo, log in to the Website Interface as an Administrator and click the Site settings link in the top right. You can upload the logo image from this page. For the banner, you need to first upload the banner in the Media/Banners location via the Administration Interface:
Add a banner in the Administration Interface
Then you can edit the front page to add the banner via either the Administration Interface or Website Interface.
We now have the following result:
Global font style changes complete
In this step, we want to:
- Add a yellow line to the top of the page.
- Remove the language links.
- Modify the user menu at the top right of the page.
- Adapt the look of the search box.
To achieve #1, first identify the related div by hovering over the header with the cursor. A blue frame will mark the header, and you will see the following in Firebug:
Identify the header using Firebug
We now know that we have to override the div#header style from pagelayout.css in site-color.css. Similarly, we identify that div#usermenu is the corresponding section for the user menu at the top. This is where we will add the yellow line.
For #2, we proceed in the same way and find out that the div#languages section is the one we want to hide.
Add the following CSS code in site-colors.css:
div#header {
padding-top: 1em;
background-image: url(images/head_shadowR.gif); /* shadow on the right side. The rest is adjustments */
background-position: right top;
background-repeat: no-repeat;
margin-right: -14px;
padding-right: 15px;
height: 115px;
}
div#usermenu {
padding-top: 1em;
background-image: url(images/body_top_bg.png); /* yellow line and adjustments */
background-repeat: no-repeat;
background-position: center top;
}
div#languages {
background-image: none;
display: none; /* hidden */
}Here is the result so far:
Header styles 1 and 2 complete
For #3, we need to remove the background image of the links on the user menu at the top right, as well as the border to the left of those links (to remove the vertical lines between each link). We will then add a background image -- which has already been stored in the images folder -- for these links.
For #4, we need to change both the Search button and the text field. After having identified the right divs with Firebug (input#searchbutton and input#searchtext), we override the CSS to add our new background images for these elements.
Thus, add the following CSS code to site-colors.css:
div#links {
background-image: none; /* background image removed */
}
div#links a {
font-weight: normal; /* eliminates the bold */
text-decoration: none;
color: #686868; /* new color */
font-size: 10px; /* size adjustment */
font-family: Tahoma; /* chosen font */
border: none; /* removes the vertical separator */
background-image: url(images/links_bg.png); /* adds the yellow separators */
background-position: left 5px; /* position of the separators */
padding-left: 15px;
background-repeat: no-repeat;
}
input#searchbutton {
background-image: url(images/search_button.png); /* adds the right search button given by the designer and the rest is font and adjustments */
width: 47px;
height: 17px;
border: none;
<padding: 0;
text-align: center;
font-size: 10px;
color: #3D3D3D;
}
/* the text field */
input#searchtext {
background-image: url(images/search_text.png); /* a text field a bit more gray */
background-repeat: no-repeat;
width: 151px; /* adjustments based on the size of the target design */
height: 17px; /* idem */
border: none;
}The header modification is now complete:
Header styles complete
The main navigation menu of the target design has no background image. It is plain text with a specific font and arrows to the left of each link. Thus, we first need to remove all design elements from the original design.
Using Firebug, we identify the appropriate section: div#topmenu ul. This is a frame for all the list elements of the main navigation menu.
The following CSS code in site-colors.css removes the gray areas from the right and left of the menu:
/* TOP MENU */
div<#topmenu {
margin-top: -20px;
padding-left: 0.5em;
background-color: #FFFFFF; /* white color + adjustments */
}
div#topmenu ul {
background-image: none; /* gray part removed on the right side of the menu */
}We achieve the following result:
Gray areas removed
Then, we will remove the background image behind each element of the top menu (using Firebug, div#topmenu li is identified as the appropriate section) and modify the style of each link (div#topmenu li a):
div#topmenu li {
background-image: none;
}
div#topmenu li a {
font-weight: normal;
font-family: Tahoma;
border-right: none; /* we remove the vertical line that was there as a separator */
background-image: url(images/topmenu_a.png); /* we add the small arrows */
background-position: left center;/* we position these arrows on the left of each link */
background-repeat: no-repeat;
font-size: 11px;
}When we hover over one of the menu items, there is still a hover effect with an underline. Firebug identifies this section as div#topmenu li a:hover. Also, when we click on a menu item, there is still a gray background (in the div#topmenu li.selected section):
Gray background on selected menu item
Here is the corresponding CSS code for site-colors.css:
div#topmenu li.selected {
background-image: none; /* remove the grey background when one item is selected */
}
div#topmenu li a:hover {
border-bottom: none; /* remove the line under each element /*
}The new main navigation menu design is now complete:
Main navigation menu styles complete
We will now modify the three content blocks on the front page, starting with the left block.
The three articles on the left are contained within a light gray box with rounded corners. We will remove this box from a div called box-3 (as identified by Firebug):
/* Box 3 */
div.box-3 div.border-tl, div.box-3 div.border-tr, div.box-3 div.border-tc, div.box-3 div.border-ml, div.box-3 div.border-mr, div.box-3 div.border-bl, div.box-3 div.border-br, div.box-3 div.border-bc {
background-image: none; /* remove background of the box in all parts */
}
div.box-3 div.border-mc {
background: none; /* for the center part of the box, we just need to remove the background with none */
padding: 0;
}
Light gray box removed
We then need to add the background image behind the title "Grenland". We identify this div as vertically_listed_sub_items div.content-view-embed h2, and add a style item in classes-colors.css:
div.vertically_listed_sub_items div.content-view-embed h2 {
background-image: url(images/vert_h2_bg.png); /* we add the black background and the arrow */
color: #FEE439; /* yellow text */
height: 22px; /* adjustments */
padding-top: 6px;
padding-left: 25px;
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
}From the result below, you can see that each article title now has the same background image:
Article titles with background image
We need to override the h2 title of the Article class and also make some other modifications, such as the color of the link. Because these styles are content-class related, they are added to classes-colors.css:
div.vertically_listed_sub_items div.content-view-embed div.class-article h2 {
background-image: none; /* we remove the introduced background */
font-weight: normal;
font-size: 14px;
font-weight: bold;
}
/* this is the link property of the article title */
div.vertically_listed_sub_items div.content-view-embed div.class-article h2 a {
color: #686868; /* we change the color according to the target design */
text-decoration: none; /* we remove the underline */
background-image: url(images/dot.png); /* the yellow element on the left of the link */
background-repeat: no-repeat;
background-position: left 10px; /* adjustments */
padding-left: 10px; /* idem */
}The block is almost complete:
Left block almost complete
The last style for this block is the yellow separator between articles. Using Firebug to select the text of one of the articles, we find the div: div.content-view-embed div.class-article div.attribute-short. In our case, we want to apply the separator as a background image for objects of the Article class. Add the following to classes-colors.css:
div.vertically_listed_sub_items div.content-view-embed div.class-article {
background-image: url(images/separator.png); /* separator added. Rest is adjustments */
background-repeat: no-repeat;
background-position: left bottom;
padding-bottom: 1.5em;
margin-bottom: 1.5em;
}Here is the result so far:
Left block styles complete
Similar to what we did with the left block, we identify the box (box-2) with Firebug, then remove the background with the following CSS code in site-colors.css:
/* Box 2 */
div.box-2 div.border-tl, div.box-2 div.border-tr, div.box-2 div.border-tc {
background-image: none;
display: none;
}
div.box-2 div.border-ml, div.box-2 div.border-mr, div.box-2 div.border-bl, div.box-2 div.border-br, div.box-2 div.border-bc {
background-image: none;
}
div.box-2 div.border-mc {
background: none;
padding: 0;
}This gives the following result:
Middle block with background removed
There is a graphic element under the box, which is identified as the highlighted_object div. Remove this background with the following code in site-colors.css:
div.highlighted_object {
background-image: none;
}We can now focus on the new style for the box. We need to add the background image for the title of the article as well as the link properties in site-colors.css:
div.highlighted_object h2 {
background-image: url(images/high_h2_bg.png); /* image for the target design */
background-repeat: no-repeat;
color: #FEE439; /* color followed by adjustments */
height: 22px;
padding-top: 6px;
padding-left: 25px;
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
}
div.highlighted_object h2 a {
text-decoration: none; /* to remove the underline */
}The new middle block is now done:
Middle block styles complete
The right block is an itemized list with the same title style as the middle block. We will modify the border-box div in site-colors.css.
div.itemized_sub_items {
width: 100%; /* if you don't do that you will have the box stopping before the banner on the right */
}
div.itemized_sub_items div.content-view-embed h2 {
background-image: url(images/high_h2_bg.png); /* clear gray background and the rest is adjustments and fonts */
background-repeat: no-repeat;
color: #FEE439;
height: 22px;
padding-top: 6px;
padding-left: 25px;
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
}This is the right block so far:
Right block after first few modifications
We now need to remove the border from the border-box div. Firebug shows that this border is built using 3 parts: top, middle and bottom:
Borders identified in Firebug
Next, add the following code to site-colors.css to remove the background frame:
div.itemized_sub_items div.border-box div.border-tl,
div.itemized_sub_items div.border-box div.border-tr,
div.itemized_sub_items div.border-box div.border-tc,
div.itemized_sub_items div.border-box div.border-ml,
div.itemized_sub_items div.border-box div.border-mr,
div.itemized_sub_items div.border-box div.border-bl,
div.itemized_sub_items div.border-box div.border-br,
div.itemized_sub_items div.border-box div.border-bc {
background-image: none;
}
div.itemized_sub_items div.border-box div.border-mc {
background: none;
padding: 0;
}This is the result so far:
Right block without background frame
The list items and their links need to be customized in site-colors.css:
/* the #main needs to be used since the we work on global styles defined in the main div */
div#main div.itemized_sub_items div.content-view-embed ul li {
background-image: url(images/itemized_li.png); /* the dashes under each listed element */
/*adjustments*/
background-position: bottom left;
background-repeat: repeat-x;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
div.itemized_sub_items div.content-view-embed ul li a {
background-image: url(images/itemized_a.png); /* we add the yellow arrow on the left side of each link */
text-decoration: none; /* we remove the underline of the links */
color: #686868;
font-size: 11px;
}The new style for the right block is now ready:
Right block style complete
By default, the footer looks like this:
Default footer style
The footer div is easily identified and then modified in site-colors.css:
div#footer {
background-image: url(images/footer_bg.png); /* background image and other adjustments */
font-size: 11px;
margin-top: 3em;
margin-bottom: 2em;
}We get the following result:
Footer style complete
newpage
The target design has some additional content on the front page.
First, we add the additional pictures in the Media/Images node via the Administration Interface. Then, we can edit the front page to add some static text with h2 titles. Insert the corresponding pictures for both the middle and right blocks. It is important to add a separator between the fetch icon and the new text. To do this, click on the Custom tag icon in the Online Editor and choose the separator tag.
Select the separator tag
The Online Editor text areas should now look as follows:
Add new content with the Online Editor
After publishing the content, the site now looks like this:
Front page with new content
The final step is to style the titles and the separators. The two sections involved (as identified by Firebug) are h3 and the separator div. (The reason why it is h3 instead of the h2 that was previously added is that the XML header tags in the Online Editor are one level above the equivalent XHTML tags. h1 in XML in the Online Editor is equivalent to h2 in XHTML; h2 in XML in the Online Editor is equivalent to h3 and so on.) We then add the following code to site-colors.css:
/* SEPARATOR */
div.separator {
background-image: url(images/separator.png);
background-repeat: no-repeat;
clear: both;
}
h3 {
font-family: Tahoma;
font-size: 14px;
background-image:url(images/dot.png);
background-repeat: no-repeat;
background-position: left 10px;
padding-left: 10px;
margin-bottom: 1em;
}We are done applying the new design!
Target design complete
This design can now be reused for other websites and specifically for eZ Publish Now projects.
Now we will briefly outline the processes for creating and importing a site package for this tutorial, using the eZ Publish Package Wizard.
See section 6 of the Website Interface Customization Guide for full details on how to create site packages.Once the site package is generated and saved locally, you can install it on other eZ Publish installations via the Administration Interface. See section 7 of the Website Interface Customization Guide for full details.
First, log in to the Administration Interface of the existing site and click the Packages link in the Setup section. Then, click the Create a new package button, select the Site style radio button and click the Create package button.
After adding a thumbnail to represent the package, the wizardhttp://share.ez.no/siteadmin/content/edit/89351/1/eng-GB will prompt you to upload the site-colors.css and classes-colors.css files
Upload site-colors.css and classes-colors.css:
Next you need to upload (one by one) all of the pictures from the images folder:
Upload all image files
Fill in some extra details about your site package, then export the package (to be saved locally).
You can then easily reuse this design by importing the package via the Administration Interface of any eZ Publish 3.9.x website. Click on the Setup tab, then the Packages link, and finally click the Import new package button.
If you have an eZ Publish Now installation, you can (once imported) select the package through the Website Interface by clicking the Site settings link at the top right and choosing the imported site package:
Select the site package in the Website Interface
Other than the content modifications that were made, the imported site package looks the same as the target design:
Newly applied site package
The site package for the target design is available for download.
In this tutorial, we have demonstrated how to change the design of the default eZ Publish Now installation with mostly CSS changes. Once the design is complete, you can create a site package that can be imported into other eZ Publish installations.
Keep in mind that this tutorial is not intended for learning good CSS code, but rather to show the possibilities that are available with CSS and eZ Publish Now.
We welcome your comments and tips regarding eZ Publish design issues.
Resources