The idea of this buildout configuration is to install the latest version of Plone, along with many Plone theme skins, Diazo themes and useful theming tools for layout, custom icons and fonts and third-party theming add-ons.
The Plone theming suite includes these scaffolding tools:
Included in this suite are 6 different Plone theme skins:
- quintagroup.theme.sunrain.
- quintagroup.theme.schools.
- quintagroup.theme.pythonreel.
- plonetheme.aclark_twitter.
- plonetheme.drupal.
- plonetheme.trantor.
Included in this suite are over 50 different Diazo themes:
- chalkboardtheme_plone.
- beyondskins.brasilia.
- beyondskins.phantasmagoria.
- beyondskins.happy.
- beyondskins.colors.
- beyondskins.sports.
- beyondskins.sunflower.
- beyondskins.beyondskins.
- beyondskins.responsive.
- beyondskins.lostkatana.
- beyondskins.minimalist.
- diazotheme.amazium.
- diazotheme.baseline.
- diazotheme.bootstrap.
- vs.bootstrap.tinymce.
- diazotheme.bootswatch.
- diazotheme.foundation.
- diazotheme.goldilocks.
- diazotheme.initializr.
- diazotheme.kube.
- diazotheme.plone.
- diazotheme.purecss.
- diazotheme.skeleton.
- diazotheme.startup.
- plonetheme.amherst.
- plonetheme.aqueouslight.
- plonetheme.armadillotec.
- plonetheme.bananaleaf.
- plonetheme.burned.
- plonetheme.codapress.
- plonetheme.coolblue.
- plonetheme.darkened.
- plonetheme.diazo_sunburst.
- plonetheme.discovery.
- plonetheme.earthlingtwo.
- plonetheme.evergreen.
- plonetheme.flowerbuds.
- plonetheme.freshpick.
- plonetheme.gestured.
- plonetheme.grungeera.
- plonetheme.keepitsimple.
- plonetheme.leavesdew.
- plonetheme.motion.
- plonetheme.redmusic.
- plonetheme.pythonmexico.
- plonetheme.pollination.
- plonetheme.plumigreen.
- plonetheme.unbound11.
- plonetheme.unilluminated.
- plonetheme.transition.
- plonetheme.woodexperience.
- plonetheme.yoko.
- plonetheme.changecenter.
- plonetheme.unam.
- plonetheme.zopeorg.
The Plone theming suite includes these theming and layout tools:
- collective.cover for edit to create front pages and other composite pages.
- Products.Doormat for adds a doormat viewlet and installs it in the Plone footer.
- collective.behavior.localdiazo for add Dexterity behavior to enable a local Diazo theme. for Plone.
- collective.behavior.localskin for add Dexterity behavior to enable a local theme skin for Plone.
The Plone theming suite includes these font tools:
- collective.fontawesome for add Font Awesome for Plone.
- medialog.googlefonts for add Googlefonts for Plone.
Plone theming suite includes these mobile tools:
- uwosh.mobile.tools, adds mobile tools, detection and libraries to Plone 4.
- zettwerk.mobiletheming, switching mobile themes based on urls to Plone 4.
- medialog.mobilethemeTwo a mobile theme for zettwerk.mobiletheming.
The Plone theming suite includes these jQuery tools:
- zettwerk.ui add jquery.ui's themeroller to Plone 4 for easy theme customization.
- zettwerk.mobile add jquery.mobile based themes for plone with jquery.mobile's themeroller.
The Plone theming suite includes these CSS frameworks for Plone:
- diazoframework.plone is the base Diazo Framework for Plone.
- diazoframework.amazium that integrates the Amazium CSS framework into Plone.
- diazoframework.baseline that integrates the Baseline CSS framework into Plone.
- diazoframework.bootstrap that integrates the Twitter Bootstrap CSS framework into Plone.
- diazoframework.foundation that integrates the Zurb Foundation CSS framework into Plone.
- diazoframework.goldilocks that integrates the Goldilocks Approach CSS framework into Plone.
- diazoframework.kube that integrates the Kube CSS framework into Plone.
- diazoframework.purecss that integrates the PureCSS framework into Plone.
- diazoframework.skeleton that integrates the Skeleton CSS framework into Plone.
- diazotheme.framework.cascade that integrates the Cascade Framework into Plone.
- diazotheme.framework.gumby that integrates the Gumby Framework into Plone.
- diazotheme.framework.ivory that integrates the IVORY Framework into Plone.
- diazotheme.framework.metro that integrates the Metro Framework into Plone.
- diazotheme.framework.wirefy that integrates the Wirefy Framework into Plone.
- diazotheme.framework.yaml4 that integrates the YAML CSS Framework into Plone.
The Plone theming suite includes support for these CSS pre-processors:
- collective.lesscss integrates the LESS CSS pre-processor with Plone.
- collective.scss integrates the SASS CSS pre-processor with Plone.
To get a basic development installation running follow the steps below:
$ git clone https://github.com/plone-ve/plonethemes.suite.git $ cd plonethemes.suite $ python bootstrap.py $ bin/buildout -vvvvvvvvN
Once the buildout has finished, you can access the site by starting up Plone.
$ bin/instance fg
Then go to the site in your browser: http://localhost:8081/manage_main and log in with:
- user: admin
- password: admin
If you haven't already done so, you will have to create a Plone site by:
- click on the "Create a new Plone site" button
- you can leave all the default values in the form that appears
- scroll to the bottom of the page and click on the "Create Plone Site" button
A new Plone 4.x site uses the Sunburst theme by default.
To enable the installed themes:
- at the top right corner of the page click on the "Admin" drop down menu
- choose "Site Setup"
- click on "Add-ons"
- in the "Available add-ons" list at the top of the page, check the box next to the theme you want to enable
- scroll down and press the "Activate" button
Some Diazo themes may hide the editing or management pages of your site. In those cases, you will want to browse to your site using the URL http://127.0.0.1:8080/Plone. You may have to log in again using the same user name and password as above (this is because the Plone authentication cookie is dependent on the site URL, and it treats "localhost" and "127.0.0.1" as different sites).
Once you have enabled a Diazo theme, you can use the Diazo theming control panel to activate other Diazo themes:
- navigate to "Site Setup"
- click on the "Theming" control panel (alternatively, you can navigate to http://127.0.0.1:8081/Plone/@@theming-controlpanel or to http://localhost:8081/Plone/@@theming-controlpanel; the "Theming" control panel will always be unthemed)
- click the "Activate" button for the theme you want to enable
You can disable a Diazo theme without having to deactivate it using the "Add-ons" panel:
To disable a Diazo theme:
- navigate to "Site Setup"
- click on the "Theming" control panel (alternatively, you can navigate to http://127.0.0.1:8081/Plone/@@theming-controlpanel or to http://localhost:8081/Plone/@@theming-controlpanel; the "Theming" control panel will always be unthemed)
- locate the Diazo theme which has a "Deactivate" button (you can use your browser's Find function, e.g. Control-F or Command-F, to search for "Deactivate")
- click on the "Deactivate" button
"Classic", or non-Diazo, Plone themes must be disabled using the "Add-ons" control panel:
- navigate to "Site Setup"
- click on the "Add-ons" control panel (alternatively, you can navigate to http://127.0.0.1:8081/Plone/prefs_install_products_form or http://localhost:8081/Plone/prefs_install_products_form)
- in the "Activated add-ons" list at the bottom of the page, check the box next to the theme you want to disable
- scroll down and press the "Deactivate" button
If you run into any issues trying to get this to work, please, add an issue to the tracker here on this github project.
Really thanks to :
- Leonardo J .Caballero G. aka macagua
- Eveli Ramirez aka Eveli
- Flamel Canto aka flamelcanto
- T. Kim Nguyen aka tkimnguyen
- Full name aka username
For an updated list of all contributors visit the following URL: https://github.com/plone-ve/plonethemes.suite/contributors