Custom CSS: Change the position and size of the numbered list the same as normal bullet point

New Version

It was pointed out by the developer, @Erica, so I fixed it.
I’ll keep the old version for distinction, but please use the new version.
Note: If you create a child hierarchy with three digits, the triangle symbol will be covered by the number.


.Node-self.is-numbered > .Node-bullet {
    text-align: right;
    margin-right: 3px;
    margin-left: -13px;
}

.is-mobile .Node-self.is-numbered > .Node-bullet {
    width: 32px;
}

.Node-self.is-parent .node-icon.mod-expand-collapse:before {
    font-size: 16px;
}

.is-mobile .Node-self.is-numbered > .Node-bullet {
    margin-right: -3px;
    margin-left: -16px;
    width: 41px;
}

Old Version

Note: If a number is three digits, it will be covered with a letter.


.Node-self.is-numbered > .Node-bullet {
    width: 16px;
    margin-left: 6px
}

.Node-self.is-parent .node-icon.mod-expand-collapse:before {
    font-size: 16px;
}

.is-smallFont .node-line {
    min-height: 23px;
}

.is-mobile .Node-self.is-numbered > .Node-bullet {
    width: 16px;
    margin-left: 0px;
    margin-right: 6px;
}

More From My Topics

3 Likes

Mmmm thanks I’ll add this to mine I prefer yours too :slight_smile:

( ̄ー ̄)b

@Erica perhaps this should be default!

If I remember correctly the extra margin is because people keep complaining that numbers like 999 would overlap with the text, and numbers look really bad if they’re right aligned.

Tough call… :thinking:

Maybe the css could change depending on the number of digits?

I see, it was the extra margin for that.
Umm… (-"-;

I did it!
Wouldn’t this new version be a good one?

Did you forget to add
the css code?

SEE edit at the top.

1 Like

Thanks your Css, i’d like this!

1 Like