Creating a custom footer

Plans supporting this feature: Professional Business Enterprise

Creating a custom footer

Creating a custom footer requires knowledge of HTML and CSS. Follow these steps to customize the footer on your Knowledge base site.

Navigate to Settings () in the left navigation bar in the Knowledge base portal.
In the left navigation pane, navigate to Knowledge base site > Customize site.
This page displays all the basic site design configurations.
On the Customize site page, click the Customize site button.
Select the Site header & footer from the dropdown menu.
Click the Footer tab and choose the Custom footer option.
There are three options:
1. Theme A: A predefined dark theme for the footer. You can edit the provided code if needed.
2. Theme B: A predefined light theme for the footer. You can edit the provided code if needed.
3. Blank: Add your custom HTML footer.
Click Preview to see how your changes will appear on the knowledge base site.
Click Save to save your changes without applying them immediately.
Click Publish to make your recent changes visible to readers.
Click the More () icon and select Reset to published version to discard all saved and unsaved customizations and revert to the last published version.

NOTE
The Reset to published version feature is available only for new Knowledge base site 2.0 projects created after March 29, 2025.

Document360 interface showing footer customization options and HTML code section.

Linking a PDF or other files in the Custom footer

To attach a PDF or other files to the custom footer, follow these steps:

Navigate to Drive () and select the desired file in the Knowledge base portal.
The File details panel will appear.
In the Location section, click the Copy icon to copy the file link.

Example link: https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Importing_multiple_article.gif

Navigate to Settings () in the left navigation bar in the Knowledge base portal.
In the left navigation pane, navigate to Knowledge base site > Customize site.
Select the Site header & footer from the dropdown.
Click the Footer tab and choose the Custom footer option.
Select your desired theme.
In the Custom code section, paste the copied link in the desired location.
Click Preview to see how your changes will appear on the knowledge base site.
Click Save to save your changes without applying them immediately.
Click Publish to make your recent changes visible to readers.
Click the More () icon and select Reset to published version to discard all saved and unsaved customizations and revert to the last published version.

Custom footer templates

This section provides sample footer templates along with their custom HTML and CSS code. To implement a footer design, navigate to Settings () > Knowledge base site > Customize site, select the Footer tab, and paste the following code into the HTML and CSS section.

Protip
You can adjust styles like colors, font sizes, or spacing to better match your brand.

Footer design 1

Website footer displaying company information, resources, and support options for users.

To implement the above footer design in your Knowledge base site, copy the following HTML and CSS code:

HTML code

<div class="container">
    <div class="footer">
        <div class="footer-top">
            <div>
                <h4>PRODUCT</h4>
                <ul>
                    <li>Features overview</li>
                    <li>Platform capabilities</li>
                    <li>Integrations</li>
                    <li>Plans and pricing</li>
                    <li>Use cases</li>
                    <li>Enterprise solutions</li>
                    <li>Industry applications</li>
                </ul>
            </div>
            <div>
                <h4>RESOURCES</h4>
                <ul>
                    <li>Documentation</li>
                    <li>Blog and articles</li>
                    <li>Webinars and tutorials</li>
                    <li>Guides and ebooks</li>
                    <li>Community stories</li>
                    <li>ROI calculators</li>
                    <li>Newsletter archive</li>
                    <li>Help articles</li>
                </ul>
            </div>
            <div>
                <h4>PARTNERSHIPS</h4>
                <ul>
                    <li>Partner program</li>
                    <li>Technology partners</li>
                    <li>Platform integrations</li>
                    <li>Developer resources</li>
                    <li>Partner directory</li>
                    <li>Affiliate program</li>
                </ul>
            </div>
            <div>
                <h4>COMPANY</h4>
                <ul>
                    <li>About us</li>
                    <li>Our team</li>
                    <li>Careers</li>
                    <li>Media kit</li>
                    <li>Events and webinars</li>
                    <li>Customer highlights</li>
                    <li>Contact us</li>
                </ul>
            </div>
            <div>
                <h4>SUPPORT</h4>
                <ul>
                    <li>Help center</li>
                    <li>Contact support</li>
                    <li>Community forum</li>
                    <li>System status</li>
                    <li>Release notes</li>
                    <li>Accessibility policy</li>
                    <li>API docs</li>
                    <li>Changelog</li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="footer-logo">
                <span style="font-size:40px;font-weight:1200;color:#0042E4;">Company name</span>
            </div>
            <div class="icons">
                <ul>
                    <li class="facebook"><a href="https://www.facebook.com"><i class="fab fa-facebook-f"></i></a></li>
                    <li class="linkedin"><a href="https://www.linkedin.com/in"><i class="fab fa-linkedin-in"></i></a></li>
                    <li class="twitter"><a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a></li>
                </ul>
                <div class="footer-form">
                    <input type="text" id="fname" name="fname" placeholder="Enter your email" />
                    <button>Request a Demo</button>
                </div>
            </div>
        </div>
        <div class="footer-last">
            <p>Terms of Service</p>
            <p> Privacy Policy</p>
            <p> Cookie Settings</p>
            <p> Accessibility</p>
        </div>
    </div>
</div>

CSS code

.footer {
    padding-top: 112px;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    margin: auto;
    width: 1225px;
}
.footer-top h4 {
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 23px;
    font-weight: 600;
    font-family: Graphie-Semibold;
    color: rgba(39, 40, 80, 1);
    margin-bottom: 19px;
    margin-top: 0px;
}
.footer-top ul {
    list-style-type: none;
    padding: 0px;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 1225px;
    margin: auto;
    margin-top: 103px;
}
.footer-bottom ul {
    list-style-type: none;
    padding: 0px;
    display: flex;
    justify-content: center;
    flex: 0 0 30%;
    margin: 0px;
    align-items: center;
}
.footer-bottom ul li a {
    color: rgba(39, 40, 80, 1);
}
.footer-bottom h2 {
    color: #0042E4;
    margin: 0px;
}
.footer-top ul li {
    padding: 10px 0px 10px 0px;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 19px;
    font-weight: 400;
    color: rgba(143, 143, 160, 1);
    width: 185px;
}
.footer-last {
    display: flex;
    justify-content: flex-end;
    width: 1225px;
    margin-top: 25px !important;
    margin: auto;
    color: rgba(143, 143, 160, 1);
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 19px;
    font-weight: 400;
    margin-bottom: 76px;
}
.footer-last p {
    flex: 0 0 13%;
    color: rgba(143, 143, 160, 1);
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 19px;
    font-weight: 400;
    padding-left: 40px;
}
div.footer-bottom:before {
    content: "";
    position: absolute;
    left: 0%;
    right: 0;
    bottom: 82px;
    height: 5px;
    width: 97%;
    border-top: 1px solid #D9D9DF;
}
.icons {
    display: flex;
    flex: 0 0 50%;
    align-items: center;
}
.footer-form button {
    background-color: #0042E4;
    color: white;
    padding: 10px 16.34px 10px 16.5px;
    font-size: 15px;
    letter-spacing: 0.5px;
    line-height: 20px;
    border: 0px;
    font-weight: 700;
    font-family: Graphie-Bold;
}
input#fname {
    padding: 10px 100.84px 11px 16.6px;
    width: 232px;
    height: 40px;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 19px;
    font-weight: 400;
    border: 1px solid RGB(193, 193, 204);
}
input#fname::placeholder {
    color: rgba(143, 143, 160, 1);
    font-size: 14px;
    font-family: 'Graphie-Regular';
    letter-spacing: 0.5px;
    line-height: 19px;
    font-weight: 400;
}
.fab {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    font-size: 23px;
}
.icons ul li {
    margin-right: 23px;
}

Footer design 2

Footer section displaying copyright, privacy policy, and contact information for Document360.

To implement the above footer design in your Knowledge base site, copy the following HTML and CSS code:

HTML code

<footer class="footer">
<div class="footer-background">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200" preserveAspectRatio="none">
<!-- Colored Circles -->
<circle cx="120" cy="60" r="15" fill="#FFD166" opacity="0.6" />
<circle cx="400" cy="140" r="20" fill="#06D6A0" opacity="0.4" />
<circle cx="700" cy="100" r="10" fill="#EF476F" opacity="0.6" />
<circle cx="1050" cy="80" r="18" fill="#118AB2" opacity="0.5" />
<circle cx="1300" cy="130" r="12" fill="#073B4C" opacity="0.3" />
<circle cx="200" cy="180" r="10" fill="#FF9F1C" opacity="0.4" />
<circle cx="600" cy="190" r="14" fill="#8338EC" opacity="0.5" />
<circle cx="1000" cy="185" r="16" fill="#3A86FF" opacity="0.3" />
 
            <!-- Polygons -->
<polygon points="250,160 260,140 270,160" fill="#FB5607" opacity="0.4" />
<polygon points="800,150 810,130 820,150" fill="#FF006E" opacity="0.5" />
<polygon points="1150,170 1160,150 1170,170" fill="#1982C4" opacity="0.3" />
</svg>
</div>
 
    <div class="footer-content">
<div class="footer__col copyright">
<div class="footer__copy-links">
<a href="https://document360.com/privacy-policy" class="footer__copy-link">Privacy Policy |</a>
<a href="https://document360.com/terms-of-service" class="footer__copy-link">Terms of Service |</a>
<a href="tel:+1-800-000-0000" class="footer__copy-link">+1 800 000 0000</a>
</div>
<p>© 2025 Document360. All rights reserved. Document360 and associated logos are trademarks of Kovai.co and may not be used without permission.</p>
</div>
</div>
</footer>

CSS code

.footer {
    position: relative;
    background-color: #fff;
    color: #333;
    padding: 60px 20px 40px;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    overflow: hidden;
}

.footer-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.footer-background svg {
    width: 100%;
    height: 100%;
}

.footer-content {
    position: relative;
    z-index: 1;
}

.footer-content a {
    color: #118AB2;
    text-decoration: none;
}

.footer-content a:hover {
    text-decoration: underline;
}