Skip to main content

Paster templates for Plone Diazo theme package

Project description

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 panelExtensions.

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

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.

Changelog

1.0 (2014-06-09)

  • Initial release.

Project details


Release history Release notifications

This version
History Node

1.0

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
vs.zopeskel.diazo-1.0.zip (48.8 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page