Elements of a Plone Skin

     

Creating a new Plone skin involves a few different elements:

• The base properties

• The style sheet

• Images

In the previous chapter, you learned how to swap out image files so that objects reference your own custom files. For example, the object called logo.jpg could actually hold the yourlogo.gif graphic file. By the end of this chapter, you'll have a better understanding of how the properties and style sheet files work within Plone. As you go through this chapter and learn about the customizable pieces, you might find that you do not want to customize every single element that makes up a Plone skin. In fact, it is quite common for Plone administrators to simply change the color scheme ”a thematic change ”and be done with it. Creating a completely new skin is a time-consuming task that evolves from internal discussions with team members and mock-ups from a design team. When you are finished with this chapter, you should understand the elements and the process of skinning a Plone site, and you will have the necessary skills to develop and apply a new Plone skin.

Preparing to Use a Custom Skin

Many aspects of creating your custom skin will take place via the Zope Management Interface, but to get started, you'll make a few modifications on your actual file system. Within your file system, navigate to the Data directory within your Plone installation directory. Continue traversing your directory structure until you reach Products/CMFPlone/skins/plone_styles . In this directory, create a new directory to hold your custom style- related information. In this example, I've called the directory custom_plone, but you can use any name you want.

Still within your file system, copy the files base_properties.props and plone.css.dtml from the Products/CMFPlone/skins/plone_style s directory to the new directory you created (custom_plone, for example). In a text editor, open the base_properties.props file and look for a line similar to this:

 plone_skin:string=Plone Default 

Change this line to this:

 plone_skin:string=Custom Plone 

Note

You can name your new skin anything you want; this example uses Custom Plone as its name.

Save and close the file; you're finished working with your file system and will now go back to work within the ZMI. The next step in your preparation is to add the name of your custom skin to the list of available Plone skins. In the ZMI, click on your Plone instance in the navigation frame, and then click on the portal_skins object in the workspace frame. Click on the Properties tab; you will see a form containing the installed skins, as well as a place to add a new skin (see Figure 6.1).

Figure 6.1. Modifying portal_skins properties.

To add a skin called Custom Plone, first enter Custom Plone in the Name field. In this instance, you'll want to use this skin for all the layers for which the Plone Default skin is used. In the Layers field next to the Plone Default entry, select and copy all of the entries, and then paste them in the Layers field for the Custom Plone entry. Press the Add button to add this new skin to the list of available skins.

The next step in the process is to prepare custom versions of the base properties file and Plone style sheet so that you can select Custom Plone as a skin and actually have it display something that has been customized. Navigate to the portal_skins object and click on it in the Workspace pane. Then select the plone_styles object, followed by the custom_plone object. The custom_plone object contains the two items you placed there via the file system: base_properties and plone.css . Click on the base_properties object and press the Customize button/ An editable version of this file now exists in your plone_styles/custom folder. Repeat this process with the plone.css object, and navigate to plone_styles/custom to ensure that copies are available to you.

To verify that everything is in order, select the base_properties object. You should see an editable form such as the one in Figure 6.2.

Figure 6.2. Modifying the base_properties object.

Follow the next few steps to ensure that your system is prepared to handle skin-related change:

1. Change the value of fontColor to Red .
   
   
2. Change the value of backgroundColor to Black .
   
   
3. Press the Save Changes button to save the form.
   
   
4. Navigate to the portal_skins object and click on the Properties tab.
   
   
5. Scroll to the bottom of this form and select Custom Plone from the Default Skin drop-down menu. Press the Save button to save your changes.
   
   
6. In your control panel, restart Zope.
   
   

After Zope has been restarted, navigate to your Plone site. You should see red text on a black background instead of the standard black text on a white background. Unless you're particularly fond of this color scheme, follow the same steps detailed previously, and change fontColor back to Black and backgroundColor back to White . With your system ready and waiting to accept changes, the next section explains the contents of base_properties and plone.css in more detail.