Customizing Tabs and Graphics

Customizing Tabs and Graphics

An out-of-the-box Plone installation contains several standard tabs and a whole set of supplementary graphics that are placed throughout the template. In this section, you'll learn how to add, modify, and remove the standard tabs, and also how to modify the basic images used in the template. The majority of these actions occur within the Zope Management Interface, so log in to the ZMI to get started.

Changing the Tabs

When you first view your Plone installation, you might see tabs across the top of the template for Home, News, and Members. If you are using Plone as a corporate intranet, you might want these tabs to represent departments within your organization, such as Sales and Marketing, Human Resources, IT, and so forth. Similarly, if you are using Plone within an educational department, you might want to have tabs that represent sections for faculty, for students, for general information ”the list goes on. In other words, the tabs should represent the content architecture of your site.

Tabs are created and maintained as part of the portal_actions object, which is visible in the ZMI when you click on your Plone instance. When you view this object, you'll see a form containing a repeating series of entries; each entry corresponds to an action within your Plone site. An example is shown in Figure 5.10. You should see several entries in your portal_actions object, including the standard entries for News and Members. Scroll for the length of the page to familiarize yourself with the various entries.

Figure 5.10. The portal_actions object contains many form entries.

Each entry has the following elements:

• Name ” A text field containing the name of the item.

• Id ” A text field containing the ID for the item.

• Action ” A text field describing the action of the item, such as where the contents of a tab are located.

• Condition ” A text field containing any conditions for the item, such as restricting the visibility of the item to logged-in users only.

• Permission ” A drop-down list containing numerous permissions types relevant to actions.

• Category ” A text field describing the type of action, such as portal_tabs , folder , document_actions , and so forth.

• Visible ” A check box that controls the overall visibility of an item.

For the remainder of this section, the goal is to display tabs across the top of the Plone template that represent folders for the following departments within a corporate intranet: Finance, Human Resources, IT, Legal, Product Management, and Sales and Marketing. Because the existing tabs in the standard Plone site are Home, News, and Members, this means removing two tabs and adding six new ones.

First comes the easy part ”removing two tabs, News and Members. Because News and Members are already nicely defined in the ZMI, there's no reason to completely remove the entry ”you might one day want to display these tabs. As such, instead of removing these tabs, simple uncheck the Visible check box and press the Save button at the bottom of the page. If you log in to your Plone site, you will no longer see these tabs ”it's as easy as that. If you want to undo your action, you can, through the Undo tab in the ZMI or by simply checking the Visible check box and saving the form again.

Adding a tab is nearly as simple, but there is one extra step in the process: adding the Plone folder that you want to represent with the tab. To do this, log in to Plone and use the Add New Item drop-down list to add your folders in the Plone root. For instance, I've created folders with the following Id s, matching the tabs I want to add: finance , hr , it , legal , pm , salesmkt . Each of these items has a title, such as Sales and Marketing, and a description, such as Folder for Sales and Marketing Documents. After they are created, all of these folders must be published, so be sure to change their name.

With the target folders created within Plone, go back to the ZMI and navigate to the portal_actions object. Scroll to the bottom of the form; you will see a blank entry where you can add the first of your new tabs. The form fields match the fields described earlier, only without content. The first tab to add is the Finance tab because it is first in the alphabetical list of departments.

1. In the Name field, enter Finance .
   
   

2. In the Id field, enter finance .
   
   

3. In the Action field, enter string:$portal_url/finance .
   
   

4. In the Condition field, enter python: member .
   
   

5. In the Permission field, select View .
   
   

6. In the Category field, enter portal_tabs .
   
   

7. Check the Visible check box.
   
   

8. Press the Add button.
   
   

If you log in to your Plone site ”or reload the page you're viewing, if you're already logged in ”the Finance tab should appear at the top of your template. Clicking on the tab should display the contents of the Finance folder, as shown in Figure 5.11.

Figure 5.11. The Finance tab shows the Finance folder.

Continue adding new portal actions to represent the remaining tabs, and your Plone template will have all departments listed across the top, as shown in Figure 5.12.

Figure 5.12. All the new tabs, neatly in a row.

The tabs are displayed in the order in which they are entered. However, that doesn't mean you can't change the order after they're in the system. The portal _ actions form contains two buttons at the bottom: Move Up and Move Down. When the check box next to the Name field of a particular block is checked, this block becomes the active item. When it is active, you can move the block up or down. An example of a selected entry is shown in Figure 5.13, in which you can also see the Move Up and Move Down buttons.

Figure 5.13. A selected and activated entry.

Suppose that you want to rearrange the order of your department- related tabs, such as having the Sales and Marketing and Project Management tabs switch places in the display. To achieve this, you would check the box next to the Name field of the Sales and Marketing tab and then press the Move Up button. The Sales and Marketing tab and the Project Management tab switch positions because their positions have been switched in the portal_actions display.

These up and down actions are not limited to adjacent form blocks ”you can check the box next to the Name field for the Home tab and press the Move Down button several times until it is at the very end of the list. The Home tab then becomes the last tab across the top of your template, although that's not usually where one would find it. You'll also note that the position of the tabs is represented appropriately in the Navigation slot. As the order of tabs change, so does the order of the folders in the Navigation slot.

Customizing Logos and Other Images

The Plone logo in the upper-left corner of the template is nice and clean, but if you're creating your own site, you will want your own branding. Completely customizing the look and feel of your site is covered in Chapter 6, "Creating and Implementing a Custom Skin." This section gets your feet wet with asset replacement.

In the Plone template, the logo referenced in the template has an ID of logo.jpg . This does not mean that you need to use a JPEG or that your image file needs to be named logo.jpg ; it simply means that there's an object with an ID of logo.jpg whose contents you will be replacing. For example, the file called tb_main_boringlogo.gif is used as a logo image file.

To customize your logo, navigate in the ZMI to your Plone instance and then through the portal_skins object to the custom directory. Using the drop-down list, select Image and press the Add button. You will see a form with three fields: ID , Title , and File . Enter logo.jpg as the ID; add a title, if you want; and then browse your file system for the new logo image that you want to use. When the form is complete, press the Add button. You have placed this object in the custom folder, so Plone looks for the custom version of the logo.jpg object instead of the standard logo.jpg object (the Plone logo).

As you can see in Figure 5.14, the new logo is now used instead of the standard Plone logo. The same concept can be used to replace any image asset used in Plone. You can see a list of most image objects used in Plone templates by looking in the portal_skins object for portal_images within the ZMI.

Figure 5.14. New Logo, Thickbook.com, in use.

Note

Assets that add-ons use appear in other places within the portal_skins object. For example, if you install CMFBoard, the assets used in CMFBoard are in an object called cmfboard_images .