Package: vs.zopeskel.diazo
ContentsIntroductionRequirementsInstallationCreate add onGenerate the themeCustomize the themeOther resourcesdiazo_resourcesdiazo_resources/staticlocalesprofiles/defaultoverridesChangelogIntroductionZopeSkeltemplate which allows
individual adaptations of the Bootstrap theme. Therefore it usesz3c.jbotto overwrite existing templates
withz3c.jbot.Also, you should use Less variables, mixins, etc. Therefore, theBuildoutconfiguration file will also installBowerandGruntto recompile the
bootstrap Less files.RequirementsThis package is only compatible with ZopeSkel<3.0.InstallationAdd these lines to your development buildout:[buildout]
parts =
    zopeskel

[zopeskel]
recipe = zc.recipe.egg
unzip = true
eggs =
    PasteScript
    ZopeSkel
    vs.zopeskel.diazoRe-run buildout, e.g. with:$ ./bin/buildout -c devel.cfgCreate add onAdd ons under development are typically created in your buildout’ssrcdirectory. To add a package namedmy.themeyou can enter the following
in the terminal:$ cd src/
$ ../bin/zopeskel bootstrap my.themeThis will create a Python package with a directory structure like this:my.theme
├── bootstrap.py
├── buildout.cfg
├── docs
│   ├── INSTALL.txt
│   ├── LICENSE.GPL
│   └── LICENSE.txt
├── my
│   └── theme
│       ├── configure.zcml
│       ├── diazo_resources
│       │   ├── favicon.ico
│       │   ├── img
│       │   │   ├── apple-touch-icon-144x144-precomposed.png
│       │   │   ├── apple-touch-icon-57x57-precomposed.png
│       │   │   ├── apple-touch-icon-72x72-precomposed.png
│       │   │   ├── apple-touch-icon.png
│       │   │   └── apple-touch-icon-precomposed.png
│       │   ├── index.html
│       │   ├── manifest.cfg
│       │   ├── preview.png
│       │   ├── rules.xml
│       │   └── static
│       │       ├── css
│       │       │   └── main.css
│       │       ├── fonts
│       │       ├── img
│       │       └── js
│       │           └── main.js
│       ├── Gruntfile.js
│       ├── interfaces.py
│       ├── locales
│       ├── overrides
│       │   └── plone.app.layout.viewlets.footer.pt
│       ├── profiles
│       │   └── default
│       │       ├── browserlayer.xml
│       │       ├── cssregistry.xml
│       │       ├── jsregistry.xml
│       │       ├── metadata.xml
│       │       └── theme.xml
│       └── version.txt
├── setup.cfg
└── setup.pyGenerate the themeTo genereate the theme you can switch to your newly created product annd run
buildout, e.g.:$ cd src/my.theme
$ python bootstrap.py
$ ./bin/buildoutNow you can start the instance and activatemy.themeincontrol panel→Extensions.Customize the themeChange the bootstrap css instructions and fonts:You can customize the bootstrap less variables e.g. insrc/my.theme/my/theme/bower_components/bootstrap/less/variables.less.In addition, you can write your own less instructions insrc/my.theme/my/theme/less/custom.less.Special fonts can be added in/bower_components/bootstrap/dist/fonts/.Finally the less files can be recompiled e.g. with:$ cd src/my.theme/my/theme
$ ./node_modules/bower/bin/bower install
$ ./node_modules/grunt-cli/bin/grunt less
$ ./node_modules/grunt-cli/bin/grunt copyChange the bootstrap grid:The initial grid is defined inmy/theme/theme/index.html:<div class="container">
  <div class="row">
    <aside id="column-left" class="col-md-3">
      <p>Left column</p>
    </aside>
    <article id="main" class="col-md-6" role="main">
      …
    </article>
    <aside id="column-right" class="col-md-3">
      <p>Right column</p>
    </aside>
  </div>
</div>If you want to define another grid, bootstrap provide many more
opportunities, seeBootstrap grid system.Overriding templatesYou can easily change templates by copy them into theoverridesfolder,
e.g. fromeggs/plone.app.layout-2.5.1-py2.7.egg/plone/app/layout/viewlets/footer.pttosrc/my.theme/my/theme/overrides/plone.app.layout.viewlets.footer.pt.Other resourcesdiazo_resourcesdiazo_resources/staticlocalesprofiles/defaultUsally the filespublic.css,columns.cssandportlets.cssare not
delivered with yout theme because of the TAL expressionnot: request/HTTP_X_THEME_ENABLED.overridesChangelog1.0 (2014-06-09)Initial release.