Changelog for Products.Andreas09Theme
=====================================

Products.Andreas09Theme - 1.0 Unreleased
----------------------------------------

- Initial package structure. See Products.Andreas09Theme/docs/ZopeSkel.txt
  [zopeskel]

STEP 01 - Preparation
---------------------

Note: These tasks should be performed right after the code was generated by
ZopesSkel, preferably before installing the theme product.
In any case, a Zope (re)start will be needed after applying them.

- Change the name of the Product GS profile to
  give it a name that makes obvious in the installer that it is a theme.

  In Products.Andreas09Theme/Products/Andreas09Theme/profiles.zcml:
    - change the title of the default profile, and name it "Andreas09
      Theme" (line 8).

- Skins folders were named an ugly way by the ZopeSkel template.

  Strip names of the folders that are in skins, their names are now:
  Andreas09Theme_custom_images, Andreas09Theme_custom_templates and
  Andreas09Theme_styles.

  In Products.Andreas09Theme/Products/Andreas09Theme/skins.zcml:
    - reflect changes made on the file system (lines 8, 10, 12).

  In Products.Andreas09Theme/Products/Andreas09Theme/profiles/default/skins.xml:
    - reflect changes made on the file system (text substitution in many
      lines).

STEP 02 - Images
----------------

- The favicon can be cutomized easily by using images with same name in
  portal_skins.

  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_custom_images:
    - Drop image called 'favicon.gif'. It must be in windows ICO format

- Other icons can be cutomized easily by using images with same name in
  portal_skins as well.

  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_custom_images:
    - Drop images (16x16) called 'user.gif' and 'search_icon.gif'.

- Content Icons can be customized the exact same way.

  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_custom_images:
    - Drop images (16x16) called 'site_icon.gif', 'folder_icon.gif',
      'document_icon.gif and 'file_icon.gif'.

- We need a folder for the images that are specific to the theme (it makes it
  easier to identify plone image customizations by keeping them in a specific
  folder, We have the _custom_ folder, we need another one).
  
  In Products.Andreas09Theme/Products/Andreas09Theme/skins/:
    - Create a folder named Andreas09Theme_images.

  In Products.Andreas09Theme/Products/Andreas09Theme/skins.zcml:
    - reflect changes made on the file system (added lines 13-14).

  In Products.Andreas09Theme/Products/Andreas09Theme/profiles/default/skins.xml:
    - reflect changes made on the file system (added lines 14-16, then 25-26).

  Zope Restart Needed at this point, + Product reinstall.

- Now we can add all the images needed for our theme in that folder.

  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_custom_images:
    - Drop images named:
        'bodybg-black.jpg'
        'bodybg-blue.jpg'
        'bodybg-green.jpg'
        'bodybg-orange.jpg'
        'bodybg-purple.jpg'
        'bodybg-red.jpg'
        'footerbg.jpg'
        'menuhover-black.jpg'
        'menuhover-blue.jpg'
        'menuhover-green.jpg'
        'menuhover-orange.jpg'
        'menuhover-purple.jpg'
        'menuhover-red.jpg'

  (No restart needed if zope in debug mode..)

STEP 03 - Stylesheet Registration
---------------------------------

- From the ZopeSkel output, there is no stylesheet specific for our theme that
  is located in the portal skins tool.
  Even if we won't use base_properties, we would prefer to have our style

  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_styles/:
    - Copy any existing style sheet template ('base.css.dtml' for instance) and
      rename it 'andreas09.css.dtml'

  In Products.Andreas09Theme/Products/Andreas09Theme/profiles/default/cssregistry.xml
    - Add style sheet registration with the portal_css tool (lines 10 to 15).
  
  No Zope restart needed if debug mode is ON, but product reinstall is needed
  for registering the stylesheet in portal_css.

- Start building a basic style with CSS to make our web site look a bit less
  ugly.

  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_styles/andreas09.css.dtml:
    - See file to see what changes we applied to the look of our page.

  Even if the site still looks ugly, we already have the base that we will
  need later for building our CSS.

STEP 04 - Logo
--------------

- Easiest way is image customization technique as seen above.
  We won't apply this one (already covered in the principle).

- A bit more complex: use base properties.
  It makes it easy to change the image and image name without having to touch
  template.
  
  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_images:
    - Drop image 'plone-logo-256-white-bg.png' available from the Logo Pack:
      available at http://plone.org/about/logo/.

  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_styles/base_properties.props:
    - Change logo name (line 5).

- Change the html output: cusomize logo viewlet template.

  copy plone.app.layout/trunk/plone/app/layout/viewlets/logo.pt
  to Products.Andreas09Theme/Products/Andreas09Theme/browser/logo_modified.pt
  
  In Products.Andreas09Theme/Products/Andreas09Theme/browser/logo_modified.pt:
    - Wrap the existing code with a <div></div> tag (See file, beware of
      namespace declarations).

  In Products.Andreas09Theme/Products/Andreas09Theme/browser/configure.zcml:
    - Declare the viewlet that replaces the default one.
      Both 'class' and 'template' must be declared even if we only want to
      change the template, because we still use the logic of the original
      viewlet class.
      Done in the viewlets section of the zcml file.

  Zope Restart Needed at this point (no product reinstall needed).

STEP 05 - Viewlets reorganization - Header
------------------------------------------

- Move breadcrumbs out of header and put it at top of content region.

  In Products.Andreas09Theme/Products/Andreas09Theme/browser/configure.zcml:
    - Register viewlet with the right viewlet manager (lines 23-30).

  In Products.Andreas09Theme/Products/Andreas09Theme/profiles/default/viewlets.xml:
    - Hide the 'plone.path_bar' viewlet in the 'plone.portaltop' manager
      (lines 12-15 at final state of this step).
    - Order 'plone.path_bar' at first position in the 'plone.contentviews'
      manager (lines 27-32 at final state of this step).

- Move the logo viewlet from the 'plone.portalheader' manager to the
  'plone.portaltop' one (at first position).
  
  In Products.Andreas09Theme/Products/Andreas09Theme/browser/configure.zcml:
    - Change the name of the manager interface the viewlet is declared for
      (line 16).
  
  In Products.Andreas09Theme/Products/Andreas09Theme/profiles/default/viewlets.xml:
    - hide the 'plone.logo' viewlet for 'plone.portalheader' and order it the
      correct way in 'plone.portaltop' (lines 4-9 and 20-23 at final state).

- Hide 'plone.site_actions' from 'plone.portalheader' as it will be registered
  with the footer later on.

  In Products.Andreas09Theme/Products/Andreas09Theme/profiles/default/viewlets.xml:
    - Hide the viewlet (line 23).

- Reorder 'plone.personal_bar' inside 'plone.portaltop' to make it appear right
  after the logo section.

  In Products.Andreas09Theme/Products/Andreas09Theme/profiles/default/viewlets.xml:
    - Reorder the viewlet (lines 8-9).

A Zope restart is needed to see those changes, as well as a product reinstall.
Changes for viewlets can be seen in /@@manage-viewlets at any time if needed.

STEP 06 - Styling the new header
--------------------------------

No Zope restart needed nor product reinstall, so the following tasks can be
visually tested with a simple page reload in the browser.

- First we apply a background image to the visual wrapper, keeping the same
  pattern than the original design.
  
  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_styles/andreas09.css.dtml:
    - replace line:
        background-color: #f0f0f0;
      with:
        background: #f0f0f0 url(bodybg-black.jpg) repeat-x;

- Then we align logo and personal actions, + some text contrast for these actions.

  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_images/:
    - Replace the blue logo with a white one that will render better in
      printed display.

  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_styles/andreas09.css.dtml:
    - Add 'Header section' and 'Personal actions' as seen in the file at final step.
    - Fix float in 'Horizontal menu':
      code needed for this task:
        /* Horizontal menu */
        
        ul#portal-globalnav {
            clear: both;
        }
    - Adjust font weight and decoration for links at top of file.

- Take care of the Sections + Search box horizontal section

  In Products.Andreas09Theme/Products/Andreas09Theme/skins/Andreas09Theme_styles/andreas09.css.dtml:
    - Change the existing code for 'Horizontal menu' with the one as it is
      when task is completed.
    - Add 'Search box' section.

