Template Customization

Within the Template Settings you can enable an option to make further customizations to the exported content (post export).

When enabled, the export will contain the following additional files in the export output and these can be adapted in order to add your own custom styling:

custom.css (found within the css directory)
custom.js (found within the js directory)

It also remains possible to upload your defined custom.css / custom.js files to the template so that your custom style and format changes are automatically applied with the export, rather than changing or adding the same files post-export.

Please note, we do not offer support for issues caused by customizing an export. Additionally, we do not offer guidance/support for custom theme development. To check out the scope of our support offering please see our K15t Support Service Level Agreement

css Examples

Changing the Colour of the Header

Green Header Example

Add one of the following code samples within the custom.css file

Using colour name

CODE

/* 
 * Customizing header color through CSS variable. See app.css in exported archive for all variables
 */
:root {
    --vp-header-background-color: green;
}

Using HEX colour code

CODE

/* 
 * Customizing header color through CSS variable. See app.css in exported archive for all variables
 */
:root {
    --vp-header-background-color: #95bb72;
}

Default Template	Template with css changes

Changing the Width of the Content Section

Reducing the Width Example

Add the following code within the custom.css file

CODE

/*
 * Customizing the max-width of the content via standard CSS rules
 */
main {
    margin: auto;
    max-width: 1600px;
}

Default Template	Template with css changes

Changing the Heading Level Depth for the Table of Contents

Reducing the Number of Headings Example

Add the following code within the custom.css file

Example 1 - Hide the entries for Heading Levels 3 and 4

CODE

.vp-article__aside-right .toc-list .toc-list {
    display: none;
}

Example 2 - Hide Heading 4 Level only

CODE

.vp-article__aside-right .toc-list .toc-list .toc-list {
    display: none;
}

Default Template	Template with css changes (Example 1)

Add Header Text to the Table of Contents

Adding "On this page" header example

Add the following code within the custom.css file

CODE

.js-tocBot::before {
    content: "On this page";
    font-size: 1.25em;
}

Default Template	Template with css change

Changing Heading Font Size in Tables

Reduce H2 Style in Table

The following code reduces the font size for heading level 2 style in a table
Add the following code within the custom.css file

H2 Font Size iin Tables

CODE

.article__content table.confluenceTable tbody tr td h2,
.article__content table.confluenceTable tbody tr th h2,
.article__content table.confluenceTable thead tr td h2,
.article__content table.confluenceTable thead tr th h2,
.article__content table.confluenceTable tbody tr td h2 *,
.article__content table.confluenceTable tbody tr th h2 *,
.article__content table.confluenceTable thead tr td h2 *,
.article__content table.confluenceTable thead tr th h2 * {
	font-size: 1.25rem;
	line-height: 1.25em;
	margin-bottom: 0 !important;
}

Default Template	Template with css changes

Enlarging the Width of the Content Section

Expand Width of Content

The following code reduces the white space between the content and right sidebar
Add the following code within the custom.css file

H2 Font Size iin Tables

CODE

#main-content {
	width: 100%;
	max-width: 100%;
}

Default Template	Template with css changes

Change the Background Colour of Admonition Macros

Change Info Macro Colour

This example will change the background appearance of the Info macro
The code selector can be adapted for other Admonition macros such as;
- Warning macro: .confluence-information-macro-note
- Success macro: .confluence-information-macro-tip
- Info macro: .confluence-information-macro-information
- Error macro: .confluence-information-macro-warning
- Note macro: .scroll-panel-note
Add the following code within the custom.css file

CODE

.confluence-information-macro-information {
	background-color: #50e2f2;
}

Default Template	Template with css change

Remove the Icon for Admonition Macros

Remove Info Macro Icon

This example will remove the icon for the Info macro
The code selector can be adapted for other Admonition macros such as;
- Warning macro: .confluence-information-macro-note
- Success macro: .confluence-information-macro-tip
- Info macro: .confluence-information-macro-information
- Error macro: .confluence-information-macro-warning
- Note macro: .scroll-panel-note
Add the following code within the custom.css file

CODE

.confluence-information-macro-information .confluence-information-macro-icon {
	display: none;
}
.confluence-information-macro-information .confluence-information-macro-body {
	padding-left: 0 !important;
}

Default Template	Template with css change

Remove "Page:" text from Content by Label macro

Remove "Page" Text

Add the following code within the custom.css file

CODE

.content-by-label > li > div:first-child {
	display: none;
}

Default Template	Template with css change

JavaScript Examples

Given the scope of using JavaScript we don't provide many examples. Through changes in the custom.js file you can make further theme adaptions that may otherwise not be easily achievable with only CSS. For example. you may want to integrate with other services (eg. Google Analytics). Alternatively, you may want to make css and JavaScript changes in combination to modify the output of the generated HTML export.

Add Page Title to Header Section

Adding heading text to the header section example

This example requires changes in both the custom.css and custom.js files

Add the following code within the custom.css file

CODE

.header .top-bar-left ul.menu {
    display: flex;
}

Then, add the following code within the custom.js file

CODE

document.addEventListener("DOMContentLoaded", function (event) {
    const title = document.querySelector("meta[name=title]").getAttribute("content");

    const newListItem = document.createElement('li');
    newListItem.textContent = title;

    const menu = document.querySelector(".header .top-bar-left ul.menu");
    menu.appendChild(newListItem);
});

Default Template	Template with css change

Add Static Text to Header Section

Adding heading text to the header section example

This example requires changes in both the custom.css and custom.js files

Add the following code within the custom.css file

CODE

.header .top-bar-left ul.menu {
    display: flex;
}

Then, add the following code within the custom.js file

CODE

document.addEventListener("DOMContentLoaded", function (event) {
    const newListItem = document.createElement('li');
    newListItem.textContent = "Text to have in the static title";

    const menu = document.querySelector(".header .top-bar-left ul.menu");
    menu.appendChild(newListItem);
});

Default Template	Template with css change