Re: implementing webdesign for plone

[Carsten Senger <senger rehfisch de>]

Hi all,

--On Freitag, August 21, 2009 16:51:33 +0200 johannes raggam
<raggam-nl adm at> wrote:

> hey,
>
> - regarding to the templates, the submenus are shown in 2 different
> locations. for a few items the submenu is next to the title. if there
> are more items the submenu is in a block on the right side. i created
> some deliverance rules which put the submenu to these locations,
> dependend on the number of submenu-items (less then 4: next to title. 4
> or more: right side).

I suggest to use the vertical navigation box in all sections for different
reasons:
* The inline navigation breaks if content editors set longer titles.
* It doesn't work as good as the vertical navigation with bigger font
  sizes.
* Different kinds of navigation in different section make it
  harder for a visitor to navigate. When they switch to a section with
  the other kind of navigation the navigation isn't where they expect it
  to be, they have to search for it.
* The inline navigation is harder to identify as a navigation.
* It's much more simple for the theme implementation (the navigation in
  plone is already a box in the right column so we can have more general
  rules to put this content into the theme templates)

Markup/Css
----------

We should modify the markup and the styles to have a simple way to
switch the 2-column layout. We should do this anyway cause we should plan
to have other content than the navigation in the sidebar sometimes.
In this turn, we should replace some grid_* and container_* with generic
identifiers that we can use to style them differently in different
situations.

I suggest to use such a template structure:
 <div id="container">
   <div id="content">... (now it's id="content" class="grid_12")
   <div id="sidebar">... (now it's class="grid_3")
 </div>

We switch between the one and two column layout by changing the
container's identifiers to <div id="container" class="two-column">
(and maybe dropping #sidebar from the template) depending on the CMS
output. The result that is delivered to the browser looks like this::

 <!-- one column layout -->
 <div id="container">
   <div id="content">...
 </div>

or::

 <!-- two column layout -->
 <div id="container" class="two-columns">
   <div id="content">...
   <div id="sidebar">...
 </div>

In the css, we add our selectors to the definitions of container_12,
grid_12, grid_9 and grid_3 (approximately, don't know the details of
960gs):

 #container (same as container_12)
 #container #content (same as grid_12)
 #container.two-columns #content (same as grid_9)
 #container.two-columns #sidebar (same as grid_3)

This way we can have simple rules to switch between layouts (presents of a
portlet in the right column in plone or something like that).

..Carsten

ps: display: table-*  isn't supported by IE 7.