Configuring The Portlets Showing In The Left Column

If you look at the original design sketch, you will notice that we had specified three portlets in the left column, also called the left_slots. We are going to look these over one by one and configure the portlets as needed to get the site looking like the design. Note that this will be for the site when it is not logged in (when you log in other portlets may be showing up):

Navigation

This is the traditional navigation menu, which we already have working the way we want, after we added content folders and changed the published status of various site objects. As long as we leave the portlet alone, this should be good as-is.

News

News is a portlet that comes with Plone, and which by default should show any news items published in the site. We did add news items earlier, so where is the news portlet? Let's take a look at where these portlets are configured.

In the ZMI, click on the root of your Plone site.

Look up at the top of the ZMI, and you should see about 8 tabs, one of which is called "properties". Click this to show the site properties screen, actually an important screen for you know about.

For now, let's concentrate on the portal slots, of which there are two by default. Here is a zoom in screenshot of what is showing up in each of the slots:

One is called left_slots and one is called right_slots. If you remember, we used the CSS to make the right_slot not appear in our skin. But also remember that CSS can only change the appearance of something, and the actual thing, in this case the news portlet, is actually still "there" - you just can't see it in the browser.

Before we make changes, let's make sure we understand what each of the default portlets actually does:

left_slots:

• here/portlet_navigation/macros/portlet - The mav menu we want, positioned to always be on the "top" of the left_slots.
• here/portlet_login/macros/portlet - The login portlet, which is a convenience device to let people key in userid and password without having to click login to sign in. We do not want this in our design.
• here/portlet_recent/macros/portlet - This is only for logged in users, and shows the title and links to recently added content. We will ignore.
• here/portlet_related/macros/portlet- This is only for logged in users, and shows the title and links to related content. We will ignore.

right_slots:

• here/portlet_review/macros/portlet - This is good for users that are reviewers of content submitted by others. We will move it to the left_slots but keep it low on the column.
  
• here/portlet_news/macros/portlet - Here is the news portlet, and it needs to be moved to the left_slots, in the second position.
  
• here/portlet_events/macros/portlet - Our site doesn't keep a calendar, so evenst are irrelevant. We will delete it our of the right_slots.
• here/portlet_calendar/macros/portlet - The little calendar that shows up on all default Plone sites, if there are events or not. We don't need it, so we will delete from the right_slots.

Now to make the changes

Go ahead and do the above, leaving the right_slots empty of any portlets. The left_slots will now look like this:

here/portlet_navigation/macros/portlet







here/portlet_news/macros/portlet







here/portlet_review/macros/portlet

When you have finished typing or cutting and pasting the changes, click on the "Save Changes" button.

Now check the results

The login portlet should be gone, with only the navigation menu and the news portlets showing in the left column.

Now we need to add a whole new portlet and make it appear.

Check Out Our Reports

Portlets often seem magical to a new Plone user, as there is no way to edit portlets in the Plone site setup menu. However, in the ZMI it is actually very easy to add content into custom portlets. Since mostly these are just little windows of text , images, or hyper-links, we call these static portlets. Here is how to make a new one:

In the ZMI, click on portal_skins

In portal_skins, find your skin named "a_new_skin" and click it.

We are not customizing an existing portlet, we are making it form scratch. The easy way is to do this is to add a new page templete using the "add" system.

Click on the down arrow on the pull down menu, locate the "Page Templete", select it, then click the "Add" button. Here is an example screen (note you should see your logo.jpg, ploneCustom.css, and main_template files in your skin already):

As soon as you add the new page tempate, you will be presented with a screen that asks you for and ID. Since you are adding and not customizing an object in Plone, it needs to know what to call this object.

In the ID field type in portal_static_reports.  I call it that because it is  1) a portal, 2) filled with static or non-dynamic  generated content, and 3) the topic is about your site reports.

Do not fill in anything in File, then click the "Add and Edit" button:

Once you have done this, you will looking at a sort of generic HTML page template. We are discarding this HTML, and adapting some from another portlet.

Now to change all the HTML out for some that will show what we want. Hit your browser's back button to once again be looking at the HTML code of the template.

Copy and paste the following to replace the entire code in the template:

<html xmlns:tal="http://xml.zope.org/namespaces/tal"



      xmlns:metal="http://xml.zope.org/namespaces/metal"



      i18n:domain="plone">



<body>







<!-- The static portlet -->



<div metal:define-macro="portlet" tal:omit-tag="">



<dl class="portlet" id="portlet-static-report">



<dt class="portletHeader">Reports</dt>



<dd class="portletItem odd">







<a href="reports">Click here</a> to check out our reports.







</dd>







<!-- the following are parts commented out that we are -->



<!-- not using, but that you may want in a future -->



<!-- static portlet. These different parts are treated -->



<!-- in different ways by the CSS, like in colors, etc -->







<!-- <dd class="portletItem even">Some content</dd> -->



<!-- <dd class="portletItem odd">Last item</dd> -->



<!-- <dd class="portletFooter">Footer Content</dd> -->



</dl>



</div>







</body>



</html>

Click on the "Save Changes" button.

To see the portlet in right_slots

Before we can check the results, we will have to tell Plone that we want the portlet we just created to show up as the third portlet in left_slots. To do this we must revisit the place in the ZMI that controls what portlet is in which slot:

In the ZMI, click the root of your website

Click on the "properties" tab at the top of the screen

Add this line "here/portlet_static_reports/macros/portlet" as the third portlet in the left_slots box:

here/portlet_navigation/macros/portlet



here/portlet_news/macros/portlet



here/portlet_static_reports/macros/portlet



here/portlet_review/macros/portlet

Now check the results

You will see three portlets, the third being your "Reports" portlet. Click on the hyper-link in the text and you will go to your reports folder.