Search the Confluence 4.1.x Documentation:

Index
Downloads (PDF, HTML & XML formats)
Other versions

This documentation relates to Confluence 4.1.x
If you are using an earlier version, please view the previous versions of the Confluence documentation and select the relevant version.
Skip to end of metadata
Comment: Clarified terminology "layouts"
Go to start of metadata

You can include a left-hand navigation sidebar (table of contents) in your Confluence space. There are two ways to do this:

  • (tick) Recommended: Use the Documentation Theme – The Documentation theme provides the left-hand navigation sidebar that you see in this documentation. Please go to the page that tells you how to configure the Documentation theme.
  • Customise the Space Layouts — This is an alternative method (documented below) that is more complex to set up than the Documentation theme and requires more maintenance with Confluence major release upgrades.
 

(warning) The information on this page does not apply to Confluence OnDemand.

Notes to Read before you Start

Please take note of the following points before you use the method documented on this page:

  • Reapply customisation whenever you upgrade Confluence. Every time you upgrade Confluence, you must reapply the layout customisations described on this page. When you upgrade to a new major Confluence version (such as moving from Confluence 2.9.x to Confluence 2.10.x or from Confluence 3.0.x to Confluence 3.1.x) you will need to reapply the layout customisation. See instructions below.
  • Check your wiki permissions. To customise a space layout as described below, you must be a space administrator in the given space and you must be a system administrator on the Confluence site. See the overview of permissions and the glossary entries for space administrator and for Confluence administrator and system administrator.

Customising your Space Layouts to Add a Navigation Sidebar

Screenshot: A left-hand navigation bar resulting from customising the space layouts



Follow the instructions below to add the navigation sidebar to your Confluence space.

Step 1. Create the TreeNavigation Page

First, you will create a Confluence page containing the pagetree macro. This is just a normal Confluence page. The only slight oddity is that it should reside at the root of your space, instead of under the space's home page.

Follow these instructions:

  1. Go to the 'Space Pages' view for the current space. To do this:

    • Go to a page in the space and choose Browse > Pages.
    You are now at the 'root' level of your space. The 'root' level contains pages that are added above the space's home page, not as children of the home page.
  2. At the root level of the space, create a page named 'TreeNavigation'.

  3. On the page, insert the following text:

  4. Now decide if you want to add extra functionality to your page tree. By default, using the code above, the page tree will use the home page of the space as its root. You can choose to:
    • Specify a different root for your page tree.
    • Add a search box at the top of the tree.
    • Allow the viewers to expand and collapse the whole tree.
    • Control other aspects of the display.
      For more information, read about the Pagetree macro.

Step 2. Change the Space's Page Layout

Now you will change the space's page layout, to include the above page on the left of every web page displayed.

  1. Choose Browse > Space Admin.
    (info) Space Admin is displayed only if you are a space administrator for that space or you are a Confluence system administrator.

  2. Make sure the Confluence Default theme is selected from the Themes menu.
  3. Click Layout in the Look and Feel section.
    Note: The layout option is only displayed if you are a system administrator on the Confluence site.
  4. Click Create Custom in the Page Layout section.

  5. In the layout, locate the VIEW section, and find this code:

  6. Replace the above code block with this code:

  7. If you want to, you can change the table title in the above code from 'Table of Contents' to something else. For example, it might say 'Confluence Documentation'.
  8. Save the updated layout.

Reapplying the Customisation on Upgrade

When you upgrade to a new major Confluence version (e.g. from Confluence 2.9.x to Confluence 2.10.x or from Confluence 3.0.x to Confluence 3.1.x), you will need to reapply this customisation.

Reason:
The new Confluence version may contain updates to the space layouts. Because you have customised the space layouts, Confluence will not overwrite your customisation. So your space will not get the latest updates until you set the layout to default and then reapply your changes.

Here's how to do it:

  1. First make a copy of your customised code, if you have changed it from the code above:
    • Go to Space Admin, click Layout and edit the customised page layout (as created above).
    • Copy the section of code that inserts the customised left-hand navigation panel.
    • Close the page layout.
  2. Click Reset Default next to Page Layout, to set the page layout back to default. This will bring in the new code for the upgraded version of Confluence.
  3. Create a custom layout as described in step 2 above, and reinsert the custom left-hand navigation code.
  4. Save the updated layout.
RELATED TOPICS

Configuring the Documentation Theme
Customising Site and Space Layouts
Upgrading Customised Site and Space Layouts
Example Confluence Designs

87 Comments

Hide/Show Comments

  1. Dec 04, 2008

    patrick dinneen

    Will the sidebar always have the look and feel of the sample above (drill down for children etc) or can I customize it ( have rollover links, tables, headers etc)

    Thanks,

    Patrick

    1. Dec 09, 2008

      Giles Gaskell [Atlassian Technical Writer]

      Hi Patrick,

      Thanks for your query. It may be possible to customise the Navigation Sidebar, for example, text colours and size. However, other features are not supported at this time.

      Kind regards,

      Giles Gaskell
      Technical Writer
      ggaskell@atlassian.com
      ATLASSIAN - http://www.atlassian.com

  2. Dec 16, 2008

    Anonymous

    Is it possible to have a test for existence for the TreeNavigation page added? I can't figure out how to do this. If we make this the standard for the site layout, any page missing the page gets an error message and allocates a blank section.

    If TreeNavigation does not exist, simply drop down to showing $body.

    It is not clear how to do this from the documentation.

    1. Dec 19, 2008

      Anonymous

      I agree this would be a very good addition. In our case we use different spaces for new versions of our user manuals. Every time we create a new version we copy the latest manual space to a new space but we have to re-apply the above procedure every time. If we could do what the comment above suggests there would be no action required next to the space copying.

      1. Dec 19, 2008

        Azwandi Mohd Aris [Atlassian]

        Hi,

        The checking is actually done in the code, that is the reason you get the "Page Not Found" error in a red box. You can try see the code for velocimacro

        which is defined in macros.vm that resides in <confluence-install>\confluence\template\includes directory. If you are comfortable with Velocity, you can try modify it to not display the "Page Not Found" error, at least.

        Hope that helps,
        Azwandi

        1. Feb 11, 2010

          Christian Holmboe

          To get this to work just modify the initial if-statement (step 6 in the instructions above):

  3. Dec 23, 2008

    Anonymous

    While I love what i am seeing so far, I am stymied when I try to do the change you discuss here. When I get to Step 2.2, namely "Click 'Layout' under the 'Look and Feel' section", I get message:

    "You can not customise the site look and feel while a theme is active. You must first disable currently configured theme"

    How do I address this?

    1. Dec 23, 2008

      Azwandi Mohd Aris [Atlassian]

      The custom layout feature is not supported in all themes. Amongst all of the bundled themes, only the Confluence Default Theme has this feature. You may need to switch your current theme to the Confluence Default Theme to see further options.

      1. Feb 05, 2009

        Anonymous

        Nope that didn't do it - the message is still there...

        1. Feb 06, 2009

          Azwandi Mohd Aris [Atlassian]

          Ensure that both global and space theme is set to Confluence Default Theme. Does that help?

          1. Feb 09, 2009

            Anonymous

            Nope. I changed all of the themes of all spaces to default and that didn't do it either.

            1. Feb 09, 2009

              Anonymous

              I have the same problem with the "You can not customise the site look and feel while a theme is active. You must first disable currently configured theme." error and I've set the global and space them to the default theme.

          2. Aug 12, 2009

            Anja Gruss

            same here. all spaces are set to Default Theme, "You can not customise the site look and feel while a theme is active. You must first disable currently configured theme."

            Are there any further options (Conf 3.0.0_01)

            1. Aug 13, 2009

              Zed Yap [Atlassian]

              Hi Anja

              same here. all spaces are set to Default Theme, "You can not customise the site look and feel while a theme is active. You must first disable currently configured theme."

              Are there any further options (Conf 3.0.0_01)

              You might want to try to change the Global theme to default Theme and see if that helps. For more information on Global Theme, please refer to this documentation:

              Hope that helps.
              Best rgds,
              Zed

              1. Aug 13, 2009

                Anja Gruss

                problem was solved. Though both global as well as space themes showed they were set to default, it seems they were in truth linked to a no longer existant theme. In the end I set both global and space themes to Clickr, changed back to Default, disabled clickr (just to be sure) and then it worked.

  4. Jan 12, 2009

    Christian Bering

    I've succesfully added a navigation tree using the instructions, but now the TreeNavigation page is visible as a page in the navigation tree itself. This doesn't seem to be the case on this page, which makes me think that there is a way to hide it?

    1. Jan 12, 2009

      Sarah Maddox [Atlassian Technical Writer]

      Hallo Christian

      By default, the pagetree as described above will show all pages which are under the space's "Home" page. It will not show pages which are at the root level of the space. Take a look at step 1.1 above, to see how to add your navigation page at the root level so that it does not show.

      If your space hierarchy is different, you may need to create a top-level page and move all your pages underneath it, except for the ones which you don't want to show in the table of contents.

      I hope that helps (smile)

      Cheers — Sarah

  5. Jan 13, 2009

    Brian Carr

    I am curious about how the "All Versions" section that appears above the "Confluence 2.10 Documentation" pagetree in the sidebar. It appears that those links point to other spaces, but I'd like to know how to enable that sort of control in my space. It looks like another macro (similar to pagetree) that is being used. Any pointers there?

    1. Jan 13, 2009

      Sarah Maddox [Atlassian Technical Writer]

      Hallo Brian

      A touch of magic (wink)

      • For each product, there is a page in the Inclusions Library of the ALLDOC space. The page lists all the versions of that product's docs, linking to the relevant spaces. For example, here's the page for confluence and the page for Crowd.
        (info) We put the 'all versions' page in ALLDOC because the page is used in a number of different spaces, via the 'include' macro. For example, the 'all versions' page may be included into:
        • Every doc space (each version) for the product concerned, e.g. DOC, CONF29, CONF28, CROWD, CROWD013, CROWD012, etc.
        • The Enterprise Hosting doc space.
        • Any others where useful.
      • In each doc space, there is a page called "TreeNavigationVersions", like this one or this one, which copies in the content of the above 'all versions' page.
      • For each doc space, the space's page layout now includes two pages instead of just one:
        • The 'TreeNavigation' page, as already described on the page above.
        • The new 'TreeNavigationVersions' page.

      Here's our page layout as it is currently for the DOC space:

      This is a good question (star) so I've added a page in case other people would like to know the answer too: Adding an All Versions Section to your Navigation Bar.

      Cheers — Sarah

      1. Jan 14, 2009

        Brian Carr

        Sarah,

        Excellant! I was able to get that to work. One final question, and I could probably find the answer on my own (if I wasn't so lazy). But in the TreeNavigationVersions that you link above, you are using something (in addition to the include macro) to group the content of the included page under a collapsable control or "twisty". I see that in use a lot in your various spaces. Any additional "magic" you can let me in on (wink)

        Thanks!

        1. Jan 14, 2009

          Sarah Maddox [Atlassian Technical Writer]

          Hallo Brian
          That's another good question (green star) We use the {expand} macro. It's a 'user macro', which means that you can add it to your Confluence site by adding the code into the 'User Macros' section of your Confluence Administration Console. The details are on the Expand macro's documentation page. I'll add this information to my new page too.
          Cheers — Sarah

  6. Feb 06, 2009

    Brian Carr

    It's me again, and I have one more question. I really like using the {toc} macro as it displays the contents of the current page. My hope was to follow instructions similar to what you have listed above to add a link to a page which includes the {toc} macro so that in addition to allowing me to navigate the space, I could also navigate the contents of the current page.

    So, I created a new page (at the root level) named "DocumentTOC" and it currently contains the following code:

    And when I save that page, it pretty much shows nothing (which is what I would expect since the page "DocumentTOC" doesn't actually contain anything.

    Next, I added a few lines of my own to the page layout (right above the DIV for the TreeNavigation page):

    So, now I get the little section that shows "Document Contents" with the pretty line, but nothing shows up underneath. It makes sense, since the page that I link to doesn't really contain anything. The question is, is there something that I can add to the "DocumentTOC" page that will allow the contents of the current page to be rendered by the {toc} macro?

    I tried doing something like this in "DocumentTOC":

    But that just resulted in errors (because it could find the page named "@self").

    I am trying to get it to where I can always have a document toc included with every page, without having to actually add it to the page itself. Does this make sense? Am I crazy?

    (please don't answer that)

    1. Sep 02, 2009

      Anonymous

      I faced the same problem. But finally found a solution:
      Just use

      instead of

      That will render the Macro directly without that page DocumentTOC, which can be deleted of course.

      1. Nov 10, 2009

        Anonymous

        Thank you for this tip.  This is really cool.  I have some really long pages with docs, so having a table of contents on the left is quite helpful.  Formatting kind of sucks right now, but at least it's there.

    2. Jun 15, 2011

      Mike Pearson

      Thanks for this! It's ALMOST exacly what I need.

      ...only problem is that the sidebar is not fixed.  It scrolls with the page, so in a long document, you quickly lose sight of the navigation menu.

      Any tips to set it up like this page (the confluence user doc pages)? i.e. With the sidebar fixed in place (with it's own scroll bars if needed), while the main content div can scroll independently..

  7. Mar 19, 2009

    Pedro Martello

    Thanks! this is a great customization to the page layout.

    We made a couple of additional changes to it to allow the sidebar to be resizable via drag operations. It requires referencing two additional jquery modules - ui.mouse and ui.resizable. You may have to adjust the paths for those below, depending on the root of your confluence installation. [courtesy of http://www.kleineikenscheidt.de/stefan/archives/2008/12/confluence-resizable-navigation-tree.html]

    We further modified the recipe on Stefan's site to incorporate two additional features:

    1) we removed the dependency on the homeless NavigationTree page at the root of each space by forcing the velocity engine to render the confluence macro directly.This makes it easy to change the Global layout of the entire Confluence instance to include the sidebar since each space no longer needs to have that homeless page.

    2) we implemented the cookie behavior Stefan proposes in his original article, though without using the jquery.cookie plugin. This makes the width of the sidebar persist for the duration of your session.

    Here is our modification:

    1. May 05, 2009

      Jorge Miguel Correia

      Thanks,

      it looks better and doesn´t need the homeless TreeNavigation Page (smile)

    2. Jun 15, 2009

      Anonymous

      Hello,

      thanks, this proposal works fine, but only in Opera and Firefox.

      In Internet Explorer (tested with 7 and 8, even in compatibility mode), when I change the width of the tree navigation bar, the width is increased. But the height is cropped so the tree is not completely visible. The vertical bar is shown at the old location. In case the width is reduced the vertical bar even disappears so it can never be increased again.

      For the meantime, I added a simple browser check:

      Any ideas how to solve this problem?

      1. Jun 24, 2009

        Anonymous

        Hi,

        This new pagetree works great but I have one question: How can I set a maximum width for both the normal resizable and the IE fixed one?

        I found the following option for resizable:

        $('.selector').resizable({ containment: 'parent' });

        but I'm not really a JS wizard. Where would I insert this and how so that it's used for the normal and the IE fix?

        Thanks.

        1. Jun 24, 2009

          Anonymous

          Ok, I've been trying some more and ive seemed to fix some of it using maxWidth.

          Only problem with this is that whenever I click the handle at maxwidth and move it a bit, the whole thing doesn't grow bigger but it gets a "left: 10px;" stacking everytime I do, making the whole div move over my page. Also this doesn't fix my maxwidth in IE yet, anyone that can help me with this?

          1. Jul 24, 2009

            Anonymous

            I merged all the great codes proposed above for making a fixed with navigation sidebar. I prefer using pixels instead of percentage because i think it is better for the eye, when the side bar don't constantly change in size.

            Thx for all the great proposals!

  8. Mar 16, 2009

    Anonymous

    Does the basic side bar navigation tree instructions above work for user spaces ? they seem to behave differently...

    1. Mar 18, 2009

      Zed Yap [Atlassian]

      Hi,

      As far as I know, the basic side bar navigation as mentioned above is applicable to user spaces. Perhaps, you might want to clarify more on this?

      Hope that helps

  9. Mar 23, 2009

    Anonymous

    When I click on the link on the navigation bar, it always opens a new page. How to make the navigation bar stay on the left side of page, instead of opening a new page?

    1. Sep 25, 2011

      Azwandi Mohd Aris [Atlassian]

      Unless there is some customisation effort to use HTML IFrame, AJAX interface or etc., this seems to be impossible. However, the Page Tree Macro should tell you where you are - it will expand the tree and highlight the position of the current page in the page tree.

  10. Apr 20, 2009

    Lars Sjögren

    When applying this layout, it seems as if the width of the left navigation tree varies depending on what page I look. I try different values for the width of the <td> for the nav tree and the wiki content, but I see no difference in appearance. Any advice to what I have done wrong, or to what I can do differently?

    1. Apr 22, 2009

      Arie Murdianto

      Hi,

      Please give a try to edit the table by adding attribute width. The HTML should be like as follow:

      <table cellspacing="2" cellpadding="5" width=100%>

      Cheers,

  11. May 14, 2009

    Anonymous

    Hi,

    I am trying to add

    <span style='font-size:1px;'>&nbsp;</span>
    <span style='font-size:1px;'>&nbsp;</span>
    macro around the
    .But the title shows up above the roundrectangle.How can I handle this? Also is there a way to hide the treenavigation page from the users when they try to browse pages

    1. May 19, 2009

      Arie Murdianto

      Hi,

      I am not too sure on the first question, perhaps you can explain more detail. Regarding the second question, you can do that by inserting an if statement before copying the provided script on this page. Using $action object which is accessible via Confluence, you can get the user who is currently accessing your Confluence. You may want to see the following modified script:

      #if($action.getRemoteUser().getName() == "armur")
        #if ($action.isPrintableVersion() == false)
<style>
.spacetree * ul{
padding-left:0px;
margin-left: 0px;
}
.spacetree * li{
margin-left: 5px;
padding-left:5px;
}

</style>

<table cellspacing="2" cellpadding="5">
<tr>
<td valign="top" align="left" width="22%" bgcolor="#F9F9F9" class="noprint">
<div class="tabletitle">Table of Contents</div>
<div class="spacetree">
#includePage($helper.spaceKey "TreeNavigation")
</div>
</td>
<td valign="top" align="left" width="78%" class="pagecontent">
<div class="wiki-content">
$body
</div>
</td>
</tr>
</table>
#else
<div class="wiki-content">
    $body
</div>
#end
#end

      1. Jun 18, 2009

        Rene Kermici

        Hi,

        I have a similar problem with the navigation bar. My users wish to be able to activate or deactivate the navigation bar while browsing.
        Have anyone suggestions how this could be possible?

        1. Aug 11, 2009

          Zed Yap [Atlassian]

          Hi Rene,

          I have a similar problem with the navigation bar. My users wish to be able to activate or deactivate the navigation bar while browsing. Have anyone suggestions how this could be possible?

          I have a mere suggestion, you might want to create button and when you click on it you will be able to hide the Navigation Sidebar.If you are ok with that, please try the example code shown below:

          1. Paste the following code to the page layout via Space admin >> layout >> page:

          hope that helps.
          Best rgds,
          Zed

  12. May 14, 2009

    Anonymous

    Hi,

    (In relation with the above comment) Include page tree macro within a roundrect macro

  13. May 19, 2009

    Anonymous

    Hi Arie,

    Thanks for the reply.

    My first question was: I am trying to include the pagetree within a roundrect macro. But the title, "Table of contents",appears above the roundrect macro with the horizontal ruler.I tried to comment the div tag for title and include in the wiki-markup directly. This works fine except, the horizontal bar does not show up. I used "four dashes" to represent the horizontal bar but then I cannot change its color.Trying to customize it through the CSS. Still working on that.But is there a way to work around this?

    Thanks in advance.

    1. Aug 11, 2009

      Arie Murdianto

      Hi,

      Could you please log this issue to our support system:

      It would be easier to investigate your issue there.

      Cheers,

  14. Jun 17, 2009

    Tim McDougall

    Hello,

    I was curious how you (Atlassian) manage all of the documentation on the sidebar.  It looks like you have different spaces set up for each version of Confluence, and the current documenation is always under the spacekey "DOC".

    1.  How do you change the spacekey when you release a new version of Confluence?

    2.  How do you maintain all the different versions of documentation?  Do you have seperate copies of each page in each space?  Do you do anything special to re-use documentation that hasn't changed, or are there just a lot of identical pages across all the documentation spaces?

    Thanks for any info you can provide!

    1. Aug 12, 2009

      Sashidaran Jayaraman [Atlassian]

      Hi Tim,

      For the versioning query, you may want to take a look at Copy Space plugin to create archive copies of the spaces. You also may want to read the following documentations for a better understanding of using Confluence for documentation:

      Hope this helps.

      Cheers
      JSashi

  15. Jun 18, 2009

    Corey Hampton

    Help please!!

    We just upgraded to Confluence 3.0 last night and my navigation is no longer resizeable.  It looks the same, but with no resizeable capability.  I verified that the jQuery files we in the same location.  I've been looking at the documention and Stephan's site mentioned above but I can not seem to fix it.  Can anyone help me please?

    Thank you - Corey

    1. Jun 22, 2009

      Giles Gaskell [Atlassian Technical Writer]

      Hi Corey,

      Sometimes, after the Confluence developers have implemented new features into a major release of Confluence, minor updates are also implemented into the default Page Layout code to incorporate or account for new product features. This was indeed the case for Confluence 3.0.

      Since upgrading to Confluence 3.0, have you tried re-implementing your Page Layout customisations into the new Confluence 3.0 default Page Layout code? If not, then it is likely that the new Confluence 3.0 default Page Layout code is missing from your space's current Page Layout and this might be causing the loss of resizing capabilities in your navigation tree.
      (info) Bear in mind that default Page Layout code is not automatically updated when you upgrade your version of Confluence, since this may damage your existing customisations.

      To re-implement your Page Layout customisations into the new Confluence 3.0 default Page Layout code:

      1. Make sure you have a copy of your Page Layout customisations backed up somewhere first - for example, in a text file.
      2. Follow the procedure in Step 2. Change the Page Layout on your Space on this page. However, immediately after completing step 3, click Reset Default. This resets the Page Layout code to the default for Confluence 3.0 (which contains differences from the default for Confluence 2.10.x).
      3. Then continue on with step 4, by clicking Create Custom and start re-implementing your own customisations into the Page Layout.
        (info) The code in step 6 (above) has not changed from Confluence 2.10 and is still applicable to Confluence 3.0. Hence, if you had copied the code in step 6 and had implemented this into the Page Layout of Confluence 2.10 without modification, you can simply copy the code in step 6 (above) again and re-implement this into your Page Layout for Confluence 3.0 (by replacing the default code in step 5).

      I hope this information helps and please let us know if this resolves the problem.

      Kind regards,

      Giles Gaskell
      Technical Writer
      ggaskell@atlassian.com
      ATLASSIAN - http://www.atlassian.com

      1. Jun 22, 2009

        Corey Hampton

        Giles,

        Thank you for your repsonse.  It turned out to be the jQuery files.  They were not in the correct location and it took me a while to get that particular information.

      2. Jun 24, 2009

        Diane Sexton

        Interestingly the changes to the Page Layout in Confluence 3.0 broke the Edit in Word functionality for one of our spaces - the only one where we had customised (to implement the Navigation sidebar) was the only one that would not allow Edit in Word to natively open and edit wiki pages but forced us to open and save as an actual Word doc - similar to as described in Office Connector Troubleshooting

        Resetting our layout to default and recustomising it to add the Navigation sidebar back in fixed the problem.

  16. Jun 19, 2009

    Anonymous

    Is there a way for the tree to automatically expand to show the children under that topic when it is chosen?

    1. Jun 22, 2009

      Zed Yap [Atlassian]

      Hi,

      As far as I know, the feature request is not available yet. However, there is an improvment request being raised in JIRA:

      Please add your comments to the discussion, vote on it and add yourself as a watcher for future updates. Also, please bear in mind the following document on how we schedule features for inclusion in our products: Implementation of New Features and Improvements.

      In the mean time, you might want to use the expandCollapseAll=true parameter.

      Hope that helps.
      Best rgds,
      Zed

      1. Jun 22, 2009

        Steven Black

        Thanks for the quick reply. Unfortunately, the tree is too large to expand all. I voted for the improvement request and I guess I'll just cross my fingers.

        Cheers,

        -swb.

  17. Jun 24, 2009

    Corey Hampton

    Does anyone know how to stop the width of the navigation from reseting every time a page is refreshed?  Some users like the bar smaller or wider than the default and I would like for it to stay the size the users sets it to.  I thought I read somewhere that it was possible.  I don't know jQuery, but I can copy code and modify it to work if anyone knows where I can find the code.

    Thanks!!

    1. Aug 12, 2009

      Azwandi Mohd Aris [Atlassian]

      Hi Corey,

      As far as I am concerned, you can set the minimum width of the bar (e.g. width="22%"). However, some pages may have a long title which will force the bar to expand. You may have to use the CSS property "word-break:break-all" to force the word wrap:

      Please note that this trick works in IE, but not in other browsers. It is going to be part of CSS3 spec, which I think is just a matter of time before other browsers can support it.

      Cheers,
      Azwandi

  18. Aug 19, 2009

    anthony hornby

    This is probably a dumb question ....

    How do I make the left navigation bar a right navigation bar?

    Thanks a lot.

    Anthony

    1. Aug 19, 2009

      Zed Yap [Atlassian]

      Hi Anthony,

      This is probably a dumb question ....

      How do I make the left navigation bar a right navigation bar?

      I was told by SSE that there is no such thing as dumb question (smile). Anyway, I think is possible. I have created an example syntax below, please give it a try.
      Replace the default page layout:

      With the following code:

      Hope that helps.
      Best rgds,
      Zed

      1. Aug 19, 2009

        anthony hornby

        Thanks! It did.

        It also gave me insight into how to modify this further for myself next time :-)

        *Puts on crash helmet and adjusts training wheels*

        Full speed ahead  .....

        Anthony

      2. Sep 15, 2009

        anthony hornby

        Is there any way to make this navigation sidebar float?

        That is it moves with the page as someone scrolls & the length of it doesn't force the minimum height of the page?

        I'd really like to have the navigation bar not be setting the minimum hieght of the page as it means for pages with only a small amount of content the users have to scroll down to see any comments on the page unnecessarily.

        All help appreciated.

        Anthony

  19. Aug 24, 2009

    Jamie

    In our instance when we apply this, if we have long noformat lines like below, they cause the page to be very wide. However, in a space with the default layout we get horizontal scrollbars on the preformatted panels. Do you know how we can make the long noformat lines behave in the same way with this layout?

    cheers, jamie

    dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds 

dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds dsfds fds fds

    1. Aug 24, 2009

      Jamie

      Looks like if the noformat block is in a table of any description you don't get the horiz scrollbars.

      Seems to be possible to do this with divs not tables, then the horizontal scrollbars work:

      #if ($action.isPrintableVersion() == false)
<style>
.spacetree * ul{
padding-left:0px;
margin-left: 0px;
}
.spacetree * li{
margin-left: 5px;
padding-left:5px;
}

</style>

<div style="text-align: left;"> 

 <div style="margin: 0 auto; width: 99%;"> 
 
    <div style="float: left; width: 22%">
        <div class="tabletitle">Table of Contents</div>
        <div class="spacetree">
            #includePage($helper.spaceKey "TreeNavigation")
        </div>
    </div>
    <div style="float: right; width: 78%" class="pagecontent">

        <div class="wiki-content">
            $body
        </div>
    </div>
</div>
#else
<div class="wiki-content">
    $body
</div>
#end

      1. Aug 25, 2009

        Zed Yap [Atlassian]

        Hi Jamie,

        I have a mere suggestion you can try the overflow property from CSS style sheet. I have create a example shown below, hopefully
        this will give you more idea on it.

        1. First make sure you have the HTML macro enable
        2. Copy the syntax shown below to a page:
        3. Save the changes.

        Hope that helps.
        Best rgds
        Zed

        1. Aug 25, 2009

          Jamie

          Hi Zed,

          That's interesting but I don't see how that helps. Users are hardly going to use the above instead of the noformat macro. I just want the noformat macro to work in the same way regardless of whether the layout above has been applied.

          My question really is:

          1. What's wrong with using divs instead of tables for dividing the page, given that they seem to allow the noformat macro to behave in the same way as without?

          cheers, jamie

          1. Sep 15, 2009

            anthony hornby

            Hi Jamie,

            I am interested in knowing if you went ahead with this and if you found any issues?

            Thanks a lot.

            Regards Anthony

            1. Sep 16, 2009

              Jamie

              Hi Anthony,

              I went ahead with it in only one space out of the several hundred that I need to, I don't think any issues so far. I've tried to summarise this additional problem here: https://www.adaptavist.com/pages/viewpage.action?pageId=42467485

              cheers, jamie

  20. Oct 30, 2009

    Anonymous

    Hi,

    I upgraded to v3.0.2 and Office Connector broke.  The cause is this missing line
    '#requireResourcesForContext("page")' in the TreeNavigation custom code. The line should go here:

    #infoPanelInitFromParams()

      1. GENERAL PAGE DECORATING BEGINS

    #requireResourcesForContext("page")

    #if ($mode != "edit" && $mode != "edit-preview").

    I would like to acknowledge this solution to Michael Jositz CONF-16055, 20090706.
    Can the above code be corrected to include the missing line.
    Regards,
    Nathan.

    1. Nov 03, 2009

      Sarah Maddox [Atlassian Technical Writer]

      Hallo Nathan
      Thanks for letting us know about this. (star) The problem probably occurred because you need to re-apply the customisation after upgrading Confluence. I've added a note to the page about this, so that other people don't experience the same problem.
      Cheers
      Sarah

  21. Nov 10, 2009

    Jeff Liu

    How do you do this globally? i.e. It automatically applys to every page in every space. What are the steps? Thanks.

    1. Nov 12, 2009

      Jack Low [Atlassian]

      Hi Jeff,
      To do this, you might want to add the customized code into "Page Layout" under global "Layouts". Bring up Confluence Admin page > Layouts > Customize "Page Layout", eg: you can replace the following code:

      <div class="wiki-content">
$body
</div>

      with

      #if ($action.isPrintableVersion() == false)
<style>
.spacetree * ul{
padding-left:0px;
margin-left: 0px;
}
.spacetree * li{
margin-left: 5px;
padding-left:5px;
}

</style>

<table cellspacing="2" cellpadding="5">
<tr>
<td valign="top" align="left" width="22%" bgcolor="#F9F9F9" class="noprint">
<div class="tabletitle">Table of Contents</div>
<div class="spacetree">
  $helper.renderConfluenceMacro("{include:spaceKey=CON|pageTitle=TreeNavigation} ")
</div>
</td>
<td valign="top" align="left" width="78%" class="pagecontent">
<div class="wiki-content">
$body
</div>
</td>
</tr>
</table>
#else
<div class="wiki-content">
    $body
</div>
#end

      Replace the spaceKey=CON with proper space key, and |pageTitle=TreeNavigation with proper TreeNavigation page (created in 'Space Pages' as described at the beginning of this documentation).

      Hope it helps. Please feel free to raise a support request at http://support.atlassian.com/ if the problem still persists.

      Cheers,

  22. Nov 15, 2009

    Emily Johnson

    Can't figure out how to delete my comment. I figured out my problem. Thanks!

  23. Dec 17, 2009

    Mathieu Filotto

    Hi,

    How can we get the navigation sidebar feature used for the Jira 4.0 documentation space.

    This one is very very great !! A dynamically loaded and resizable tree, would love to propose that one to my users. (thumbs up)

    Thanks

    Math

    1. Dec 17, 2009

      Mark Hrynczak [Atlassian]

      Hi Math,

      The theme is available as a downloadable plugin.

      See this blog post for more info.

      Glad you like it.

      Mark

      1. Dec 22, 2009

        Matthew Stublefield

        I really like it as well and would love to use it, but it overrides our colours and whatnot. Is the only recourse to apply a custom space stylesheet?

        1. Dec 22, 2009

          Mark Hrynczak [Atlassian]

          I'm not sure. Can you raise an issue and someone will get back to you with an answer.

  24. Jan 13, 2010

    Anonymous

    Hi,

    If you're currently using Confluence 3.0, is it possible to incorporate the latest theme (Navigation Sidebar) found within Confluence 3.1?

    Thanks

    1. Jan 18, 2010

      Sashidaran Jayaraman [Atlassian]

      Hi,

      If you are referring to the Documentation theme , I believe this is not possible since the theme is not compatible with older Confluence versions. Let me know if I have misunderstood your question and feel free to clarify more.

      Cheers
      JSashi

  25. Jan 26, 2010

    Brian Carr

    We seem to be having some problems after upgrading to 3.1 and it seems to be tied to this customization. The theory on this end is that the use if tables is throwing things off, especially since the new Page Layout default does not use any tables, just DIVs.

    Could someone from Atlassian speak to the changes in 3.1 and also provide an example of how to make this work in 3.1?

  26. Mar 15, 2010

    Petter Hafskjold

    I have set up side bar for a space and it works fine. But when I export the space to HTML the side bar is not included. Any suggestion to how I can get the side bar when I export to HTML? I guess the solution is to modify the Page Export Layout, but I haven't found the way to do this.

    1. Jun 03, 2011

      Zed Yap [Atlassian]

      Hi Petter,

      As far as I know the feature requested is not available yet. However, I found a feature request in JIRA:

      Please add your comments to the discussion, vote on it and add yourself as a watcher for future updates. Also, please bear in mind the following document on how we schedule features for inclusion in our products: Implementation of New Features and Improvements.

      you might want to to direct this question to Atlassian Answers. There you might be able to get some suggestion from the developer.

      Best rgds,
      Zed

  27. Sep 21, 2010

    Ben Rosenbach

    How can I keep this page from showing up in my Recently Updated or Most Popular macros? If I restrict it so only I can view it, no one will see the navigation!!

  28. Oct 07, 2010

    Andrea Carta

    Is there are way to configure the left navigation so that when you click on a top-level navigation, it displays all the child pages that fall under it? For example, if were to click directly on "Confluence Administrator's Guide", I'd want to go to a page that lists only that page and all of it's child pages in the navigation bar.

    I know this sounds odd but we have links to all the top level nav in the custom HTML area at the top of our pages. So, users can click those to go to the other pages within the help documentation vs having all pages display in the left nav.

    You can use the pagetree macro to define which page is the root. It'd be great to be able to do this in the left nav as well.

    I'm interested in any suggestions you might have.

  29. Nov 30, 2010

    John Nixdorf

    Is there a way to have the navigation sidebar "float" on the side of the page, so that as you scroll down through the page, the navigation sidebar stays close?

  30. Feb 02, 2011

    Anonymous

    I have found a Error ... In case anyone tries to add a TreeNavigation Page beside all Blog Post after Editing the layout of Blog Post.

    Then We get a Highlighted message as "You do not have sufficient privileges to include this page."

    Just Edit the Blog Post Layout with the below code

    #if ($renderBean.pageExists($helper.spaceKey, "TreeNavigation"))
           <td valign="top" align="left" width="160px" bgcolor="#F9F9F9">
                <div>
                    #includePage($helper.spaceKey "TreeNavigation")
                </div>
          </td>
    #end

  31. Apr 19, 2011

    Zdeněk Jonák

    Hi,

    the shortcut for showing/hiding the sidebar is "[", but we've found that pressing the Windows key (winkey) also shows/hides the sidebar, before opening the Start menu.

    Tested on Chrome 10, Opera 11.1 and IE 8.

    Is there a way to prevent this from happening?

    1. Apr 19, 2011

      Tin Pham

      This happens to me too when using Firefox 3.6.16. Zdenek have you opened up a JIRA ticket yet? I did a search using "windows key navigation sidebar show hide" and there just many many results. Let me know otherwise I'll open a ticket.

      1. Apr 19, 2011

        Zdeněk Jonák

        Hi Tin, I have not opened a ticket yet, plese do.

  32. Dec 12, 2011

    Anonymous

    Classic Cardy Ugg Boots, Classic Short Ugg Boots, Classic Tall Ugg Boots, Sundance II Ugg Boots , Ultra Short Ugg Boots , Ultra Tall Ugg Boots , ugg bailey button, ugg classic tall, ugg classic cardy, ugg classic short, Ultra Tall Ugg Boots, Nightfall Ugg Boots, Roxy Tall Ugg Boots, Kids Ugg Boots, Classic Tall Stripe Cable Knit Ugg Boots,