Page 1 of 1
How to style the indentation for ul/ol list?
Posted: Thu Aug 14, 2025 12:29 pm
by joyceclc23
Hi,
I generated the pdf with the standard css created from oxygen style basket and the indentation is a bit off.
How to a achieve the indentation as shown in the 2nd figure? I would like to align it to the left edge, align with the text above.
Figure 1: Indentation is off
key-features.png
Figure 2:
image.png
Re: How to style the indentation for ul/ol list?
Posted: Thu Aug 14, 2025 2:09 pm
by julien_lacour
Hello,
The default lists indentation is 40px, but you can easily override it by adding the following rule:
Code: Select all
*[class ~= "topic/ul"] {
padding-left: 20px;
}
You can copy this CSS and paste it into custom.css (see inside Oxygen Styles Basket styles.zip archive).
For more information about lists, you can
check our user guide.
Regards,
Julien
Re: How to style the indentation for ul/ol list?
Posted: Mon Aug 18, 2025 9:35 am
by joyceclc23
This solves the indentation for my UL list and i applied the same concept for my OL list for Notes.
However, the OL list for Task topic type which uses the Step instead of OL... does not change.
How do I go about this?
image.png
image.png
Thanks.
Regards,
Joyce
Re: How to style the indentation for ul/ol list?
Posted: Mon Aug 18, 2025 11:14 am
by julien_lacour
Hello,
There's a small difference in task steps, the actual structure is:
Code: Select all
<section class="- topic/ol task/steps ol steps">
<ol class="- topic/ol task/steps ol steps">
<li class="- topic/li task/step li step">
As you can see there's two elements with the same class (<section> and <ol>).
To keep the same padding you can update the CSS rule like this:
Code: Select all
ol[class ~= "topic/ol"],
*[class ~= "topic/ul"] {
padding-left: 20px;
}
Regards,
Julien