Integrating and theming WordPress with your CMS site using XDV

Posted on March 28, 2010 by Mikko Ohtamaa
Filed Under Wordpress, apache, cms, css, plone, python, technology, web development, xdv, zope
Tags: apache, cms, css, deliverance, drupal, integration, joomla, locationmatch, nginx, php, plone, proxy, python, theming, virtualhost, Wordpress, xdv, xml, xsl, xslt

Introduction

XDV is an external HTML theming engine, a.k.a. theming proxy, which allows you to mix and match HTML and CSS from internal and external sites by using simple XML rules. It separates the theme development from the site development, so that people with little HTML and CSS knowledge can create themes without need to know underlying Python, PHP or whatever. It also enables integration of different services and sites to one, unified, user experience. For example, XDV is used by plone.org <http://plone.org> to integrate Plone CMS and Trac issue tracker. XDV compiles theming rules to XSL templates, which has been a standard XML based templates language since 1999. XSL has good support in every programming language and web server out there. Example backends to perform XSL transformation include

Python and lxml library
Apache’s mod_transform
nginx web server
All XSL capable Java and .NET software out there

XDV theming can be used together with Plone where enhanced support is provided by collective.xdv package package. Technically, collective.xdv adds Plone settings panel and does XSL transformation in Zope’s post-publication hook using lxml library. XDV can be used standalone with XDV package to theme any web site, let it be WordPress, Joomla, Drupal or custom in-house PHP solution from year 2000. XDV is based on Deliverance specification The difference between XDV and Deliverance reference implementation is that XDV internally compiles themes to XSL templates, when Deliverance relies on processing HTML in Python. Currently XDV approach seems to be working better, as we had many problems trying to apply Deliverance for WordPress site (redirects didn’t work, HTTP posts didn’t work, etc.).

Tutorials

Setting up XDV development tools

XDV tools are deployed as Python eggs. You can use tools like buildout <http://www.buildout.org/> configuration and assembly tool or easy_install to get XDV on your development computer and the server. If you are working with Plone you can integrate XDV to your site existing buildout. If you are not working with Plone, XDV home page has instructions how to deploy XDV command standalone.

XDV Rules

Rules (rules.xml) will tell how to fit content from external source to your theme HTML. It provides straightforward XML based syntax to manipulate HTML easily

Append, replace and drop HTML pieces
Insert HTML snippets
CSS or XPath selectors can be used to identify HTML parts
It is possible to mix and match content from more than two sites
etc.

Rules XML syntax is documented at XDV homepage. Rules will be compiled to XSL template (theme.xsl) by xdvcompiler command. The actual theming is done by one of the XSL backends listed above, by taking HTML as input and applying XSL transformations on it. Note that currently rules without matching selectors are silently ignored and there is no bullet-proof way to debug what happens inside XSL transformation, except by looking into compiled theme.xsl.

Using XDV to theme and integrate a WordPress site

Below are instructions how to integrate a WordPress site to your CMS. In this example CMS is Plone, but it could be any other system. We will create XDV theme which will theme WordPress site to match our CMS site in the fly.

WordPress theme using built with XDV and using a live Plone web page as a theme template. This way WordPress theme inherits “live data” from Plone site, like top tabs (portal sections), footer, CSS and other stuff which can be changed in-the-fly and reflecting changes to two separaet theming products would be cumbersome. Benefits using WordPress for blogging instead of main CMS

WordPress post and comment management is easy
WordPress does not need to be touched: the old public WordPress instance can keep happily running wherever it is during the whole process
You do not need to migrate legacy WordPress installations to your CMS’s internal blogging tool
WordPress comes with extensive blog spam filtering tools. We get 11000 spam comments a month.
WordPress is designed for blogging and the user interface is good for that
WordPress integrates well with blog pingback support services
WordPress supports Gravatars and other blogging plug-ins
..and so on…

Benefits of using XDV theming instead of creating native WordPress theme are

You need to maintain only one theming add-on product e.g. one for your main CMS and WordPress receives updates to this site and theme automatically
WordPress does not need to be touched
You can host your WordPress on a different server, even wordpress.com, and still integrate it to your main CMS
The theme can be recycled not only for WordPress, but also other external services: Bugzilla, Trac, Webmail, phpBB, you-name-it
Even though WordPress has slick UI, it is a well known fact that it is a can of worms internally. My developers do not like the idea of PHP development and would spit on my face if I ask them to go a develop a WordPress theme for us

Theme elements

The theme will consist of following pieces

Deliverance rules XML file which defines how to combine Plone and WordPress HTML (rules.xml)
Additional CSS definitions active only for WordPress (wordpress.css). Dependency to this CSS in injected to the <head> by rules XML
Special Plone page template which will provide slots where WordPress can drop in the content (wordpress_listing.pt)
A helper script which makes it easy for repeatable perform theming actions, like recompiling the theme (xdv.py)

CMS page template

This explains how to create a Plone page template where WordPress content will be dropped in. This step is not necessary, as we could do this without touching the Plone. However, it makes things more straightforward and explicit when we known that WordPress theme uses a certain template and we explicitly define slots for WordPress content there. Example:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      lang="en"
      metal:use-macro="here/main_template/macros/master"
      i18n:domain="plone">

<body>

    <div metal:fill-slot="content">

        <div id="wordpress-content">
                <!-- Your WordPress "left column" will go there -->
        </div>

    </div>

</body>
</html>

Theming rules

Following are XDV rules (rules.xml) how we will fit WordPress site to Plone frame. It will integrate

Content from WordPress
Metadata from WordPress
CSS from Plone
Page basic structrure from Plone

rules.xml:

<?xml version="1.0" encoding="UTF-8"?>
<rules xmlns="http://namespaces.plone.org/xdv"
       xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
       xmlns:css="http://namespaces.plone.org/xdv+css">

    <!-- Remove WordPress CSS by filtering out <style> tags-->
    <drop css:content="style" />

    <!-- Make sure that WordPress metadata is present in <head> section -->
    <append css:content="head link" css:theme="head" />

    <!-- note: replace does not seem to handle multiple meta tags very well -->
    <drop css:theme="meta" />
    <append css:content="head meta" css:theme="head" />

    <!-- Use blog title instead of Plone page title -->
    <replace css:content="title" css:theme="title" />

    <!-- Put WordPress sidebar to Plone's portlets section -->
    <append css:content="#r_sidebar" css:theme="#portal-column-one .visualPadding" />

    <!-- Place wordpress content into our theme content area -->
    <copy css:content="#contentleft" css:theme="#wordpress-content" />

    <!-- This mixes in WordPress specific CSS sheet which is applied for pages
         served from WordPress only and does not concern Plone CMS.
         This stylesheet will theme WordPress specific tags,
         like blog posts and comment fields.
         We keep this file in Plone, but this could be served from elsewhere. -->
    <append css:theme="head">
        <style type="text/css">
           @import url(http://mfabrik.com/++resource++plonetheme.mfabrik/wordpress.css);
        </style>
    </append>

    <!-- This stylesheet is used by special spam protection plug-in NoSpamNX -->
    <append css:theme="head">
        <link rel="stylesheet" href="http://blog.mfabrik.com/wp-content/plugins/nospamnx/nospamnx.css" type="text/css" />
    </append>

    <!-- Remove Google Analytics script used for CMS site -->
    <drop css:theme="#page-bottom script" />

    <!-- Rebuild our Google Analytics code, using a different tracker id this time
         which is a specific to our blog.
      -->
    <append css:theme="#page-bottom">

        <script type="text/javascript">
                var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>

        <script type="text/javascript">
                try {
                       var pageTracker = _gat._getTracker("UA-8819100-2");
                       pageTracker._trackPageview();
                } catch(err) {
                }
        </script>
    </append>

</rules>

WordPress specific CSS

This CSS has styles which are applied only to WordPress pages. They are mainly corner case fixes where WordPress and CMS styles must match. The CSS file is loaded when rules.xml injects it to <head> section. wordpress.css:

/* Font and block style fixes */

#wordpress-content h1 {
        border: 0;
}

#wordpress-content .post-end {
        margin-bottom: 60px;
}

#wordpress-content pre {
        width: 600px;
        overflow: auto;
        background: white;
        border: 1px solid #888;
}

#wordpress-content ul {
        margin-left: 20px;
}

#wordpress-content .post-info-date,
#wordpress-content .post-info-categories,
#wordpress-content .post-info-tags {
        font-size: 80%;
        color: #888;
}

/* Make sure that posts and comments look sane in our theme */

#wordpress-content .post {
        margin-top: 15px;
}

#wordpress-content .commentlist li {
        margin: 20px;
        background: white;
        padding: 10px;
}

#wordpress-content .commentlist li img {
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
}

#wordpress-content #commentform {
        margin: 20px;
}

#wordpress-content {
        margin-left: 20px;
        margin-right: 20px;
}

/* Make WordPress "sidebaar" look like Plone "portlets */

.template-wordpress_listing #portal-column-one ul {
        list-style: none;
        margin-bottom: 40px;
}

.template-wordpress_listing #portal-column-one ul#Recent li {
        margin-bottom: 8px;
}

.template-wordpress_listing #portal-column-one ul#Categories a {
        line-height: 120%;
}

.template-wordpress_listing #portal-column-one h2 {
        background: transparent;
        border: 0;
        font-weight:normal;
        line-height:1.6em;
        padding:0;
        text-transform:none;
        font-size: 16px;
        color: #9b9b9b;
        border-bottom:4px solid #CDCDCD;
}

Helper script

The following Python script (xdv.py) makes it easy for us

Recompile the theme
Test the theme applied on the site
Preview the theme in our browser

It is basically wrapped with default file locations around: bin/xdvcompiler and bin/xdvrun commands with some webbrowser opening magic.

xdv.py:

"""

 This command line Python script compiles your rules.xml to XDV XSL

 Modify it for your own needs.

 It assumes your buildout.cfg has xdv section and generated XDV
 commands under bin/

 To compile, execute in the buildout folder::

     python src/plonetheme.mfabrik/xdv.py

 To build test HTML::

     python src/plonetheme.mfabrik/xdv.py --test

 To build test HTML and preview it in browser, execute in buildout folder::

     python src/plonetheme.mfabrik/xdv.py --preview

"""

import getopt, sys
import os
import webbrowser

# rules XML for theming
RULES_XML = "src/plonetheme.mfabrik/deliverance/etc/rules.xml"

# Which XSL file to generate for compiled XDV
OUTPUT_FILE = "theme.xsl"

# Which file to generate applied theme test runs
TEST_HTML_FILE = "test.html"

# Our "theme.html" is a remote template served for each request.
# Because we are doing live integrattion, this is a HTTP resource,
# not a local file.
THEME="http://mfabrik.com/news/wordpress_listing/"

#
# External site you are theming.
# Note: must have ending slash (lxm cannot handle redirects)
#
SITE="http://blog.twinapex.fi/"

try:
    opts, args = getopt.getopt(sys.argv[1:], "pt", ["preview", "test"])
except getopt.GetoptError, err:
    # print help information and exit:
    print str(err) # will print something like "option -a not recognized"

# Convert options to simple list
opts = [ opt for opt, value in opts ]

print "Compiling transformation"
value = os.system("bin/xdvcompiler -o " + OUTPUT_FILE + " " + RULES_XML +" " + THEME)
if value != 0:
    print "Compilation failed"
    sys.exit(1)

if "-p" in opts or "--preview" in opts or "-t" in opts or "--test" in opts:
      print "Generating test HTML page"
      value = os.system("bin/xdvrun -o " + TEST_HTML_FILE + " " + OUTPUT_FILE + " " + SITE)
      if value != 0:
          print "Page transformation failed"
          sys.exit(1)

if "-p" in opts or "--preview" in opts:
    # Preview the result in a browser
    # NOTE: OSX needs Python >= 2.5 to make this work

    # Make sure test run succeeded
    url = "file://" + os.path.abspath(TEST_HTML_FILE)
    print "Opening:" + url

    # We prefer Firefox for preview for its superious
    # Firebug HTML debugger and XPath rule generator
    try:
        browser = webbrowser.get("firefox")
    except webbrowser.Error:
        # No FF on the system, or OSX which can't find its browsers
        browser = webbrowser.get()

    browser.open_new_tab(url)

Compiling the theme

This will generate XSL templates to do theming transform. It will compile rules XML with some boilerplate XSL. Running our compile script:

python src/plonetheme.mfabrik/xdv.py

Since Plone usually does not use any relative paths or relative resources in HTML, we do not give the parameter “Absolute prefix” to the compilation stage. In Plone, everything is mapped through a virtual hosting aware resource locator: portal_url and VirtualHostMonster. For more information see

http://pypi.python.org/pypi/xdv/0.3a2#compilation

Testing the theme

The following command will apply theme for an example external page:

bin/xdvrun -o theme.html theme.xsl http://blog.twinapex.fi
firefox theme.xhtml

… or we can use shortcut provided by our script …

python src/plonetheme.mfabrik/xdv.py --preview

Applying the theme in Apache production environment

These steps tell how to apply the integration theme for WordPress when WordPress is running under Apache virtualhost.

Installing dependencies

We use Apache and mod_transform. Instructions how to set up modules for Apache are available on XDV homepage. Some hand-build modules must be used, but instructions to set them up for Ubuntu / Debian are available. Apache 2 supports filter chains which allow you to perform magic on HTTP response before sending it out. This corresponds Python’s WSGI middleware. We’ll use special built of mod_transform and mod_depends which are known to working. These modules were forked from their orignal creations to make them XDV compatible, as the orignal has not been updated since 2004 (here you can nicely see how open source guarantees “won’t run out of support” freedom).

Example:

sudo -i
apt-get install libxslt1-dev libapache2-mod-apreq2 libapreq2-dev apache2-threaded-dev
wget http://html-xslt.googlecode.com/files/mod-transform-html-xslt.tgz
wget http://html-xslt.googlecode.com/files/mod-depends-html-xslt.tgz
tar -xzf mod-transform-html-xslt.tgz
tar -xzf mod-depends-html-xslt.tgz
cd mod-depends-html-xslt ; ./configure ; make ; make install ; cd ..
cd mod-transform-html-xslt ; ./configure ; make ; make install ; cd ..

Enable built-in Apache modules:

a2enmod filter
a2enmod ext_filter

For modules depends and transform you need to manually add them to the end of Apache configuration, as they do not provide a2enmod stubs for Debian. Edit /etc/apache2/apache.conf:

LoadModule depends_module /usr/lib/apache2/modules/mod_depends.so
LoadModule transform_module /usr/lib/apache2/modules/mod_transform.so

You need to hard reset Apache to make the new modules effective:

/etc/init.d/apache2 force-reload

Virtual host configuration

Below is our virtualhost configuration which runs WordPress and PHP. Transformation filter chain has been added in. /etc/apache/sites-enabled/blog.mfabrik.com:

<VirtualHost *>

    ServerName blog.mfabrik.com
    ServerAdmin info@mfabrik.com

    LogFormat       combined
    TransferLog     /var/log/apache2/blog.mfabrik.com.log

    # Basic WordPress setup

    Options +Indexes FollowSymLinks +ExecCGI

    DocumentRoot /srv/www/wordpress

    <Directory /srv/www/wordpress>
        Options FollowSymlinks
        AllowOverride All
    </Directory>

    AddType application/x-httpd-php .php .php3 .php4 .php5
    AddType application/x-httpd-php-source .phps

    # Theming set-up

    # This chain is used for public web pages
    FilterDeclare THEME
    FilterProvider THEME XSLT resp=Content-Type $text/html

    TransformOptions +ApacheFS +HTML
    # This is the location of compiled XSL theme transform
    TransformSet /theme.xsl

    # This will make Apache not to reload transformation every time
    # it is performed. Instead, a compiled version is hold in the
    # virtual URL declared above.
    TransformCache /theme.xsl /srv/plone/twinapex.fi/theme.xsl

    # We want to apply theme only for
    # 1. public pages (otherwise WordPress administrative interface stops working)
    <Location "/">
        FilterChain THEME
    </Location>

    # 2. Admin interface and feeds should not receive any kind of theming
    <LocationMatch "(wp-login|wp-admin|wp-includes)">
        # The following resets the filter chain
        # http://httpd.apache.org/docs/2.2/mod/mod_filter.html#filterchain
        FilterChain !
    </LocationMatch>

</VirtualHost>

Running it

After Apache has all modules enabled and your virtualhost configuration is ok, you should see WordPress through your new theme by visiting at the site served through Apache:

http://blog.mfabrik.com

Automatically reflecting CMS changes back to XDV theme

The theme should be recompiled every time

Plone is restarted: CSS references change in <head> as CSS cache is rebuilt
CSS is modified: CSS references change in <head> as CSS cache is rebuilt
Plone content is changed and changes reflect back to WordPress theme (e.g. a new top level site section is being added)

This is because the compilation will hard-link resources and template snippets to resulting the theme.xsl file. If hard-linked resources change on the Plone site, the transformation XSL file does not automatically reflect back the changes. It could be possible to use Plone events automatically to rerun theme compilation when concerned resources change. However, the would be quite complex. For now, we are satisfied with a scheduled task which will recompile the theme now and then. Alternatively, mod_transforms could be run in non-cached mode with some performance implications. Here is a shell script, update-wordpress-theme.sh, which will perform the recompilation and make Apache’s transformation cache aware of changes:

#!/bin/sh
#
# Periodically update WordPress theme to reflect changes on CMS site
#

# Recompile theme
sudo -H -u twinapex /bin/sh -c cd /srv/plone/twinapex.fi ; python src/plonetheme.mfabrik/xdv.py

# Make Apache aware of theme changes
sudo apache2ctl graceful

Then we call it periodically in cron job, every 15 minutes in /etc/cron.d/update-wordpress:

# Make WordPress XDV theme to reflect changes on CMS
0,15,30,45 * * * * /srv/plone/twinapex.fi/update-wordpress-theme.sh

Updating WordPress settings

No changes on WordPress needed if the domain name is not changed in the theme transformation process.

Site URL

Unlike Plone, WordPress does not have decent virtual hosting machinery. It knowns only one URL which is uses to refer to the site in the external context (e.g. RSS feeds). This setting can be overridden in

WordPress administrative interface
wp-config.php

Here is an example how we override this in our wp-config.php:

// http://codex.wordpress.org/Editing_wp-config.php#WordPress_address_.28URL.29
define('WP_HOME','http://blog.mfabrik.com');
define('WP_SITEURL','http://blog.mfabrik.com');

HTTP 404 Not Found special case

Http 404 Not Found responses are not themed by Apache filter chain. This is not possible due to order of pipeline in Apache. As a workaround you can set up a custom HTTP 404 page in WordPress which does not expose the old theme.

Go to WordPress admin interface, Theme editor

Edit 404.php and modify it so that it does not pull in the WordPress theme:

<html>
<head>
<title>Not found</title>
</head>
<body>

        <h1>Not Found, Error 404</h1>
        <p>Aaaaw, snap! The page you are looking for no longer exists. It must be our hamster who ate it.</p>

        <a href="<?php bloginfo('url'); ?>">Go to blog homepage</a>

        <a href="http://mfabrik.com">mFabrik business site</a>
</body>
</html>

For more information see

http://codex.wordpress.org/Creating_an_Error_404_Page

Roll-out checklist

Below is a checklist you need to go to through to confirm that the theme integration works on your production site

WordPress public pages are loaded with the new theme
WordPress login works
WordPress administrative interface works
RSS feed from WordPress works and contain correct URLs
HTTP 404 not found is handled correctly
HTTP 302 redirect is handled correctly (i.e. missing / at the end of blog post URL)
Changes on CMS site are reflected to WordPress theme within the update delay
Old blog site is redirected to new site using HTTP 301 (if applies)

Setting table column widths non-intrusively using CSS and JQuery

Posted on July 8, 2009 by Mikko Ohtamaa
Filed Under plone, technology
Tags: cell, column, css, jquery, table, width

Below is a Javascript snipped which will mark each table cell with a CSS class containing the column number. This allows you to set the table column widths using just one CSS rule and without hand editing the table HTML code. This is to workaround the lack of nth-child pseudoclass CSS selector in IE6, IE7 and IE8 – there is no direct Internet Explorer compatible way to set table column widths from CSS.

This was originally created to workaround the limitation of Kupu : one couldn’t set table column widths from WYSIWYG editor. Instead, the content editor has predefined table classes and column width sets.

The code is also available in the snipplr.

/*  Add column index pseudoclasses to table cells.

    A JQuery snippet to be executed after DOM model has been loaded.

    Each table cell will be marked with a CSS class containing the cell's column number.
    This is to workaround the lack of nth-child pseudoclass CSS selector support in
    IE6, IE7 and IE8.

    Read this sad fact sheet:

http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

    This way we can style table columns without explicitly settings classes
    for each cell in WYSIWYG editor.

    <table>
        <tbody>
            <tr>
                <td>
                </td>
                <td>
                </td>
            </tr>
        </tbody>
    </table>

    will become

    <table>
        <tbody>
            <tr>
                <td class="column-1">
                </td>
                <td class="column-2">
                </td>
            </tr>
        </tbody>
    </table>

    Both <tbody><td> and <thead><th> elements will be fixed.

    Use the following CSS to style tables:

    table.course-schedule-table .column-1 {
        width: auto;
    }

    table.course-schedule-table .column-2 {
        width: 150px;
    }

    table.course-schedule-table .column-3 {
        width: 150px;
    }

    @author Mikko Ohtamaa

    @license 3-clause BSD

http://www.twinapex.com

*/

function createTableColumnPseudoClasses() {

    jq("tr").each( function()  {
        var counter = 1;
        jq(this).children("td,th").each( function()  {
            jq(this).addClass("column-" + counter);
            counter++;
        });
    });
}

// Run code on document load
jq(createTableColumnPseudoClasses);

Designing a high usability Plone theme

Posted on September 12, 2008 by Mikko Ohtamaa
Filed Under Plone (old)
Tags: css, design, fluid, html, icon, icons, layout, link, links, look, multilingual, Plone (old), site, skin, theme, theming, usability

This is my brain dump of instructions for artists how to design good Plone themes. I hope I can receive some comments, some feedback from the artists itself and then publish this as a plone.org tutorial.

Often external artist is used to design a site theme. Artists might or might not have seen Plone, artists might or might not have any basic usability know how. This article should explain the elements which “must be there” to make a match between the theme and Plone easily.

The basic layout

This document describes the elements of multilingual high usability Plone theme. It is based on fluid div layout, meaning that the content stays very readable on small screens or when CSS is not loaded (screen readers). See the example layout.

The layout must not break down when user is using non-default font size. E.g. all element accept two rows text, even if the default case is usually one row.

Plone layout

Here we are designing a “normal” site theme where Plone is used to publish textual content for external readers. This might not always be the case – for example if Plone is used as a professional tool one might want to use all available screen space to display as much as possible action shortcuts to make the tool to quick to use. The latter is actual case I have seen in medical applications.

Plone layout is formed by seven main parts.

Left body padding (auto width)

Header (780 – 1280 pixels)

Left portlets

Content (780 – 1000 pixels)

Right portlets

Footer (780 – 1280 pixels)

Right body padding (auto width)

The layout must be designed so that

The maximum width of content area newer exceeds a certain amount (1200px) so that characters-per-line count stays readable on wide screen displays. Left body padding and right body padding fill the wide screen gap to keep the content in sane max-width.
Left portlets and right portlets parts can be missing, giving space to content part
Header and footer are resizable. Usually logo is at the left site of the header and actions at the right side of the header. These sections should not overlap with the width of 780 px.
Left body padding and right body padding can have shadow effect on the central column a la blogger.

Alternative layout cases

The layout must be formed from such a blocks that left or right portlets can be easily dropped without breaking the layout.

Right portlets missing:

Header

Left portlets

Content

Footer

Both portlets missing (front page view):

Header

Content

Footer

Header elements

The header should have the following elements

Logo
Language selector – either a drop down list, flag icons or language names
Site action links with icons: site map, accessibility help, toggle easy read (make fonts larger), contact
Search box
Section (main level) navigation tabs
Personal bar. Contains the username and log out buttons. Only available when logged in. To see an example, create plone.org account and login to ploen.org.

The header must scale between 780 – 1280 px. Section navigation tabs may trigger drop down menus, see http://www.jyu.fi/

Content area elements

The content area contains

Content title
Content description: one paragraph, no HTML formatting
Breadcrumbs path bar displaying the position in the navigation hierarchy. Example.
Content actions: send to, print, RSS feed. Icons with or without text labels. New Plone versions place these at the bottom, but they used to be at the top.
Document byline: creator name w/link, creation date or edit date. This is usually only available for logged in members.
Notification messages: When user performs actions (e.g. save) this feedback box is rendered with white i(nfo) letter in blue circle having a message like “Save succeeded.”
The main body text and images

The whole portlet section can be dropped, making space for the content.

Portlets

Portlets are boxes on the left and right side of the content containing section specific actions.

Example portlets:

Navigation
Search (not the header search)
News
Recently changed

The portlet consists of

Title (usually link)
Content area
Optional More link, located at the right bottom corner.

See http://www.siggraph.org/ for creative use of portlets.

Footer elements

The footer has

Copyright clause
Link to about page
Contact information

The footer must scale between 780 – 1280 px.

Complete picture

Left body padding

Texture
Drop shadow

Logo
Search box
Site actions
Language selector

Section tabs

Personal bar

Navigation

Breadcrumbs
Content actions
Notification messages
Title
Description
Text body /images

Calendar
News
Recently added

Copyright
Link to about page
Contact information

Right body padding

Special cases

These are often required and might shoot you into a foot

The current section (main level folder) where the user is located is identified somehow: a changing big topic picture, text. For example, see http://www.archred.com/updates/news and you see that there is big Updates title.
To make more space available for front page or top level content, breadcrumbs and portlets are missing. A special front page animation may be used.See http://www.archred.com
Breadcrumbs is also often disabled for top level elements
There is a special print.css which is loaded when the document is printed. It sets display:none to porlets, header and footer so that only the main content area is printed.
Visual editor (Kupu) text might require special CSS rules to have the same formatting rules as in non-edit mode to get real WYSIWYG.
A special attention must be paid for the style of generic HTML elements like a, h1, h2 and p. They are used on the content area and outside it, often with different colors.

Colors

Plone uses mechanism to have color variables in CSS. See base_properties.prop to get an idea what colors there are and try to guess how they are used.

Icons

Plone uses generic icon mechanism to apply icons to any action available on site. Icons are 16×16, transparent with one pixel transparent border leaving 14×14 pixels for the content.

The icons should preferably be suitable for dark and light backgrounds. This might be hard to achieve, though, so it is suitable to use ligh background icons, since this is the Plone default.

Actions

Search
Smaller font
Larger font
Print
Send to (email)
Contact
Sitemap
Member icon
Settings
Log out
Login
RSS feed

Language flags

Plone default flags can be used

Finnish
English
Swedish
etc.

Content icons

These reflect different Plone content types

Page
Folder
News
Event
Collection
File

Link icons

Plone uses Javascript to apply special icons for external links

HTTP link (globe)
HTTPS link (lock)
mailto link (letter)

Favorite icon

The site bookmark icon, the one seen in the address bar, uses normal favicon.ico practices

Sections

About

Recently Written

Tags

Monthly Archives