Plone theme development- part 2

Google Summer of Code 2016— Two weeks into coding period.

In my last post Plone theme development- part 1, I gave a brief intro about Plone and Plone themes. In this post, we’ll dive deeper into Plone theme development by developing a theme which also happens to be my GSoC project.

We’ll be using Clean Blog theme but you can use any other theme or you can design from scratch, Using a static theme will help us focus on the rules part and not on the styling of theme.

Prerequisites

  1. Python
  2. pip
  3. virtualenv(+1 for virtualenvwrapper)

Install these if you don’t have them already. [Google is your friend]

Development setup

First, Let’s create a virtualenv to keep our setup separate. We will use it every time we want to create a new theme. Run the following command in your terminal/command prompt.

#virtualenv users:
$ virtualenv mrbob
#virtualenvwrapper users:
$ mkvirtualenv mrbob

Enable virtualenv

#virtualenv users:
$ source mrbob/bin/activate
#virtualenvwrapper users:
$ workon mrbob

Let’s create a Plone 5 theme skeleton using mr.bob’s templates for Plone.

First we need to install mr.bob and the required bobtemplates

$ pip install mr.bob
$ pip install bobtemplates.plone

Now, create a Plone theme skeleton using mr.bob

#Here THEMENAME is the name of your theme, we'll use 'clean-blog' for this tutorial.
$ mrbob -O plonetheme.THEMENAME bobtemplates:plone_addon

On pressing enter it will ask some questions, Answer the first one with Theme

--> What kind of package would you like to create? Choose between 'Basic', 'Dexterity', and 'Theme'. [Basic]: Theme

and the last one with 5.0

--> Plone version [4.3.6]: 5.0

rest are up to you.

Now you should have a folder named plonetheme.clean-blog in your current folder. This is your Python package.

Run the following commands to bootstrap and buildout our development environment

$ python bootstrap-buildout.py
#after successful execution of above command run
$ ./bin/buildout

buildout command will take some time as it will be installing all the necessary packages for our development our environment. Once it’s done, Our package is ready. Go ahead and test it on browser

$ ./bin/instance fg

This will run the Plone instance on http://localhost:8080/ on the welcome page it will ask you to add a site. Add clean-blog. Go to http://localhost:8080/clean-blog and you should see default Plone page with barceloneta theme enabled by default.

Welcome to Plone — Site

You can disable the current theme or change it from http://localhost:8080/spot/@@theming-controlpanel

The files regarding to our theme i.e. the theme package is located in the src folder. In src/plonetheme/tango/theme you can see contents of a Diazo theme; index.html, rules.xml and some other files which we will discuss later.

Download the Clean Blog theme and copy its contents in src/plonetheme/tango/theme folder. remove all the html files except the index.html. Or, you can fork/clone https://github.com/vikas-parashar/plonetheme.clean_blog/

Edit your index.html so it looks like following:

and rules.xml

Copy the less files from repo for styling or the CSS, if less is not your thing for styling. After doing all the above visit http://localhost:8080/clean-blog and reload it. Nothing changed? because we haven’t activated our theme yet. Go ahead and do that (http://localhost:8080/spot/@@theming-controlpanel)

If you did everything accordingly you should see the welcome page styled according to theme with nice header and big title. Check other pages also, you will find that control panel isn’t styled according to our theme but that’s not a problem. It’s intentional.

Welcome page
Form fields

In the next post we’ll go into details and write some rules ourselves. Till then go checkout the following links for better understanding of Plone theming:

  • Mastering Plone! : Best reference material if you’re new to Plone. All setup instruction are taken from this guide so if you wanna learn in detail, follow this guide.
  • Diazo : As I’ve mentioned earlier read the documentation before we go deep in writing rules.
  • XPath : If you’ve read the above two you know how important XPath is, so it would be better if you learn this too.

That’s it for today.