nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How can you customise the Page Tree

Mick Davidson_o2ws6w

I'd like to customise the page tree so that there is a space in the list of pages, like this.

Page 1
Page 2
Page 3
Page 4

<space>

Page 5
Page 6
Page 7

The idea is that the space shows that the first set of pages are different in some way to the second list in a visual manner. At the moment, because the list is continuous, it looks like all the pages are all part of one logical flow. In fact there's about two separate parts of one program.

The customisation is to be used in one space, not globally, and on a server instance of Confluence.

Cheers and TIA.

Accepted answers

Davin Studer

Well, the first thing to do would be to fnd out the ID of the top page. You can do that in Chrome by right clicking on the page in the navtree and selecting "inspect element". After the element you will see a div that has an id like this <div id="children{a bunch of numbers}-0" ... the numbers are the ID of that page. This div will hold the children of that page. The div is even there for pages that don't have children. With that you can add a section to your space stylesheet that looks something like this. Voila! A nice space in your navtree.

#children{pageId}-0 {
	margin-bottom: 20px !important;
}

All comments

Milo Test

First off, are you talking about the sidebar, or the Pagetree macro?

One way would be to group the children under different parents. Then there would be definite groupings.

Rodrigo Girardi Adami

Hi Mick,

The way that the pages are created in confluence states how the page tree will look like. Check this other answer for example.

As far as I know, there is no way to change this behavior.

Cheers,

Rodrigo

Mick Davidson_o2ws6w

Milo, thank you. Yes, I am talking about the sidebar. I can't put them under different parents, which is the obvious thing to do, because they are all children of the same parent. The gap is to signify a difference whilst keeping them altogether. Cheers.

Mick Davidson_o2ws6w

I recognised the second answer - it's mine!

Milo Test

OK, here's a lousy solution. Add blank pages titled with non-breaking spaces.

image2015-9-17 12:24:56.png

Davin Studer

#children{pageId}-0 {
	margin-bottom: 20px !important;
}

Mick Davidson_o2ws6w

Thanks Milo. I'll give that a go.

Mick Davidson_o2ws6w

Davin, thanks, I'll investigate this, but we are on the outer limits of my development knowledge.

Davin Studer

By the way, when I say the "top page" I am referring to the page in the tree that is just above the space. There are other ways to get the ID of that page as well. You could rename the page to something wiht a special character in it briefly and then view the page. The ID of the page will then show up in the URL bar as opposed to the page name. You could also go to the top page and then click the tools menu - > page information. The url bar will also have the ID of the page. Anyway, those are a couple other ways to get at the ID without viewing the page source.

Mick Davidson_o2ws6w

Davin, thanks for the extra info. I've had a look and found the children{pageId} info and tried modifying that as you suggested but it hasn't changed. I thought that I could change the page source to see what would happen but nothing did. I've done this before with numbers (changing 0 to 3 for example) and this updates the data shown on the page (temporarily, it's not a permanent change). I was expecting something similar to happen. Are you suggesting that I add the code to the page HTML in Admin mode? Looking at the code, there is a lot of other elements that are associated it with it, so I'm not sure how the added code would be identified as being related to the precise place it should take effect. It looks to me like there would be a lot of <li>, <div> and <span> to add as well. Sorry, but this is a lot over my head. I'm beginning to suspect I might have to get one of our dev team to look at it. Thanks for your help and suggestions. Cheers.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

page-tree