Some elements, such as tables and examples, can have titles. By default, these titles consist of an auto-generated label, a number, and a number delimiter, for example, "Table 1. Specifications". Depending on your requirements, you can set Paligo to include or exclude the title numbers and labels.
To be able to turn the title numbering and auto-labels for HTML outputs on or off, you need to edit your HTML layout so that Paligo creates span classes for the titles.
Then you can use CSS to control the visibility of those span classes so that the numbering is shown or hidden.
To make Paligo create span elements for each part of a label, number, or title, this must be enabled in the Layouts. It will also create a class name for each span element.
-
Select Layout in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the Layout you want to update or Create a Layout.
Tip
You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.
-
Select Formal elements in the sidebar.
-
Select Enable in Use separate styling for label, number and title in formal elements.
When enabled, this setting adds
<span>to the HTML and class names so that each part can be styled differently using CSS. -
Select Save.
To be able to control the visibility of the numbering and labeling of span elements, you first have to Enable Span Elements.
Then create a CSS file to show or hide the numbering and auto-generated labels of these elements.
Each element that has a title has a div and a class name in the HTML. There are also spans for each part of the title. For example, the HTML for a table title has this:
<div class="table-title">
<span class="formal-label">
<span class="formal-label-text">Table</span>
<span class="formal-number"> 1</span>
<span class="formal-label-delimiter">. </span>
</span>
<span class="formal-title">table title</span>
</div>
Tip
If you publish your content to HTML and view it in a browser, you can use the browser's inspect tool to view the HTML code and classes. You can also test changes to the CSS. To find out more, see Style with CSS.
Use CSS to hide the title numbers and also the auto-generated label:
-
Use a code or text editor to create a CSS file. Give it a suitable name and save it with the
.cssextension. -
Use CSS selectors to choose which parts you want to include or exclude.
For example, to hide a table's label, number, and delimiter after the number, use this code:
.table-title .formal-label { display:none; } -
If you want to keep the auto-text label, but hide the number and delimiter, use this code:
.table-title .formal-number, .table-title .formal-label-delimeter { display: none; }The other elements with titles have similar classes, for example, the example element has an
example-titleclass with span classes for formal-label, formal-label-text, formal-number, and formal-label-delimiter. -
Save your CSS file.
Comments
0 comments
Article is closed for comments.