Sorting order of child pages in Confluence

[Sujata]

I am creating the minute minutes in confluence everyday.

I prefix the title with the current date.

It lists all the meeting pages in an ascending order under the parent page. For example, today's meeting page will be at the end of the list.

How do I change order of the children under this page in descending order so I get the today's meeting page on the top of the list?

[NotTheRealStephenSifersNOPENOPENOPENOPE · Accepted solution]

https://confluence.atlassian.com/doc/move-and-reorder-pages-146407727.html

Reorder pages within a space

You can change the location of a page within its space, and reorder pages in the hierarchy. This allows you to:

• Move a single page, or a family of pages, to a different parent within the space.
• Reorder pages that are children of the same parent.

All links to the page are maintained. When you move a parent page, the entire hierarchy of child pages will move too.

To move or reorder a page:

1. Go to the space and choose Space tools > Reorder pages from the bottom of the sidebar
2. Expand the branches to locate the page you want to move
3. Drag the page to a new position in the tree

If you're using the Documentation theme go to Browse > Pages > Tree and then drag the pages to a new position as above.

Alternatively, you can choose to order a group of child pages alphabetically by choosing the Sort Alphabetically (A-Z) icon. The Sort Alphabetically (A-Z) icon only appears next to the parent page if the page family is currently sorted manually.

If you change your mind, you can use the Undo Sorting icon to revert back to the previous manual page order. This option is only available immediately after sorting the page, while you're still on the Reorder Pages tab, and haven't performed any other action.

[Sujata]

Thank you, I am aware about the reorder pages, I dont want to reorder manually because I will have to do this manually on a daily basis. I want to auto sort this in descending order. 

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Simple way to do this would be to start the page name with a date value and adjust the sort order to descend.

[Sujata]

Yes, the page name is started with the date already, I have been doing this from jan 15th on a daily basis, so you can imagine how many pages I have.

i dont know how to sort in descend.

[NotTheRealStephenSifersNOPENOPENOPENOPE]

You can use the page tree macro to give you the list of pages, the use the Reverse Order option:

https://confluence.atlassian.com/doc/page-tree-macro-163414255.html

Reverse Order (reverse)

false

Select to show the pages in reverse (descending) natural order. Must be used in combination with the Sort Pages By parameter.

[Sujata]

I already have a page tree on the left nav and lots of sub folders pages and child pages. The sorting I am looking for is under the page tree in the left nav. This is where i need the sorting option & I dont see anywhere. 

[NotTheRealStephenSifersNOPENOPENOPENOPE]

I am looking into how to do this on the sidebar.

[Sujata]

Thank you, appreciate your help.

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Found it, you can do it in CSS.

Within your space admin, Navigate to the Look and Feel, then Stylesheet. Once there, edit the Space Stylesheet and insert the follow CSS:

.plugin_pagetree_children_list{
 display:flex;
	flex-direction:column-reverse;
}

The above should reverse sort the pages.

[Sujata]

Great, thanks Stephen, where do I specify the parent name int he code because I want just the meeting children to be sorted in reverse.

[Sujata]

I tried this and it didnt work

.plugin_Daily Standup Meeting Notes_children_list{
display:flex;
flex-direction:column-reverse;
}

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Can you please upload a screenshot of what you are wanting to change so I may attempt to re-create and test? This will allow me to view and discover the elements in questions.

Thanks!

[Sujata]

Please take a look at the screen shot below, this is my sidebar, it has other stuff under page tree that I dont want to sort but I want to sort the children under the "Daily standup meeting notes" in descending order so the latest meeting show on the top and not the meeting from Jan 12th. I do not want to change the order of the other pages that I have under the page tree except for Daily standup meeting notes. Thanks.

Capture.PNG

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Ok, perfect. Testing what you need now.

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Ok, this should work. (At least it works in my test environment.)

You will need to inspect the element of your list, look for the UL listing (The UL listing will be a child the DIV for the list itself) and use that for the list, 

Use the ID listed in the UL, example:

<ul class="plugin_pagetree_children_list" id="child_ul1234-0">
 
Use the ID, such as
#child_ul1234-0

Here is the CSS code:

ul#child_ul1234-0{
display:flex;
flex-direction:column-reverse;
}

[Sujata]

Sorry, I dont understand what a UL listing or DIV means and where to find the ids. Can you give me direction how to find the id?

[NotTheRealStephenSifersNOPENOPENOPENOPE]

(Assuming you are using Chrome)

1. Open the page in question and expand the list in question
2. Right click on the list parent page and select "Inspect" 
3. An element inspector should appear within your browser
4. The The parent page you click on should be highlight within the element inspector
5. There should be a an arrow to the left of the parent list, you will need to click on that arrow
6. Under the parent, once expanded, you should see a line similar to this:
   1. <ul class="plugin_pagetree_children_list" id="child_ul1234-0">
7. What you need to grab out of that line is the id at the end, which is your child list you are wanting to reverse sort.
8. Once you have the id, edit the CSS code above to reflect the id from your element.

Example screen shot:

image2016-3-10 9:51:23.png

[Sujata]

Thank you for patiently explaining this to me, greatly appreciate it. I cannot find anything that has the tag "plugin_pagetree_children_list" in the code. I looked in the parent and the child code.

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Are you inspecting the element or vising the source code?

Can you inspect the element of the parent page, expand a few child elements and post a screen shot of it (don't copy and paste the text, it will script our items.)

[NotTheRealStephenSifersNOPENOPENOPENOPE]

in IE, it will look like this:

image2016-3-10 10:32:25.png

[Sujata]

I am using chrome. Yes, i tried both inspecting the element and visiting source code. Here is a snippet from the inspecting...

Capture.PNG

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Perfect, you are almost there. You need to expand a few more:

From <div class="ia-splitter-left">, expand out to the following:

image2016-3-10 10:56:42.png

[Sujata]

Couldnt find the lines after tipsy-enabled...

Capture.PNG

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Well, there would be an option to do a screen share to further look into the issue. I do know the CSS works on my end, but unsure as to why you can't see all of the elements.

[Sujata]

Thank you Stephen for patiently going over this with me. It is strange why I dont see the same options. Unfortunately, I will not be able to share the screen. Thank you so much for all your help in trying to resolve this for me. 

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Ok, I found the issue. You are clicking on the Page and then going into inspect element. I need you to click on the Page Tree link itself on the left, and then select inspect element. I was just able to re-create your element view on my end, sadly, you're in the wrong place when inspecting.

[Sujata]

Coincidently, I realized as soon as I sent you the message and I guess while you were typing, I was already updating the stylesheet . So, now I have updated and saved but the sort order didnt change, am i supposed to logout and log back in?

ul#children362767-0{
display:flex;
flex-direction:column-reverse;
}

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Please copy and paste your code and your stylesheet view so I can ensure you have it setup properly.

Thanks!

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Try this:

ul#child_ul362767-0{
display:flex;
flex-direction:column-reverse;
}

[Sujata]

image2016-3-10 13:56:14.png

[NotTheRealStephenSifersNOPENOPENOPENOPE]

You are almost there, you just need to go one more element deeper.

However, I have enough to go off of. Try this within your stylesheet:

ul#child_ul362767-0{
display:flex;
flex-direction:column-reverse;
}

[Sujata]

ok, it worked but it sorted everything under the page tree (which didnt want) not just the Daily standup meeting notes, which is what I want.

[NotTheRealStephenSifersNOPENOPENOPENOPE]

You will have to find that element child and then put it within the CSS Stylesheet. Each page and instance will have a unique child_id which I can't know without inspecting the elements. The good news is it worked, but its not at the right level yet.

[Sujata]

I went to that particular page and got the id and tried using that id, it didnt work

[Sujata]

This is the id for the daily meeting notes page

<div id="children71794717-0" class="plugin_pagetree_children_container">
</div>

ul#children71794717-0{
display:flex;
flex-direction:column-reverse;
}

[NotTheRealStephenSifersNOPENOPENOPENOPE]

It needs to be in this format:

ul#child_ul71794717-0{
display:flex;
flex-direction:column-reverse;
}

[Sujata]

YES..it worked finally! It works like a charm. Thank you so much for being so patient. You will be my contact for any issue I face in confluence:). I have never come across anyone who would have so much patience as you to make it work! Thanks again, greatly appreciate it!

[NotTheRealStephenSifersNOPENOPENOPENOPE]

Glad it worked for you. It was a learning experience for both of us.

If you would please, accept this thread as the answer so this may help others in the future attempting to do what you have done.

Thanks!

[Sujata]

I accepted it, thank again!

[Deleted user]

I'm wondering whether confluence has changed its UI recently, as I'm not able to edit the css in the Look and Feel section. Any advice on how I can solve this exact problem? Thanks!

[Naim Larbi]

What is the A-Z sorting button doing there if we need to program this in CSS? I am really lost...

[Naim Larbi]

I am reading:

Alternatively, you can choose to order a group of child pages alphabetically by choosing the Sort Alphabetically (A-Z) icon. The Sort Alphabetically (A-Z) icon only appears next to the parent page if the page family is currently sorted manually.

Why does it only appear the page family is currently sorted manually? If the page is already sorted, i don't need the A-Z icon, right?

[Nikki Anderson]

I closely read and followed this 2016 conversation between "abc" and "NotTheRealStephen..." and was able to solve the same exact issue. THANK YOU very much! This thread is priceless. But what is annoying that this isn't a simple button-feature on Confluence still. lol

[Kajsa]

I was just going to try this in my spaces but there is no Stylesheet in my Look and Feel section, only for PDF exports

[Luis Jorge Contreras]

The missing step is this:  You have to click and drag one link in the group to another spot, then the Sort Alphabetically (A-Z) icon will appear. 

[marcosxsilva]

This is related to "side bar", not a page list... 

Add option for descending sort page tree in the sidebar for alphabetical in revert order (Z-A)

[Andreas Immler]

Please vote feature request for this use case: CONFSERVER-57562

[marcosxsilva]

Atlassian should allow the user (space admin) to choose the sorting option in tree menu in Reorder Page.

This request was done several years ago and until now this feature was not implemented.

Remark: The only option is to request to server admin to add a hacking code to CSS template, affecting everybody... This is not a real solution! Every space or page subtree has its own needs.

[丘麗娟]

Hi Stephen,

After expanding the parent of the Page Link Tree of myDaily Meetings,  I could not find a line similar to this:

1. <ul class="plugin_pagetree_children_list" id="child_ul1234-0">

Did I not look into the right place?

Thank you in advance for your kind assistance.

Cheers,

Christie

[NotTheRealStephenSifersNOPENOPENOPENOPE]

This was from back in 2016, since then confluence has gone through multiple updates. I would suggest posting a new question in regards to this so it can be looked at through newer versions.

[Yukyoung Yang]

inserting the following code worked for me

ul#child_ulXXXXXX-X.plugin_pagetree_children_list{
display:flex;
flex-direction:column-reverse;
}