Template

Footer Template

S
Sirapyro
· · 2 min read
Footer Template

This HTML block will create a page footer which you can customize as you seen fit. It can be a useful resource to link to many related pages in a single place, as a quick tool for navigation. A shortcut to related pages, if you will.

Included in the template is a line for the title, replace the text "TABLE TITLE" to update that. Then there are 4 rows included, but you can use as few or as many as you want, in theory. You can copy an entire block starting with "<!--- SECTION # --->" and ending with "</tr>", before the new line, and paste it above or below the other sections to add another row.

You can create a footer on its own page, then insert it onto another using the format: "{{insert: PAGENAME | borderless}}"

<table style="width:100%; border-collapse:collapse; margin:1em 0; background:var(--color-background-primary); color:var(--color-text-primary); font-size:14px; border-radius: var(--radius-base); overflow:hidden; outline:2px solid var(--color-border-primary); outline-offset:-1px; box-shadow: 0 4px 12px #0a0a0a;">

<!--- TITLE ROW --->
<tr>
<td colspan="2" style="background:var(--color-background-secondary); text-align:center; font-weight:bold; padding:6px; width:2000px;">
    <!--- TABLE TITLE --->    TABLE TITLE
</td>
</tr>

<!--- SECTION 1 --->
<tr>
<td style="width:160px; padding:6px 10px; font-weight:bold; color:var(--color-text-heading);">
    <!--- ROW 1 TITLE --->    ROW 1 TITLE
</td>
<td style="padding:6px 10px; background:transparent;">
    <!--- ROW 1 CONTENT --->    1 · 2 · 3
</td>
</tr>

<!--- SECTION 2 --->
<tr>
<td style="width:160px; padding:6px 10px; font-weight:bold; color:var(--color-text-heading);">
    <!--- ROW 2 TITLE --->    ROW 2 TITLE
</td>
<td style="padding:6px 10px; background:transparent;">
    <!--- ROW 2 CONTENT --->    1 · 2 · 3
</td>
</tr>

<!--- SECTION 3 --->
<tr>
<td style="width:160px; padding:6px 10px; font-weight:bold; color:var(--color-text-heading);">
    <!--- ROW 3 TITLE --->    ROW 3 TITLE
</td>
<td style="padding:6px 10px; background:transparent;">
    <!--- ROW 3 CONTENT --->    1 · 2 · 3
</td>
</tr>

<!--- SECTION 4 --->
<tr>
<td style="width:160px; padding:6px 10px; font-weight:bold; color:var(--color-text-heading);">
    <!--- ROW 4 TITLE --->    ROW 4 TITLE
</td>
<td style="padding:6px 10px; background:transparent;">
    <!--- ROW 4 CONTENT --->    1 · 2 · 3
</td>
</tr>

</table>

Example of this code rendered in Chronicler:

The colors will automatically update to match the style of your Chronicler vault, and you can remove the drop-shadow by removing the "box-shadow" line from the opening "table" tag.

Log in to like

Comments (1)

Log in to join the conversation.
Mar Qaroll Feb 21, 2026, 4:17 AM

Yessss! 🙌🏾 So cool!

Related Posts