Attention

This document was written for an unsupported version of Plone, Plone 2.1.x, and was last updated 898 days ago.

For more information, see the version support policy.

To learn how to upgrade to the current version of Plone, read the upgrade manual.

Customizing Navigation Icons

by Graeme Pyle last modified Dec 06, 2009 09:27 PM
How-to customize the icons used for items in the navigation portlet in Plone 2.1 and 2.0

For Plone 2.1

  • Create the following "Script (Python)" objects in "plone_skins/custom"
  • getIconStyleBlob

try:

name="customIcon_"+item['path'].replace("/","")
icon=context.restrictedTraverse(item['path']).customIcon

return """

."""+name+""" a {
background-image: url(http://www.adaptix.co.za/adaptix/"""+icon+""");
background-repeat: no-repeat;
background-position: 0% 3px;
}
"""

except:
return ""

getIconStyleName

style="contenttype-"+context.plone_utils.normalizeString(item['portal_type'])

try:
if (hasattr(context.restrictedTraverse(item['path']),'customIcon')):
style="customIcon_"+item['path'].replace("/","")

except:
None

return style
  • Customize "portal_skins/plone_portlets/portlet_navtree_macro" as below
  • ***************
    *** 6,14 ****

    <tal:level define="level options/level|python:0;
    ! item_type_class python: 'contenttype-' + here.plone_utils.normalizeString(item['portal_type']);
    item_wf_state_class python: 'state-' + here.plone_utils.normalizeString(item['review_state']);
    isNaviTree options/isNaviTree | nothing;
    ">

    <div tal:attributes="class item_type_class">
    <a tal:condition="item/currentItem"
    --- 6,18 ----

    <tal:level define="level options/level|python:0;
    ! item_type_class python: here.getIconStyleName(item);
    item_wf_state_class python: 'state-' + here.plone_utils.normalizeString(item['review_state']);
    isNaviTree options/isNaviTree | nothing;
    ">

    +
    +
    + <style type="text/css" tal:content="python: here.getIconStyleBlob(item)"/>
    +
    <div tal:attributes="class item_type_class">
    <a tal:condition="item/currentItem"
  • Add "customIcon" string properties to each of the items for which you want custom icons. For example, set "customIcon" on the document "client" to be "user.gif" (). See "portal_skins/plone_images" for built-in icons, or add your own to "portal_skins/custom"
  • For Plone 2.0

    • Customize "portal_skins/custom/portlet_navigation" as below:
    <                                  tal:attributes="src string:${here/portal_url}/${sibling/getIcon};
    ---
    > tal:attributes="src string:${here/portal_url}/${sibling/getCustomIcon};
  • Create the "Script (Python)" object "plone_skins/custom/getCustomIcon" with the following content:
  • if (hasattr(context.aq_explicit,'customIcon')):
    return context.customIcon
    else:
    return context.getIcon()
  • Add "customIcon" string properties to each of the folders for which you want custom icons. For example, set "customIcon" on the folder "clients" to be "user.gif" (). See "portal_skins/plone_images" for built-in icons, or add your own to "portal_skins/custom"
  • Please contact me at graeme@raspberry.co.za if you have additional comments or suggestions. For support, please use the Plone forums.


    Contribute

    Something wrong or out of date? Anybody can edit or create a new article in the knowledge base. Simply create an account on this site, log in, and click the Edit button to contribute.