Changing Plone theme/skin on portal_type: Part II

In the beginning of August 2009, Roel and me started working on a new assignment: Making a site for a volunteers oganisation called Humanitas.

Humanitas

The Humanitas Association stands for a society in which people feel active and responsible for themselves, but also take responsibility for living together. The association lends the less fortunate a helping hand, so they can move on on their own. Humanitas supports about 35.000 people in over 500 projects with over 10.000 volunteers.

Organisation structure

The structure of the organisation is leveled in four levels, from top to bottom:

• Headquarters
• Districts
• Department
• Local Project

We had to make the site for the department of Eindhoven and all there local projects. They wanted to use all the information from there projects in the department ( and later in their district ).

Plone layout:

Humanitas-nl
    ->
    District South
      -> Department Eindhoven
          -> Project Home-Start
          -> Project Doorstart
          -> Project X..
      -> Department X
          -> Project X

Everything is in the same Plone site so we can use all content in all levels. Creating collections and getting all the news in the District site will show all news items form Departments and Projects, etc.

Webmaster powers

The webmaster has the power to create new Project sites, giving them different colors and logos images so they all look slightly different, but feel the same. There is no need for him to get any help for us to create new (project) sites. We are currently expanding this to the district level, so the webmaster can create new departments, from where on he can create more local projects.

Multiple projects/departments using same layout but different look.

All the projects and departments have the same layout, so we built a normal plone theme. We created a custom content-type for the projects including 3 color fields using: Products.SmartColorWidget

The edit screen for a project and changing the colors for every project:

http://maatjescontact.humanitaseindhoven.nl/

http://home-start.humanitaseindhoven.nl/

The py file for calling the projects.css file:

def __call__(self, *args, **kw):
 """Return a dtml file when calling the view (more easy thx to Gillux)"""
 Project_props = self.getProjectCssProperties()
 csscontent = template(context,
     project_properties = Project_props,
     portal_url = self.getPortalUrl(),
 )
 return  CSSPacker('safe').pack(csscontent)

def getPloneCssProperties(self) :
 context = aq_inner(self.context)
 dict_properties = {}
 bp = context.base_properties
 bpdict = bp.propdict()
 for k,v in bpdict.items() :
   if bp.hasProperty(k):
     dict_properties[k] = bp.getProperty(k)

 return dict_properties

Part of the project.css DTML file

/* <dtml-with project_properties mapping> */

/* colors */
<dtml-if hoofdnavigatieachtergrondkleur>
 .documentFirstHeading {
 color: &dtml-hoofdnavigatieachtergrondkleur;;
 }
 .projecttitle {
 color: &dtml-hoofdnavigatieachtergrondkleur;;
 }
<dtml-else>
 .documentFirstHeading {
 color: #fff;
 }
</dtml-if>

/* </dtml-with> */

Also see part 1 for some more information.

Results

The department website is live and currently has 10 projects, all having a different color schema. You can see it for yourself at: www.humanitaseindhoven.nl

The department Eindhoven is showing all the projects and news from there own department and projects below.

I gave a litte live demo on the Dutch Plone User day and the Plone Conference 2009 where I named it skin switcher.