
eZ Publish design contest 2007 started few weeks ago. Basically task is very simple: make nice design. Main price is really great. You can win a free ticket for eZ Conference 2007 and learn about what is happening in the information business from a content management, business and technology standpoint. And the most important get first-hand information from eZ developers, eZ partners and community members. As eZ crew member I can not join contest for obvious reasons ;) however I can share few tips that will make your designing process easier.
I will skip designing (drawing, coloring, etc) and image slicing part in design tools such as Photoshop or Fireworks. The most important is testing and customization of Website Interface. This part can be done on few ways.
You can override default Website Interface design by using custom design extension. Once you have eZ Publish 3.9.0 with Website Interface installed you need to do following:
In extension directory of eZ Publish create following directory structure:
ezwebin_custom
| - design
| | - ezwebin
| | - images
| | - stylesheets
| - settingsIn extension/ezwebin_custom/settings directory create new file design.ini.append.php and put inside:
<?php /* [ExtensionSettings] DesignExtensions[]=ezwebin_custom */ ?>
Edit settings/override/site.ini.append.php file and add in block [ExtensionSettings]:
ActiveExtensions[]=ezwebin_custom
Note that ezwebin_custom must be placed AFTER ezwebin to override it. For example like:
[ExtensionSettings] ActiveExtensions[] ActiveExtensions[]=ezwebin ActiveExtensions[]=ezdhtml ActiveExtensions[]=ezodf ActiveExtensions[]=ezwebin_custom
Since now you can start with customization. This is clean and correct way if you are working on new project. Using this method you can override original ezwebin CSS files.
This is second method of doing Website Interface design customization. How to make a sitestyle package you can find in official Website Interface customization manual. After installation of Website Interface, two CSS files (site-colors.css, classes-colors.css) are included in pagelayout. You can find them on file system in 'var/storage/packages/ez_systems/ezwebin_design/files/default/file'. Add your CSS styles in those files. Remember that when you specify the path to images in the CSS files, use the following directory nomenclature: images/myimage.png. Just create 'images' directory under 'var/storage/packages/ez_systems/ezwebin_design/files/default/file' then place images used in CSS files there. Those CSS files and images you can upload later via sitestyle package wizard in eZ Publish (see customization manual for more information). New styles will appear immediately after page refresh in web browser.
Still useful might be B?rd's article about customization eZ Publish design with CSS and sitestyle packages.


I have to keep the previous comment up ;-)
Following the suggested method to extend the CSS-files of the ezwebin doesn't work for templates: pagelayout.tpl of ezwebin-extension is called but not the new one within the overriding extension (./extension/ezwebin_seawolf/design/ezwebin_seawolf/templates/pagelayout.tpl).
Also see:
http://issues.ez.no/10184

Using the method you explained in this article, we can override the ezwebin CS files.. but what should i do if i want to override the ezwebin template files?
how to override - answer
Saturday 29 September 2007 10:52:49 pm
AmonPL
I got a workaround for this problem:
1. place your extension BEFORE ezwebin in settings/override/site.ini.append:
[ExtensionSettings]
ActiveExtensions[]
ActiveExtensions[]=your_extension
ActiveExtensions[]=ezwebin
From now on, your custom templates should work.
2. edit extension/your_extension_dir/settings/design.ini.append.php:
as listed in the article, add
[ExtensionSettings]
DesignExtensions[]=your_extension
Then, change the default location of css files(var/storage/blablab.....) by adding the follwing(again, to the design.ini.append.php):
[StylesheetSettings]
SiteCSS=extension/your_extension_dir/design/ezwebin/stylesheets/site-colors.css
ClassesCSS=extension/your_extension/design/ezwebin/stylesheets/classes-colors.css
From now on, everything should work ok(at least it works for me :) ).