Breadcrumbs

Template Customization

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

HTML-custom-styling.png

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

/*<![CDATA[*/ div.rbtoc1760345552308 {padding: 0px;} div.rbtoc1760345552308 ul {list-style: disc;margin-left: 0px;} div.rbtoc1760345552308 li {margin-left: 0px;padding-left: 0px;} /*]]>*/ Changing the Colour of the Header Changing the Width of the Content Section Changing the Heading Level Depth for the Table of Contents Add Header Text to the Table of Contents Removing the Table of Contents Changing Heading Font Size in Tables Changing the Font Enlarging the Width of the Content Section Change the Background Colour of Admonition Macros Remove the Icon for Admonition Macros Remove "Page:" text from Content by Label macro Make Table header display as you scroll down the page Add Page Title to Header Section Add Static Text to Header Section Add Custom Image to Header

Changing the Colour of the Header

Green Header Example

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

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



/* 
 * 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
Screen Shot 2022-07-08 at 14.22.19.png


Screen Shot 2022-07-08 at 14.26.22.png


Changing the Width of the Content Section

Reducing the Width Example

  • Add the following code within the custom.css file

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


Default Template

Template with css changes

Screen Shot 2022-07-08 at 14.22.19.png

Screen Shot 2022-07-08 at 14.22.30.png


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 

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

Example 2 - Hide Heading 4 Level only

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


Default Template

Template with css changes (Example 1)

Screen Shot 2022-08-03 at 17.19.32.png

Screen Shot 2022-08-03 at 17.19.59.png


Add Header Text to the Table of Contents

Adding "On this page" header example

  • Add the following code within the custom.css file

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


Default Template

Template with css change
Screen Shot 2022-09-06 at 13.34.05 copy.png


Screen Shot 2022-09-06 at 13.33.21.png


Removing the Table of Contents

Removing the TOC example

  • Add the following code within the custom.css file

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


Default Template

Template with css change

Screenshot 2023-09-22 at 15.44.24.png

Screenshot 2023-09-22 at 15.46.22.png


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

.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
Screen Shot 2023-01-24 at 14.55.14.png



Screen Shot 2023-01-24 at 14.54.56.png


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:

: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

: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

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


Default Template

Template with css changes

Screen Shot 2023-01-24 at 12.14.55.png

Screen Shot 2023-01-24 at 12.15.25.png


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

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


Default Template

Template with css change

Screen Shot 2023-01-24 at 15.05.04.png

Screen Shot 2023-01-24 at 15.04.51.png


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

.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

Screen Shot 2023-01-24 at 15.05.04.png

Screen Shot 2023-01-24 at 15.08.27.png


Remove "Page:" text from Content by Label macro

Remove "Page" Text

  • Add the following code within the custom.css file

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


Default Template

Template with css change

with.png

without.png


Make Table header display as you scroll down the page 

Sticky header example

  • Add the following code sample within the custom.css file

.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
Screenshot 2023-11-20 at 13.57.42.png



Screenshot 2023-11-20 at 13.58.01.png



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

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

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

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
Screen Shot 2022-09-06 at 13.34.05.png



Screen Shot 2022-09-06 at 13.35.27.png


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

.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

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
Screen Shot 2022-10-05 at 14.51.47.png



Screen Shot 2022-10-05 at 14.53.45.png


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:

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