-
Hi! In the docs it is mentioned how to reference a finding. Is it possible to somehow customize the style of the rendered reference? For example, instead of:
I would like to have something like:
Is that possible? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
Hi, yes it is possible to customize the styling of references via CSS. Add following CSS rules to your design to render references in the format "See [1.3] ...". .ref-heading > .ref-title {
display: none;
}
.ref-heading-level1::before {
content: "[" target-counter(attr(href), h1-counter) "]";
}
.ref-heading-level2::before {
content: "[" target-counter(attr(href), h1-counter) "." target-counter(attr(href), h2-counter) "]";
}
.ref-heading-level3::before {
content: "[" target-counter(attr(href), h1-counter) "." target-counter(attr(href), h2-counter) "." target-counter(attr(href), h3-counter) "]";
}
.ref-heading-level4::before {
content: "[" target-counter(attr(href), h1-counter) "." target-counter(attr(href), h2-counter) "." target-counter(attr(href), h3-counter) "." target-counter(attr(href), h4-counter) "]";
}
.ref-heading-level5::before {
content: "[" target-counter(attr(href), h1-counter) "." target-counter(attr(href), h2-counter) "." target-counter(attr(href), h3-counter) "." target-counter(attr(href), h4-counter) "." target-counter(attr(href), h5-counter) "]";
}
.ref-heading-level6::before {
content: "[" target-counter(attr(href), h1-counter) "." target-counter(attr(href), h2-counter) "." target-counter(attr(href), h3-counter) "." target-counter(attr(href), h4-counter) "." target-counter(attr(href), h5-counter) "." target-counter(attr(href), h6-counter) "]";
} These are modified rules based on the default reference stylings defined in https://github.com/Syslifters/sysreptor/blob/main/api/src/reportcreator_api/tasks/rendering/global_assets/base-ref.css |
Beta Was this translation helpful? Give feedback.
You can use CSS selectors apply the modified reference stylings only to parts of the document. For example, if you reference findings only via markdown links, you can prepend a
.markdown
selector to the CSS rules. Then the ToC is not affected. It is also possible to define your own selector classes.