2016/08/12

Plone5 Theme Customization

Plone5 is released for quite a long time, but recently I finally get a chance to work with its default Barceloneta Theme. For Plone5 new comers, be sure to read first the article "Customize Plone 5 Default Theme On the Fly". One small thing about the Barceloneta theme, from the Front Page text, there's a big welcome string, named hero text, later turned into @@hero view in Plone 5.0.3. So you can reference the following code to highlight some text:

<div class="hero">
<h1>Welcome!</h1>
<p><a class="context" href="http://plone.com" target="_blank">Link</a></p>
</div>

Separated text, say in the end paragraph, with the hero class will display in the same box.

Barceloneta uses LESS as a pre-processor to generate the final CSS files. In addition, its LESS/CSS is not registered on the registry, so you need to compile it with gruntfile.

Then, if you want to develop your custom theme in the filesystem, take a look at plonetheme.persona. Persona Theme is good for blog-style site, not suitable for portal, anyway it is a good start to learn about customization based on Barceloneta. Here is the development buildout log:

$ bin/buildout -c develop.cfg
mr.developer: Queued 'plonetheme.persona' for checkout.
mr.developer: Filesystem package 'plonetheme.persona' doesn't need a checkout.
Develop: '/home/marr/plone505/zinstance/src/plonetheme.persona'
Uninstalling zopepy.
Uninstalling instance.
Installing _mr.developer.
Generated script '/home/marr/plone505/zinstance/bin/develop'.
Installing instance.
Getting distribution for 'mockup-highlightjs'.
Got mockup-highlightjs 1.0.0a2.
Getting distribution for 'plone.app.themingplugins'.
Got plone.app.themingplugins 1.0.
Getting distribution for 'z3c.jbot'.
Got z3c.jbot 0.7.2.
Generated script '/home/marr/plone505/zinstance/bin/instance'.
Generated interpreter '/home/marr/plone505/zinstance/parts/instance/bin/interpreter'.
Generated script '/home/marr/plone505/zinstance/bin/pilprint.py'.
Generated script '/home/marr/plone505/zinstance/bin/pilconvert.py'.
Generated script '/home/marr/plone505/zinstance/bin/enhancer.py'.
Generated script '/home/marr/plone505/zinstance/bin/thresholder.py'.
Generated script '/home/marr/plone505/zinstance/bin/viewer.py'.
Generated script '/home/marr/plone505/zinstance/bin/explode.py'.
Generated script '/home/marr/plone505/zinstance/bin/player.py'.
Generated script '/home/marr/plone505/zinstance/bin/pildriver.py'.
Generated script '/home/marr/plone505/zinstance/bin/pilfile.py'.
Generated script '/home/marr/plone505/zinstance/bin/painter.py'.
Generated script '/home/marr/plone505/zinstance/bin/createfontdatachunk.py'.
Generated script '/home/marr/plone505/zinstance/bin/gifmaker.py'.
Generated script '/home/marr/plone505/zinstance/bin/pilfont.py'.
Updating repozo.
Updating backup.
Installing zopepy.
Generated interpreter '/home/marr/plone505/zinstance/bin/zopepy'.
Updating unifiedinstaller.
Installing test.
Generated script '/home/marr/plone505/zinstance/bin/test'.
Installing diazotools.
Generated script '/home/marr/plone505/zinstance/bin/diazocompiler'.
Generated script '/home/marr/plone505/zinstance/bin/diazorun'.
Generated script '/home/marr/plone505/zinstance/bin/diazopreprocessor'.
Installing checkdocs.
Installing mrbob.
Getting distribution for 'MarkupSafe==0.23'.
Got MarkupSafe 0.23.
Generated script '/home/marr/plone505/zinstance/bin/mrbob'.
Installing releaser.
Generated script '/home/marr/plone505/zinstance/bin/fullrelease'.
Generated script '/home/marr/plone505/zinstance/bin/postrelease'.
Generated script '/home/marr/plone505/zinstance/bin/lasttagdiff'.
Generated script '/home/marr/plone505/zinstance/bin/addchangelogentry'.
Generated script '/home/marr/plone505/zinstance/bin/bumpversion'.
Generated script '/home/marr/plone505/zinstance/bin/prerelease'.
Generated script '/home/marr/plone505/zinstance/bin/release'.
Generated script '/home/marr/plone505/zinstance/bin/longtest'.
Generated script '/home/marr/plone505/zinstance/bin/lasttaglog'.
Generated script '/home/marr/plone505/zinstance/bin/pocompile'.
Versions had to be automatically picked.
The following part definition lists the versions picked:
[versions]

# Required by:
# plonetheme.persona==1.0a2.dev0
mockup-highlightjs = 1.0.0a2

# Required by:
# plonetheme.persona==1.0a2.dev0
plone.app.themingplugins = 1.0

# Required by:
# plone.app.themingplugins==1.0
z3c.jbot = 0.7.2

Look into profiles/default/metadata.xml you will see <dependency>profile-plonetheme.barceloneta:registerless</dependency>