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

Removing the Table of Contents

Removing the TOC example

Add the following code within the custom.css file

CODE

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

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

Changing the Font

Change the font in your export

The following code reduces allows you to change the font used for the content in the generated export
By default, we set the following css custom properties with the following values:

CODE

:root {
    --vp-font-family-code: 'PT Mono', Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    --vp-font-family-default: Roboto, Helvetica, Arial, sans-serif;
    --vp-font-family-headline: Roboto, Helvetica, Arial, sans-serif;
}

If you just want to change the font, and the font is installed on your system, you can insert the line they want into a :root scope, and insert your custom font as the first font in the list. It is recommended to leave the other fonts after that, as they act as a fallback in case the font is not available.
Add the following code within the custom.css file

Example changes headers to Comic Sans.

CODE

:root {
  --vp-font-family-headline: "Comic Sans MS", Roboto, Helvetica, Arial, sans-serif;
}

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

Make Table header display as you scroll down the page

Sticky header example

Add the following code sample within the custom.css file

Sticky table header

CODE

.article__content .table-wrap, .vp-article__content-panel {
    overflow-x: unset;
}

th {
    position: sticky;
    top: 72px; /* account for height of header bar */
}

Default Template	Template with css changes

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__navigation--logo {
    display: flex;
}

.user-defined-custom-class {
    color: var(--vp-header-text-color);
}

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

CODE

document.addEventListener("DOMContentLoaded", function (event) {
    const newEntry = document.createElement("div");
    newEntry.textContent = "Text to have in the static title";
  
    newEntry.classList.add('user-defined-custom-class');

    const header = document.querySelector(".header");
    if (header) {
        const logo = header.querySelector(".header__navigation--logo");
        logo.appendChild(newEntry);
    }
});

Default Template	Template with css change

Add Custom Image to Header

Add custom image to header

Add the following code within the custom.js file that includes your image as a data URL:

CODE

setTimeout(function() {
    document.querySelector(".header__navigation--logo img").src = "data:image/gif;base64,<GIF_IMAGE_AS_BASE64_HERE>";
}, 1);