plone.app.theming in 5 minutes

A very simple tutorial on getting started with plone.app.theming the Diazo integration package.

Based on Alex Clark's Diazo theming in Plone

Set Up Plone:

$ virtualenv --python=/path/to/python2.6.6/bin
$ bin/pip install zc.buildout==1.4.4
$ bin/buildout init

Edit buildout.cfg

[buildout]
extends = http://pythonpackages.com/buildout/plone/4.2.x

[plone]
resources = ${buildout:directory}/resources

Then run:

$ bin/buildout

When that completes:

$ bin/plone fg

You should see something like the following:

2012-09-04 09:42:45 INFO ZServer HTTP server started at Tue Sep  4 09:42:45 2012
 Hostname: 0.0.0.0
 Port: 8080
2012-09-04 09:42:55 WARNING SecurityInfo Conflicting security declarations for "setText"
2012-09-04 09:42:55 WARNING SecurityInfo Class "ATTopic" had conflicting security declarations
2012-09-04 09:43:00 WARNING ZODB.blob (49671) Blob dir /Users/ableeb/projects/plone/plone4/diazo-tutorial/var/blobstorage/ has insecure mode setting
2012-09-04 09:43:14 INFO plone.app.theming Patched Zope Management Interface to disable theming.
2012-09-04 09:43:22 INFO Zope Ready to handle requests

Open the following URL:

http://localhost:8080

and create a New Plone Site with Diazo. Accept the default names for things, but make sure to check the box next to Diazo.

Theme Set Up

Ctrl-c to quit Plone, and create these files:

$ mkdir -p resources/theme/my.theme
$ touch resources/theme/my.theme/theme.html
$ touch resources/theme/my.theme/rules.xml
$ touch resources/theme/my.theme/theme.css

Now restart Plone. Click on Site Setup -> Diazo theme -> Advanced settings. Make your fields look like this:

Rules File: /++theme++my.theme/rules.xml 
Absolute Path Prefix: /++theme++my.theme

Save the form and select Basic Settings. Make your fields look like this:

[x] Enable Theme
Select A Theme -> My theme (my.theme)

Save the form and go to the site root. You won't see any changes yet! Lets make some changes to the files you created above. Edit resources/theme/my.theme/theme.html to contain:

<html>
    <head>
        <title>My own Diazo</title>
        <link rel="stylesheet" href="./theme.css" />
    </head>
    <body>
        <h1 id="title">My own Diazo home page</h1>
        <div id="content">
            <!-- Placeholder -->
            Lorem ipsum ...
        </div>
    </body>
</html>

Next, edit resources/theme/my.theme/rules.xml to contain:

<rules
    xmlns="http://namespaces.plone.org/diazo"
    xmlns:css="http://namespaces.plone.org/diazo/css"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <theme href="theme.html" />

    <append css:theme="#content" css:content="#content"/>

</rules>

Finally, lets give it some styles. Edit resources/theme/my.theme/theme.css to contain:

h1 {
    font-size: 18pt;
    font-weight: bold;
}

.headerlink {
    color: #DDDDDD;
    font-size: 80%;
    text-decoration: none;
    vertical-align: top;
}

.align-right {
    float: right;
    margin: 0 10px;
    border: dotted #ddd 1px;
}

Now, open the site:

http://localhost:8080/Plone

Now you should see some changes. Check out diazo.org and the plone.app.theming pypi page for details.

Note: you can change the URL to http://127.0.0.1:8080/Plone to see your site without its theme.

Brito

Pesquisar este blog