You are here: Home / Documentation / How To's / Using Classic Portlets With Examples

Using Classic Portlets With Examples

by klotzj27 — published Oct 01, 2009 01:20 PM, last modified Aug 16, 2016 10:50 AM
Portlets, as they are commonly used, can display navigation, events, current news items, among other built-in things. However, if you have the need for a portlet that displays something not covered by Plone 3.0's built-in portlets you can do a little customization using classic portlets. Classic portlets are the old way Plone used to handle portlet creation and although they offer flexibility can affect site performance negatively so should be used judiciously.

THE REQUEST

-In this example a user request a fairly static, rollover menu originating above the navigation portlet on the page.

 

null

 


THE PLAN

To create this for the user we are going to create a classic portlet, its associated page template, and some css logic to handle the rollover on hover logic.


THE EXECUTION

Part 1 - Create a classic portlet

- Click manage portlets

- Click the "Add portlet..." dropdown and select "Classic Portlet"

NOTE: If you are unfamiliar with portlet creation please read THIS

- Add the name of the page template you are going to create to the template field... in this case we will add "quicklinks.pt"


Part 2 - Create the page template

- Navigate to the ZMI

- Navigate to portal_skins/custom

- Add a "Page Template" in the dropdown in the upper right corner next to the "Add" button

- Give the page template the name "quicklinks.pt"

- Once the page template has been created you will need to click on it to edit it

Add the following page template code:

<html>
<body>
<div id="quickLinks" metal:define-macro="portlet">
<ul>Quick Links
<div id="hiddenlinks">
<li><a href="http://www.google.com">Stafford Loan Processing</a></li>
<li><a href="http://www.google.com">Parent Loan Processing</a></li>
<li><a href="http://www.google.com">Perkins Loan Processing</a></li>
<li><a href="http://www.google.com">Nursing Loan Processing</a></li>
<li><a href="http://www.google.com">Satisfactory Academic Progress</a></li>
</div>
</ul>
</div>
</body>
</html>

-Notice how you must include the statement 'metal:define-macro="portlet"' around whatever you want your classic portlet to render

-Make sure you change the the href tag of the links and the link titles

-Save this... and now where we told our classic portlet is located it will render our new page template... this is because we told our classic portlet to look for quicklinks.pt in the template field 

 


Part 3 - Create the CSS that will implement the rollover effect

-Go into ploneCustom.css in portal_skins/custom and paste the following in:

#linksPortlet {
background-image:URL(arrow.gif);
background-repeat: no-repeat;
background-position: right center;
border: solid 1px;
position:relative;
font-size: 1.1em;
text-transform: uppercase;
}

#linksPortlet ul:hover #hiddenlinks,
linksPortlet ul #hiddenlinks:hover
#linksPortlet:hover #hiddenlinks{
display:block;
right:-171px;
top:-1px;
position:absolute;
border: solid 1px;
background-color: white;
width:165px;
text-decoration:none;
}

#hiddenlinks {
float: right;
display:none;
position: relative;
padding: 2px;
}

#hiddenlinks li {
list-style-type: none;
text-transform: none;
border-bottom: dashed 1px;
}

#hiddenlinks li:hover{
background-color:orange;
}

- This uses CSS to hide the links unless they are hovered over thus creating a CSS-only rollover effect

The new rollover menus we just created look like this:

 

null

 

NOTE: You may style the rollovers however you wish if this very plain design doesn't work for you

 

INTERNET EXPLORER 6 FIX

-Since IE6 is the bane of web developers existence hover events only work on anchor tags and have erractic behavior in this delightful browser. To make the rollovers work in IE6 we must add a conditional comment in our page template, as well as a javascript to make our rollovers work correctly. Check out THIS tutorial to find out how to do this.

 

With a little extra styling our rollover menus now look particularly awesome. See below:

 

null
Navigation