How to change the margins for the Procedure task label?

tanja
Posts: 5
Joined: Tue Oct 30, 2018 10:49 am

How to change the margins for the Procedure task label?

Post by tanja » Thu Oct 31, 2019 7:39 pm

Hello,

I am using Oxygen XML Editor version 21.1 to generate PDF output with the 'DITA Map PDF - based on HTML 5 & CSS' transformation.
I am using the 'args.gen.task.lbl' parameter to display the task labels (Procedure, Results, What to do next, etc.) in my PDF output.

I successfully changed the margins for the 'Before you begin' and 'What to do next' labels using these css settings:

Code: Select all

*[class ~= "task/prereq"] > .tasklabel {
	margin-top:0.8em;
	margin-bottom:0.3em;
}

*[class ~= "task/postreq"] > .tasklabel {
	margin-top:0.8em;
	margin-bottom:0.3em;
}
How can I change the margins for the 'Procedure' label? I need to do that for the steps and the steps-unordered elements. Both are sometimes used with a stepsection element before the first step element. I need to change the margins for all cases.

I tried several combinations, but none of them has any effect. For example:

Code: Select all

*[class ~= "task/steps"] > *[class ~= "task/stepsection"] > .tasklabel {
	margin-top:0.8em;
	margin-bottom:0.3em;
}
or

Code: Select all

*[class ~= "task/steps"] > .tasklabel {
	margin-top:0.8em;
	margin-bottom:0.3em;
}
Could you point me to the correct css element?

Thanks and best regards,
Tanja

Dan
Posts: 442
Joined: Mon Feb 03, 2003 10:56 am

Re: How to change the margins for the Procedure task label?

Post by Dan » Fri Nov 01, 2019 3:01 pm

Hello,

For debugging your CSS we recommend using the development tools from a browser. (You can open the .merged.html file from the output folder in the browser.) See: https://www.oxygenxml.com/doc/versions/ ... ng_the_css

Please use a selector that matches all task labels, and remove the default margin-top (1em) that exists for the ol element (the tasks are transformed in an ol, or ul if not ordered).

Code: Select all

div.tasklabel {
	margin-top:0.8em;
	margin-bottom:0em;
}

div.tasklabel + ol,
div.tasklabel + ul {
	margin-top:0em;
}
Many regards,
Dan

tanja
Posts: 5
Joined: Tue Oct 30, 2018 10:49 am

Re: How to change the margins for the Procedure task label?

Post by tanja » Mon Nov 18, 2019 1:31 pm

Hello Dan,

It's working now. Thanks for your help!

Best regards,
Tanja

Post Reply