vs.zopeskel.diazo

Contents

• Introduction
• Requirements
• Installation
• Create add on
• Generate the theme
• Customize the theme
  • Other resources
    • diazo_resources
    • diazo_resources/static
    • locales
    • profiles/default
    • overrides

Introduction

ZopeSkel template which allows individual adaptations of the Bootstrap theme. Therefore it uses z3c.jbot to overwrite existing templates with z3c.jbot.

Also, you should use Less variables, mixins, etc. Therefore, the Buildout configuration file will also install Bower and Grunt to recompile the bootstrap Less files.

Requirements

• This package is only compatible with ZopeSkel<3.0.

Installation

Add these lines to your development buildout:

[buildout]
parts =
    zopeskel

[zopeskel]
recipe = zc.recipe.egg
unzip = true
eggs =
    PasteScript
    ZopeSkel
    vs.zopeskel.diazo

Re-run buildout, e.g. with:

$ ./bin/buildout -c devel.cfg

Create add on

Add ons under development are typically created in your buildout’s src directory. To add a package named my.theme you can enter the following in the terminal:

$ cd src/
$ ../bin/zopeskel bootstrap my.theme

This 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.py

Generate the theme

To genereate the theme you can switch to your newly created product annd run buildout, e.g.:

$ cd src/my.theme
$ python bootstrap.py
$ ./bin/buildout

Now you can start the instance and activate my.theme in control panel → Extensions.

Customize the theme

1. Change the bootstrap css instructions and fonts:

   1. You can customize the bootstrap less variables e.g. in src/my.theme/my/theme/bower_components/bootstrap/less/variables.less.

   2. In addition, you can write your own less instructions in src/my.theme/my/theme/less/custom.less.

   3. Special fonts can be added in /bower_components/bootstrap/dist/fonts/.

   4. 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 copy
      

2. Change the bootstrap grid:

   The initial grid is defined in my/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, see Bootstrap grid system.

3. Overriding templates

   You can easily change templates by copy them into the overrides folder, e.g. from eggs/plone.app.layout-2.5.1-py2.7.egg/plone/app/layout/viewlets/footer.pt to src/my.theme/my/theme/overrides/plone.app.layout.viewlets.footer.pt.

Other resources

diazo_resources

diazo_resources/static

locales

profiles/default

Usally the files public.css, columns.css and portlets.css are not delivered with yout theme because of the TAL expression not: request/HTTP_X_THEME_ENABLED.

overrides