How do I change the · and > characters in the Confluence page tree?

[Robert Lauriston]

My users don't recognize the · and > characters as indicating an expandable / collapsible tree. How can I change those to +/- toggles like the ones in K15t's docs?

http://www.k15t.com/display/HTML/Users+Guide

I'm using 5.1.4 installed with the Documentation theme with the Page Tree option disabled and this macro instead:

{pagetree:root=documentation library|startDepth=1|expandCollapseAll=true}

[CharlesH · Accepted solution]

There is an Atlassian Jira ticket which describes how to override the new > and . images and put back the previous + and - images. You need to put the following CSS into the space stylesheet:

.expand-control-icon.expanded, .ui-tree li.opened>.click-zone, #children-section.children-showing a.children-show-hide.icon, .icon-section-opened {
background-image: url('<Server Base URL>/images/icons/tree_minus.gif') !important;
}
.expand-control-icon, .ui-tree li.closed>.click-zone, #children-section.children-hidden a.children-show-hide.icon, .icon-section-closed {
background-image: url('<Server Base URL>/images/icons/tree_plus.gif') !important;
}

I found that making the URL relative worked fine (so just delete the <Server Base URL> portion).

Jira ticket: https://jira.atlassian.com/browse/CONF-29561

[Robert Lauriston]

Thanks! This was almost as stupid as the round logos.

[Matthew J. Horn]

To override CSS, you can edit the style in the admin panel: Look & Feel > Stylesheet. Add a new entry, and be sure to add "!important" to the end so that it overrides the built-in CSS. For example:

.body {

font-size: 12 !important;

}

[Robert Lauriston]

Seriously, no one can tell me how to do this? Users find this very confusing, they don't recognize those as expand / collapse toggles.

[Robert Lauriston]

Poking around in the source for the linked page, I guess the following is the CSS that does it. Where would I put CSS to override pagegree-resources.css? Or would I have to hack the plugin?

div.plugin_pagetree div.error{padding-left:15px;}
div.plugin_pagetree ul.plugin_pagetree_children_list_noleftspace{margin-left:0;padding-left:0;}
div.plugin_pagetree ul.plugin_pagetree_children_list{list-style-type:none;margin-bottom:0;padding-left:0;}
div.plugin_pagetree ul.plugin_pagetree_children_list li ul.plugin_pagetree_children_list{padding-left:16px;}
div.plugin_pagetree ul.plugin_pagetree_children_list li,div.plugin_pagetree ul.plugin_pagetree_children_list li div.plugin_pagetree_children_container{clear:left;overflow:hidden;width:100%;}
div.plugin_pagetree ul.plugin_pagetree_children_list li .plugin_pagetree_children_content{float:left;width:85%;text-decoration:none;}
div.plugin_pagetree a:link{text-decoration:none;}
div.plugin_pagetree a:hover{text-decoration:underline;}
div.plugin_pagetree ul.plugin_pagetree_children_list li .plugin_pagetree_childtoggle_container{float:left;width:15px;}
div.plugin_pagetree .plugin_pagetree_childtoggle_container{padding-bottom:2px;}
div.plugin_pagetree ul.plugin_pagetree_children_list li{padding:2px 0;}
div.plugin_pagetree ul.plugin_pagetree_children_list li:last-child{padding:2px 0 0 0;}
.plugin_pagetree_childtoggle_container .icon-minus{background:transparent url(/s/en_GB-1988229788/4215/27aa6aff3fb0e9e5138a84da80ecdaa533a08846.6/2.1.5/_/download/resources/com.atlassian.confluence.plugins.pagetree:pagetree-resources/../../../images/icons/tree_minus.gif) no-repeat scroll 0 4px;}
.plugin_pagetree_childtoggle_container .icon-plus{background:transparent url(/s/en_GB-1988229788/4215/27aa6aff3fb0e9e5138a84da80ecdaa533a08846.6/2.1.5/_/download/resources/com.atlassian.confluence.plugins.pagetree:pagetree-resources/../../../images/icons/tree_plus.gif) no-repeat scroll 0 4px;}
.plugin_pagetree_childtoggle_container .icon-square{background:transparent url(/s/en_GB-1988229788/4215/27aa6aff3fb0e9e5138a84da80ecdaa533a08846.6/2.1.5/_/download/resources/com.atlassian.confluence.plugins.pagetree:pagetree-resources/../../../images/icons/tree_square.gif) no-repeat scroll 0 4px;}