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>