In ThemeBuilder the sidebar is added as one macro that pulls in the default Confluence content for this area. If you want to change the sidebar then you need to rebuild the content in a new custom panel.
In ThemeBuilder panel editor
Then edit the ‘with-sidebar’ panel to replace the macro that inserts the Confluence sidebar with your new ‘custom-sidebar’
Select and remove the code
Use the ‘Insert Macro’ button to browse for the ‘Builder Panel’ macro
Add the name of your new sidebar to the ‘Panel’ field
Click ‘Insert’ and check that the new macro is in the correct position, replacing the ‘panel-element’ macro.
See Scrolling Sidebar for additional code you may want to add here.
Click ‘Apply’ to save those changes and then open a new browser tab or window to view a page that has this skin applied.
The left hand sidebar is now blank and ready for you to add your custom content.
See ThemeBuilder Debugging Tools for help with this section.
Now you have a blank space to work with you can add custom content to the sidebar. By adding ‘?skin=root’ to the page url we can flick back to the default ThemeBuilder skin to see the existing content and decide what we want to add or exclude. You could also refer to a print or screenshot of the default page.
To have a scrolling sidebar you must wrap your content in this HTML div code so it will use the Confluence default functionality.
This example will show you how to add a Pagetree menu and the links to Space Tools, Pages and Blogposts.
The Pagetree macro displays a simple vertical navigation that has many configurable parameters including:
Used here with the parameters ‘root=@home’ and ‘searchbox=true’ it provides a useful left hand navigation for a custom sidebar.
Finally add some CSS to space the Pagetree menu. See Custom CSS page if you need help with this.
You can use the ‘web-section’ macro to place the sidebar navigation.
This example uses a styled <hr /> for spacing between the custom sidebar elements.
The code will be
For the ‘Space Tools’ link you may want to only show this to certain users or groups, so this example will use the ‘builder-show’ macro to only display that link to ‘confluence-administrators’. You can use any group in Confluence with builder show or hide, as well as user, decorator, mode and many others. The ThemeBuilder debug comments will show many of these values in the source of a page.
The process here is similar to the one used to add the Pages and Blogs links, but we are going to wrap the menu macro in another macro that will only show the contents within on the specified condition.
Insert the macro and it should look like this.
(don't forget, if you have problems with the formatting of panel code you can use the 'Prettify' button to re-indent everything)
Click 'Apply' on the panel editor, go to browse your page, and you will see the 'Space Tools' link has been added.
Browse the page as a user not in the target group to confirm that the logic is working.
This is just a snapshot of the changes that can be made in this area. By combining menu macros and CSS styling you can completely change the way this area is used and valued within Confluence. If you have any suggestions or tutorials we can add please let us know.