Element Labels Duplicated

[Stacey]

Hi There:

I found a suggestion in the forums for showing a prereq label in PDF output.
This worked:

Code: Select all

.prereq::before {
  content: "Before you begin";
  display: block;
  font-weight: bold;
  font-size: 1em;
  margin-top: 1em;
}

When I tried to do something similar for <steps> the label is duplicated:

Code: Select all

.steps::before {
  content: "Procedure";
  display: block;
  font-weight: bold;
  font-size: 1em;
  margin-top: 1em;
}

image.png

What have I done wrong?

[julien_lacour]

Hello Stacey,

Your selector for steps includes both the <section> and the actual list bearing the steps (has they both have @class="... steps"):

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

Why not directly using the args.gen.task.lbl parameter? When enabled it will automatically display the label before each task section.

Regards,
Julien

[Stacey]

I think I was trying to rename them and maybe change the font size. Can I do that for the parameter somewhere?

[julien_lacour]

Hello Stacey,

Sure you can, after enabling the parameter, you can modify the labels size using this rule:

Code: Select all

.tasklabel {
  font-size: 1em;
}

And you can replace the text by using, for example, this rule (to replace "Procedure" by "Steps"):

Code: Select all

.steps > .tasklabel {
  content: "Steps";
  font-weight: 700;
  margin-bottom: 0;
  margin-top: 1em;
}

To identify the elements classes to use in your selectors, you can debug the CSS.

Regards,
Julien