- Info
Visual Design
How to Make Your CSS Changes Take Effect Instantly-
This tutorial explains how to ensure that any CSS changes you make can be seen instantly. This is the most common problem themers run into when they are new to Plone.
- Adjusting Kupu edit area size
-
Kupu (Visual Editor) edit area size might be too big for pages containing several short rich text fields. This how to explains how to adjust the size per field.
- Create a different look and feel for different sections of your web site
-
Learn how to create a different look and feel for your site, using only CSS sleight-of-hand.
- How to write templates for Plone 4
-
Plone 4 has some improvements in templates. This is an overview of the most important ones, and what you need to know when updating your existing templates.
- Selecting a Skin Based on URL
-
I want to have two skins for my site, one for the site administrator (the default plone skin) and one for the public (highly customised). This method uses Apache mod_proxy and Zope access rules to insert the appropriate plone_skin variable for different URLs.
- Set skin for folder
-
Shows how to select a different skin than the main site skin for a given folder.
- Switching Skins
-
This Tutorial describes how Plone chooses a skin when you open a web page, and then describes the multiple ways that you can intervene to switch the skin. The Tutorial also discusses two common use cases, switching skins based on URL and the type of user (e.g., Anonymous or Authenticated).
- Using the Resource Registries to control CSS and Javascript
-
Plone has two neat tools for managing Cascading Stylesheets and Javascript in a handy way. This tutorial explains some whys and hows and even has a minimal practical example of how it works.
- Customizing the viewlets in main_template
-
Since Plone 3.0, main_template.pt calls viewlet managers instead of METAL macros. Learn from this tutorial how viewlets can be programmatically reordered, hidden or added (from a product on the filesystem).
- What controls what you see
-
This tutorial breaks down the main display elements in a Plone site, and shows you how to control and customize the appearance of each element.
- Add "Post-It Note" Portlet for Notes
-
This howto explains how you can add a "PostIt" note type to a Plone site, so that post-its, when added to a folder, appear in a portlet for that folder. A good example of creating a simple type, workflow, and portlet, all working together.
- Configure a static portlet to show the weather
-
This will show how to create a weather portlet using Plone 3's built-in static portlet.
- Controlling portlets
-
Shows how to control which portlets (the boxes on the left and right hand side) show up where.
- Creating a Flat Navigation Portlet
-
How to create a navigation portlet that shows the contents of a single folder.
- Creating a static-text portlet
-
The simplest portlet you can make: static, with no special logic.
- Creating portlets with editable static content
-
This how-to shows you how to create portlets which display static content pulled from a content object. Essentially, it demonstrates how to display the contents of a Document in a the left and right slots with some formatting, but the technique is useful for other content types as well. This lets portal managers (who are not necessarily HTML or ZPT savvy) alter the content of the portlet easily.
- Creating static text portlets in Plone 3.0
-
An explanation of how to use the plone.portlet.static product to easily create static html portlets.
- Customizing Plone 3 - through-the-web (TTW)
-
Although file system and product based customization of a Plone site is the preferred practice there are still situations where it makes sense to make changes in the Zope Management Interface (ZMI) and in the Plone Control Panel. This tutorial will take the end-user through making simple changes and provide a basic understanding of the important elements in the ZMI.
- Displaying a Random Quote
-
How to display a random quote on a Plone page.
- Formatting portlets
-
How to format your portlets with the right HTML tags and the right CSS classes.
- How To remove portlets from python code
-
This how-to will show you have to remove the standard portlets from python code. This can be useful to include in code you run from import_steps.xml. This How-To will be obsolete when plone portlets can use generic setup for portlet assignment.
- Image frames for portlets
-
Plone with pure CSS doesn't offer very rich looks customization possibilities. If you want to go beyond bars, blocks and solid colors you need to go to beyond CSS. This tutorial explains how Plone's portlets can gain smooth round corners and drop shadows. We create a portlet frame template macro, decorate frame using CSS and then modify Plone's existing portlets to utilize the image frame template.
- Portlet to display a random Photo
-
This Portlet displays a random Photo. It needs either CMFPhoto and CMFPhotoAlbum or plain plone 2.1 or higher.
- Put round corners on your portlets
-
How to use Plone's built-in CSS classes to put round corners on portlets.
- Rounded Corners on Portlets using only CSS
-
Put the "Rounded Corners" look on your portlets using only custom CSS and three images.
- 2 Level Navigation In Plone 3
-
This How To shows how to modify a Plone 3 theme product so that the tabs would have 2 levels of navigation.
- Add Icons To The Portal Tabs
-
How to add icons to the tabs across the top of your Plone site.
- Creating drop down menus in Plone
-
Three step customization of Plone 2.1 and 2.5 that will show a menu under the tab the mouse pointer is over. The menu will be shown if that tab is a folder or a similar type of container with items inside that will appear as menu items.
- Replacing tabs with images using CSS
-
The Section tabs in Plone can be replaced with images using CSS if you need that for your site customization. Also includes rollover images.
- Add supplementary views to custom content types
-
This howto explains how to add supplementary views to custom content types. These supplementary views are selected specifically for each folder TTW. One example is standard Plone folders, where you can choose between e.g. table view and standard view. Sometimes, you want to do this in your custom content type as well.
- Advanced Image fallback and PiL
-
A recipe of how to write a complex set of fall back logic for a scaled image
- Change the look and feel of a folder and its subfolders
-
If you want a subfolder to have a different appearance than the rest of your site, you can add a simple page template and a stylesheet to a folder that affects it and all of its subfolders.
- Creating a custom edit template for an AT Content Type
-
This how-to details the steps needed to create a custom edit template for an AT Content Type, News Item in this case.
- Creating a Plone Help Center like view for folders
-
The Plone Help Center shows the most recent content in portlet like boxes, which gives you a pretty good insight whats happening in this area.
- Creating random rotating images anywhere in your Plone site
-
Need to have a rotating image on your home page each time a user visits your site? By creating a simple Python script, you can achieve this by using only the <img> tag.
- Edit Zope Page Template (ZPT) content through Plone
-
There may be times when you’ll want to let users edit content that resides within ZPT’s such as the footer, but without having them go through the ZMI.
- Enable fancy zoom view for all content types embedding images
-
This How-to shows you in which way you have to customize view templates in order to allow a fancy zoom of its embedded images. This includes all "texts" which have images inserted by kupu (the plone wysiwyg-editor).
- Full RSS in Plone 3
-
Plone built in RSS template shows only the description. This article explains a way to change this template to have the full content in the RSS.
- How to create a blog view of a page listing
-
Modifying a CMFContentPanels viewlet to add a blog-style view to a Plone site
- How to write templates for Plone 4
-
Plone 4 has some improvements in templates. This is an overview of the most important ones, and what you need to know when updating your existing templates.
- Making your tables sortable
-
In this tutorial, Helge Tesdal from Plone Solutions will show you how to make your tables sortable with Javascript - just by using a simple declaration.
- Previewing Page Templates
-
Shows how to make it possible to quickly preview page templates when editing with an offline editor.
- Using custom templates as front page
-
This how-to shows you a couple of ways in which you can put a news listing on the front page of your portal. The technique can also be used for any other type of template, and any folder other than the portal root.
- Using Macros and METAL in Plone Page Templates
-
An overview of how Macros and METAL tags are used in Plone. The aim is to give new users a basic understanding by going over some examples of macros and METAL in action.
- Edit Skins Over Webdav
-
Some webdav clients (Mac OS X) create new files on every write, losing the object type information. This script gets webdav editing to work for page templates, css files and images in portal_skins.
- Using Firebug to edit plone's css
-
How to use firebug the firefox plugin to help you edit plone's css
Get Help