Dalla versione 2.1, Plone usa regole dei CSS per mostrare le icone che appaiono nell'albero di navigazione.
Di default, le icone sono configurate secondo gli elementi portal_type dell'albero di navigazione.

Il principio di base è aggiungere un id nei tag <div> che definiscono gli elementi del primo livello nell'albero di navigazione.
Per far ciò, si dovrà personalizzare il template portlet_navtree_macro, che risiede in portal_skins/plone_portlets.
Sarà poi possibile identificare l'elemento di cui si vuole cambiare l'icona, ed applicare ad essa regole CSS specifiche.

Qui viene spiegato un metodo per assegnare un id ad elementi che sono al primo livello dell'albero di navigazione.
Bisogna comunque tener presente che questo metodo non garantisce un id unico per ogni elemento, come viene elaborato dal titolo dell'elemento.

In portlet_navtree_macro, bisogna cambiare la linea seguente:

<div tal:attributes="class item_type_class">

Sostituendola con:

<div tal:attributes="class item_type_class;
                         id python:test(level == 1,'level_%s_%s' % ( level, nomalizeString(item['Title']) ))">

Il template dovrebbe ora apparire così:

<metal:main define-macro="nav_main">
<tal:navitem repeat="item children">
<li class="navTreeItem visualNoMarker"
    tal:define="parent_shows_children show_children|nothing;
                children item/children|nothing;
                cur_item item/currentItem;"
    tal:condition="python: (not item['no_display']) and (cur_item or parent_shows_children or children)">

    <tal:level define="item_type_class     python: 'contenttype-' + normalizeString(item['portal_type']);
                       item_wf_state_class python: 'state-' + normalizeString(item['review_state']);
                       ">

    <div tal:attributes="class item_type_class;
                         id python:test(level == 1,'level_%s_%s' % ( level, nomalizeString(item['Title']) ))">
        <a tal:condition="cur_item"
           tal:attributes="href item/absolute_url;
                           title item/Description|nothing;
                           class string: $item_wf_state_class navTreeCurrentItem visualIconPadding"
            tal:content="item/Title|nothing">
            Selected Item Title</a>
        <tal:children condition="python: parent_shows_children or children">
        <a tal:condition="not: cur_item"
           tal:attributes="href item/absolute_url;
                           title item/Description|nothing;
                           class string: $item_wf_state_class visualIconPadding;"
            tal:content="item/Title|nothing">
            Unselected Item Title</a>
        </tal:children>
    </div>

    <ul tal:attributes="class python:'navTree navTreeLevel'+str(level)"
        tal:define="show_children item/show_children| python:True;
                    level python:level+1;"
        tal:condition="python: (show_children or isNaviTree) and children">
        <metal:recurse use-macro="here/portlet_navtree_macro/macros/nav_main"/>
    </ul>
    </tal:level>
</li>
</tal:navitem>
</metal:main>

È ora possibile riscrivere facilmente l'icona standard aggiungendo una regola al proprio foglio di stile (in ploneCustom.css o in un foglio di stile registrato con lo strumento portal_css).

Nel seguente frammento, viene cambiata l'icona della carella Members:

#level_1_members {
  background-image: url('document_icon.gif');
}

E questo è tutto.

Questo documento è stato realizzato da:

• Alice Narduzzo

Fonti e contributi:

Questo how-to è una libera traduzione del testo originale How to customize specific icons in the navigation tree.

Nota: Questo tutorial si riferisce alla versione Plone 2.1.x.