Skip to content

collective/diazotheme.bootswatch

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
diazotheme
diazotheme
 
 
docs
docs
 
 
.gitignore
.gitignore
 
 
CHANGES.txt
CHANGES.txt
 
 
MANIFEST.in
MANIFEST.in
 
 
README.rst
README.rst
 
 
TODO.txt
TODO.txt
 
 
setup.py
setup.py
 
 
upgrade.sh
upgrade.sh
 
 

Repository files navigation

diazotheme.bootswatch

Introduction

diazotheme.bootswatch is a collection of Diazo themes meant to serve as parent themes. Most of these themes are molding the plone html into a framework compliant html.

The "plone" theme is the exception to the rule. As a theme it adds html structures to the plone sunburst theme. It also contains a lot of utilities, like different colors and sizes of the plone logo and icons, and more.

This package provides diazo themes based on many CSS framework using the theming and packaging features available for create Diazo theme using plone.app.theming.

diazotheme.bootswatch package contains the following css framework implementations:

Extending

How to create a child theme

Any of the themes folders can be used to create your own child theme, based on diazotheme.bootswatch. You can either wrap the theme up in a package or you can create a zip file of the folder and upload that to the theme panel.

There are two ways of creating a child theme.

The package way

For this example, lets assume we are creating a package called diazotheme.newtheme and we will copy the bootstrap theme in this package.

  1. Created the diazotheme.newtheme package (for instance through paster script).

  2. Copy diazotheme.bootswatch/diazotheme/bootswatch/bootstrap to diazotheme.newtheme/diazotheme/newtheme/static (arbitrary name).

  3. Remove diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/examples directory.

  4. Add <plone:static directory="static" name="newtheme" type="theme"/> to diazotheme.newtheme/diazotheme/newtheme/configure.zcml.

  5. Change diazotheme.newtheme/diazotheme/newtheme/static/manifest.cfg to reflect the changes, so:

    [theme]
title = New theme
description = Describe the new theme
rules = /++theme++newtheme/rules.xml
prefix = /++theme++newtheme
doctype = <!DOCTYPE html>
preview = preview.png

The zip file way

Again, lets assume we use the bootstrap theme and we want to end up with the newtheme name.

  1. Copy diazotheme.bootswatch/diazotheme/bootswatch/bootstrap to your file system.

  2. Rename bootstrap to newtheme (the folder name will become the theme name in the theme panel)

  3. Remove diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/examples directory.

  4. Change newtheme/manifest.cfg to reflect the changes, so:

    [theme]
title = New theme
description = Describe the new theme
rules = /++theme++newtheme/rules.xml
prefix = /++theme++newtheme
doctype = <!DOCTYPE html>
preview = preview.png
  1. Customize your theme.
  2. When you are finished customizing, create a zip archive of the newtheme folder.
  3. Upload the newtheme.zip in the plone theme panel.

Screenshots

Bootswatch Amelia Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Amelia Theme

Bootswatch Amelia Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Amelia Narrow Theme

Bootswatch Cerulean Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Cerulean Theme

Bootswatch Cerulean Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Cerulean Narrow Theme

Bootswatch Cosmo Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Cosmo Theme

Bootswatch Cosmo Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Cosmo Narrow Theme

Bootswatch Cyborg Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Cyborg Theme

Bootswatch Cyborg Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Cyborg Narrow Theme

Bootswatch Journal Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Journal Theme

Bootswatch Journal Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Journal Narrow Theme

Bootswatch Readable Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Readable Theme

Bootswatch Readable Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Readable Narrow Theme

Bootswatch Simplex Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Simplex Theme

Bootswatch Simple Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Simple Narrow Theme

Bootswatch Slate Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Slate Theme

Bootswatch Slate Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Slate Narrow Theme

Bootswatch Spacelab Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Spacelab Theme

Bootswatch Spacelab Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Spacelab Narrow Theme

Bootswatch Spruce Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Spruce Theme

Bootswatch Spruce Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Spruce Narrow Theme

Bootswatch Superhero Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Superhero Theme

Bootswatch Superhero Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch Superhero Narrow Theme

Bootswatch United Theme

Layout of the site when viewed in a computer resolution:

Bootswatch United Theme

Bootswatch United Narrow Theme

Layout of the site when viewed in a computer resolution:

Bootswatch United Narrow Theme

Requirements

  • From the Plone 4.1.x To the Plone 4.3 latest version (https://plone.org/download)
  • The plone.app.theming package (You will need enable it to use this package)

Features

  • Provides the diazo rules for Bootswatch theme.
  • Provides the diazo rules for Bootswatch Amelia theme.
  • Provides the diazo rules for Bootswatch Amelia Narrow theme.
  • Provides the diazo rules for Bootswatch Cerulean theme.
  • Provides the diazo rules for Bootswatch Cerulean Narrow theme.
  • Provides the diazo rules for Bootswatch Cosmo theme.
  • Provides the diazo rules for Bootswatch Cosmo Narrow theme.
  • Provides the diazo rules for Bootswatch Cyborg theme.
  • Provides the diazo rules for Bootswatch Cyborg Narrow theme.
  • Provides the diazo rules for Bootswatch Journal theme.
  • Provides the diazo rules for Bootswatch Journal Narrow theme.
  • Provides the diazo rules for Bootswatch Readable theme.
  • Provides the diazo rules for Bootswatch Readable Narrow theme.
  • Provides the diazo rules for Bootswatch Simplex theme.
  • Provides the diazo rules for Bootswatch Simplex Narrow theme.
  • Provides the diazo rules for Bootswatch Slate theme.
  • Provides the diazo rules for Bootswatch Slate Narrow theme.
  • Provides the diazo rules for Bootswatch Spacelab theme.
  • Provides the diazo rules for Bootswatch Spacelab Narrow theme.
  • Provides the diazo rules for Bootswatch Spruce theme.
  • Provides the diazo rules for Bootswatch Spruce Narrow theme.
  • Provides the diazo rules for Bootswatch Superhero theme.
  • Provides the diazo rules for Bootswatch Superhero Narrow theme.
  • Provides the diazo rules for Bootswatch United theme.
  • Provides the diazo rules for Bootswatch United Narrow theme.

Installation

Buildout

If you are a developer, you might enjoy installing it via buildout.

For install diazotheme.bootswatch package add it to your buildout section's eggs parameter e.g.:

[buildout]
 ...
 eggs =
     ...
     diazotheme.bootswatch

and then running bin/buildout.

Or, you can add it as a dependency on your own product setup.py file:

install_requires=[
    ...
    'diazotheme.bootswatch',
],

Enabling the theme

To apply any of these themes, in site setup:

  • Install "Diazo theme support" under Add-on

  • Select "Sunburst Theme" as Default themes under Themes

    To apply the ..., in site setup: - Enable "... (...)" under Diazo themes

Resources

This package is the parent of all Plone diazo themes and provides rule that are practical to use in other diazo themes.

Bootswatch Theme

The resources of this theme can be reached through

/++theme++bootswatch

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootswatch directory with following resources files:

_ bootswatch
  Provides the resources from "Bootswatch Theme".
  _ css
    _ font-awesome.min.css
    _ plone.css
  _ font
    _ fontawesome-webfont.eot
    _ fontawesome-webfont.svg
    _ fontawesome-webfont.fft
    _ fontawesome-webfont.woff
    _ FontAwesome.otf
  _ rules
    _ head-base.xml

Bootswatch Amelia

The resources of this theme can be reached through

/++theme++amelia

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/amelia directory with following resources files:

_ amelia
  Provides the resources from "Bootswatch Amelia".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Amelia Narrow

The resources of this theme can be reached through

/++theme++amelia-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/amelia-narrow directory with following resources files:

_ amelia-narrow
  Provides the resources from "Bootswatch Amelia Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Cerulean

The resources of this theme can be reached through

/++theme++cerulean

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/cerulean directory with following resources files:

_ cerulean
  Provides the resources from "Bootswatch Cerulean".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Cerulean Narrow

The resources of this theme can be reached through

/++theme++cerulean-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/cerulean-narrow directory with following resources files:

_ cerulean-narrow
  Provides the resources from "Bootswatch Cerulean Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Cosmo

The resources of this theme can be reached through

/++theme++cosmo

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/cosmo directory with following resources files:

_ cosmo
  Provides the resources from "Bootswatch Cosmo".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Cosmo Narrow

The resources of this theme can be reached through

/++theme++cosmo-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/cosmo-narrow directory with following resources files:

_ cosmo-narrow
  Provides the resources from "Bootswatch Cosmo Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Cyborg

The resources of this theme can be reached through

/++theme++cyborg

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/cyborg directory with following resources files:

_ cyborg
  Provides the resources from "Bootswatch Cyborg".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Cyborg Narrow

The resources of this theme can be reached through

/++theme++cyborg-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/cyborg-narrow directory with following resources files:

_ cyborg-narrow
  Provides the resources from "Bootswatch Cyborg Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Journal

The resources of this theme can be reached through

/++theme++journal

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/journal directory with following resources files:

_ journal
  Provides the resources from "Bootswatch Journal".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Journal Narrow

The resources of this theme can be reached through

/++theme++journal-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/journal-narrow directory with following resources files:

_ journal-narrow
  Provides the resources from "Bootswatch Journal Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Readable

The resources of this theme can be reached through

/++theme++readable

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/readable directory with following resources files:

_ readable
  Provides the resources from "Bootswatch Readable".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Readable Narrow

The resources of this theme can be reached through

/++theme++readable-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/readable-narrow directory with following resources files:

_ readable-narrow
  Provides the resources from "Bootswatch Readable Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Simplex

The resources of this theme can be reached through

/++theme++simplex

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/simplex directory with following resources files:

_ simplex
  Provides the resources from "Bootswatch Simplex".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Simplex Narrow

The resources of this theme can be reached through

/++theme++simplex-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/simplex-narrow directory with following resources files:

_ simplex-narrow
  Provides the resources from "Bootswatch Simplex Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Slate

The resources of this theme can be reached through

/++theme++slate

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/slate directory with following resources files:

_ slate
  Provides the resources from "Bootswatch Slate".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Slate Narrow

The resources of this theme can be reached through

/++theme++slate-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/slate-narrow directory with following resources files:

_ slate-narrow
  Provides the resources from "Bootswatch Slate Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Spacelab

The resources of this theme can be reached through

/++theme++spacelab

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/spacelab directory with following resources files:

_ spacelab
  Provides the resources from "Bootswatch Spacelab".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Spacelab Narrow

The resources of this theme can be reached through

/++theme++spacelab-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/spacelab-narrow directory with following resources files:

_ spacelab-narrow
  Provides the resources from "Bootswatch Spacelab Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Spruce

The resources of this theme can be reached through

/++theme++spruce

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/spruce directory with following resources files:

_ spruce
  Provides the resources from "Bootswatch Spruce".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Spruce Narrow

The resources of this theme can be reached through

/++theme++spruce-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/spruce-narrow directory with following resources files:

_ spruce-narrow
  Provides the resources from "Bootswatch Spruce Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Superhero

The resources of this theme can be reached through

/++theme++superhero

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/superhero directory with following resources files:

_ superhero
  Provides the resources from "Bootswatch Superhero".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch Superhero Narrow

The resources of this theme can be reached through

/++theme++superhero-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/superhero-narrow directory with following resources files:

_ superhero-narrow
  Provides the resources from "Bootswatch Superhero Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch United

The resources of this theme can be reached through

/++theme++united

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/united directory with following resources files:

_ united
  Provides the resources from "Bootswatch United".
  _ css
    _ bootstrap.css
    _ bootstrap.min.css
  _ manifest.cfg
  _ preview.png
  _ rules.xml

Bootswatch United Narrow

The resources of this theme can be reached through

/++theme++united-narrow

There are placed at diazotheme.bootswatch/diazotheme/bootswatch/bootstrap/united-narrow directory with following resources files:

_ united-narrow
  Provides the resources from "Bootswatch United Narrow".
  _ manifest.cfg
  _ preview.png
  _ rules.xml

This is the Bootstrap Theme applied through Diazo.

To apply this theme, in site setup: - Install "Diazo theme support" under Add-on - Select "(Unstyles)" as Default themes under Themes - Enable "Bootstrap Theme (bootstrap)" under Diazo themes

Upgrading

To upgrade the contained themes to the latest version, use the upgrade.sh script in this directory:

./upgrade.sh 2.3.2

where the first argument is the version to upgrade to. This script will download the relevant archive, unpack it, and replace the stored CSS files.

After this, add a change note, and use git to commit and push the updates.

Please note the upgrade script will not create any new themes that might have been added on Bootswatch. Similarly, any themes that may happen to have been removed will not be updated.

Notes

  • Because of the way that Bootswatch themes operate with icons (relative URLs, expecting icons to live next to the CSS), the relative paths have been modified accordingly. By default, they look like this:

    ../img/glyphicons-halflings.png

    which refers to "the img folder next to my parent folder". For a resource like ++theme++spacelab/css/bootstrap.min.css this ends up attempting to resolve to ++theme++spacelab/img/glyphicons-halflings.png. In Plone, because the Bootstrap img folder is kept separate under a different theme resource path, this relative URL fails.

    At present, a solution has been to adjust these relative URLs inside each theme to look like:

    ../../++theme++bootstrap-framework/img/glyphicons-halflings.png

    This works for the test cases (standard install; virtual hosted; both development and production modes), but is somewhat brittle in the fact the same directory structure must be maintained for this theme, and for the Bootstrap resources.

    The upgrade.sh script performs this adjustment accordingly.

    A more bullet-proof solution is welcomed, if possible. Note that using an absolute path (being a / at the start of the path) is not workable since Plone sites can be virtual hosted on different paths.

Contribute

License

The project is licensed under the GPLv2.

Credits

  • Thijs Jonkman (t.jonkman at gmail dot com).

Amazing contributions

  • Leonardo J. Caballero G. aka macagua (leonardocaballero at gmail dot com).

You can find an updated list of package contributors on https://github.com/collective/diazotheme.bootswatch/contributors

About

Bootswatch themes based on the Bootstrap framework

Resources

Readme
Activity
Custom properties

Stars

6 stars

Watchers

109 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • Python 53.0%
  • CSS 30.8%
  • Shell 16.2%