cocoon-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Paolo Ambrosio <>
Subject Re: Searching for a cool portal layout
Date Wed, 23 Nov 2005 15:06:14 GMT
Well, after many days of work, this is what I can offer to cocoon
portal. Attached you can find a new skin [1], very similar
to "common" style but with div/css layout instead of tables. This is
because I concentated on coding instead of graphic design and because
I'd like to have the same style rendered using both tables and divs.
Indeed, some time ago I posted on bugzilla a DELI Aspect Renderer [2]
to develop a portal skin that could recognize browser capabilities
and render the portal using the table or the css layout as needed.
But in this skin that renderer is not used, so I just said it to let
you know why I used the old portal style.

I structured my xsl files in a modular way to be easily used by
other skins. I think the xslt code is quite self explanatory. The
only "strange" thing is in the icons.xsl file. I found the original
window.xsl quite confusing and difficult to maintain and modify:
all icons are put in the window transformation template. So if
someone wants to modify the icons layout, he should replicate his
style through all icons. And what happens when a new one is added?
With my stylesheets to add a new icon the only thing to do is
add an entry to the generate-icon-set template. If someone wants
to change the icon style, he should just change the draw-icon

Just to test my ideas about code reuse in skins, I made a modified
version of Helma's layout to demonstrate how it could be done.
Most files simply import my sheet without modifications. This is
attached to the email as well [3].

To install just unpack the archives in portal-samples/skin/
and make an entry on portal-sample/conf/cocoon-portal-sample.xconf
Of couse, you have to select one of those skins in

I have some ideas for cocoon portal, but first I'll wait your
comments on this before :-)


[1] myskin.tgz
[3] mymodern.tgz

Some additional info...

Tested on linux with:
* Internet Explorer 6 SP1 (using wine)
* Firefox 1.0.7
* Opera 8.5
* Konqueror 3.4.3

Known problems (some present in modern skin too):
* When content overflows the coplet width, there are problems with
  all browser but Opera (I started loving it! :-D). For example:
    + In Weblogs tab (wrong "CZ's Weblog" coplet shows it)
    + In the tab Basket/Input
    + In the News tab when the browser window is about 800px wide
  This could be fixed using
  .coplet, .coplet-borderless {
    float: left;
  .coplet-content {
    left: 0;
    right: 0;
    clear: both;
  But then linktab would stop working (coplet-content would be put
  after the linktab menu)
* Coplet footer gets scrumbled by the minimize button in IE, and don't
  de-minimize when pressed again in Konqueror
* Some units shuld be expressed not in pt or px to allow magnification
  (try expanding/shrinking text size in IE)

To do:
* Some margins and paddings are not necessary
* Coplet icons must be after the colpet title for accessibility
  reasons (title must be read before). Maybe a separate div for top
  right corner and icons
* Add a parameter passed to the portal page stylesheet to render the
  login form in the title row (put it in a xsl named template, as the
  other portal elements)
* Separate graphical style (windows decorations, ecc.ecc.) from
  layout (positioning) information in css sheets to make easier
  changing only one part (for instance the graphic part)
* Implement portal tools skin (function.xsl)
* Test it with very complex layouts as tabs in columns in linktab...
* Unify table and div rendering
* Modify coplet content output (no tables, css usage, ...)

Files Updated/Added in myskin/ (compared to common/):
A css/column.css
A css/coplet.css
A css/linktab.css
U css/page.css
A css/row.css
A css/tab.css
A styles/basic-window.xsl
U styles/borderless-window.xsl
  styles/column.xsl (ok)
  styles/forms-styling.xsl (untouched)
A styles/icons.xsl
U styles/linktab.xsl
  styles/login-html.xsl (untouched)
U styles/portal-page.xsl (slight modifications)
  styles/row.xsl (ok)
U styles/tab.xsl
U styles/window.xsl

Files Updated/Added in mymodern/ (compared to modern/):
A styles/basic-window.xsl
U styles/borderless-window.xsl
U styles/column.xsl
U styles/forms-styling.xsl
  styles/linktab.xsl (untouched since it uses still the TABLE layout)
U styles/login-html.xsl
U styles/row.xsl
U styles/tab.xsl
U styles/window.xsl

View raw message