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

🌈Share & Showcase
#1

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.

before
before732×244 1.98 KB

after
after770×249 2.77 KB 

.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.

before
before732×244 1.98 KB

after
after735×261 1.8 KB 

.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

4 Likes
#2

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

#3

(￣ー￣)ｂ

#4

@Erica perhaps this should be default!

#5

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:

#6

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

#7

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

#8

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

#9

Did you forget to add
the css code?

#10

SEE edit at the top.

1 Like
#11

Thanks your Css, i’d like this!

1 Like