Personal tools
You are here: Home Documentation How-tos How to style navigation parent items like the current item
Support

Get Help

Join our chat rooms or support forums if you have more specific questions.

Plone Training
Learn how to design, build, and deploy a website in Plone through one of the numerous Plone training sessions around the world.
Find Plone training…
 
Document Actions

How to style navigation parent items like the current item

This How-to applies to: Plone 3.0.x, Plone 2.5.x, Plone 2.1.x
This How-to is intended for: Integrators, Customizers

A quick tip for changing the visual style of the navigation portlet so that parents of the current item have the same visual style as the current item.

By default, Plone only highlights the current item in the navigation tree, and doesn't apply any special styling to parents of the current item in the navigation tree.  If you are customizing the visual theme of Plone, you may want to change this behavior.  The most commonly requested change is to make parent items look like the current item.

Here's how.

 

Beginning with Plone 3.0, parent items have a CSS selector, ".navTreeItemInPath".  This makes it easy to apply styles to parent items. 

If you want the parents of a current item look like the current item itself, add the following CSS to your ploneCustom.css file or to a CSS file in your custom theme.

.navTreeItemInPath,
.navTreeCurrentItem {
    background-color: &dtml-globalBackgroundColor;;
    color: &dtml-globalFontColor;;
    border: &dtml-borderWidth; &dtml-borderStyle; 
            &dtml-globalBorderColor; !important;
}

See the master navigation tree CSS file at portal_skins>plone_skins>navtree.css for more of Plone's default navtree formatting.

 

Plone 2.5 and 2.1

Unfortunately, Plone 2.5 and below don't have this special CSS selector on parent items.  This limits the options for styling parent items in the navigation tree.  Still, it is possible to accomplish a similiar effect by modifying the file portlet_navtree_macro.pt as Kai Diefenbach explains

 

Change portlet_navtree_macro.pt, from:

   isCurrent node/currentItem;"    

to:

   isCurrent python: node.get('currentItem') or \
                     node.get('currentParent')"

 

Thanks to Kai Diefenbach for documenting these tips

!

by Jon Stahl last modified September 16, 2007 - 16:05
Contributors: Kai Diefenbach
All content is copyright Plone Foundation and the individual contributors.

2.1

Posted by Hendrik Bunke at May 28, 2008 - 15:19
At least in Plone 2.1.4 the names differ. So it is:

cur_item python:item.get('currentItem') or item.get('currentParent')

For any issues with the web site functionality, please file a ticket.

Please consult the policy on plone.org content if you want your content published on this site.

Servers and hosting by