Treelink Theme Documentation

Theme Introduction:

Treelink is a responsive Linktree-like theme. Built with HTML5, CSS3 & JavaScript. This is a Bootstrap 5 mobile theme for your links & social media apps.

This theme is ideal for someone to host their own website. This is an easy, private and secure way to showcase all their links WITHOUT signing up for services like Linktree, having ads, etc.

To get started, all you need to do is to copy the files to your main domain or subdomain hosting directory folder.

Choosing The Correct Template:

This theme includes 4 different main HTML page presets:

index.html
index_square.html
index_video.html
index_gradient.html

These correlate to the round button template, the square button template, the video background playback template & the background gradient template.

Whichever you end up choosing as your preferred style, make sure to simply rename it to "index.html" before uploading it to your domain folder or hosting directory folder.

Theme Folder Structure

This theme has been designed to be completely modular and very easy to customize. Here's the folder structure:

Root
└─ assets
    │  └─ css/
    │       └── All css files
    │		    └─ colors
    │			    └── All color files
    │  └─ fonts/
    │       └── All icon files
    │		└─ font-family
    │             	└── All font files
    │  └─ js/
    │       └── All javascript files
    │  └─ images/
    │       └── All images & video files
    │  └─ php/
    │       └── Contact.php file
└─ html
    └─ All html files

Abbreviated HTML Structure

                            <body>

<!-- 1. Start: Loader/Spinner -->
<div id="preloader">
</div>
<!-- 1. End: Loader/Spinner -->


<!-- 2. Start: Top Navbar -->
<nav class="navbar navbar-expand-lg custom-nav">
</nav>
<!-- 2. End: Top Navbar -->


<!-- 3. Start: Header Section -->
<div class="container" style="max-width: 680px" id="header-section">
</div>
<!-- 3. End: Header Section -->


<!-- 4. Start: Main Buttons Section -->
<div class="container" style="max-width: 680px" id="main-buttons">
</div>
<!-- 4. End: Main Buttons Section -->


<!-- 5. Start: Modal Form Contents -->
<div class="modal fade" id="exampleModal">
</div>
<!-- 5. End: Modal Form Contents -->


<!-- 6. Start: Footer Section -->
<div class="container" id="footer">
</div>
<!-- 6. End: Footer Section -->


<!-- Back To Top -->
<a href="#" class="back_top">
</a>

<!-- All JavaScripts -->
<script type="text/javascript">
</script>

</body>
                            
                        

Editable CSS Files

File Name	Description	Location
`bootstrap.min.css`	Treelink uses bootstrap v5.1.3. The core bootstrap file is being used in all the pages.	/assets/css/bootstrap.min.css/
`style.css`	This file is containing all common styles for all the pages.	/assets/css/style.css/
`Color folder. All color files`	This folder contains 10 colour presets templates. Including a dark mode, a video background mode & a gradient background mode.	/assets/css/colors/

Choosing A Color Preset With The Toggle Switch

Version 2.0.0 introduces a color switch toggle, this can be set between any of the 10 colors presets included with this theme. By default, the switch is configured to change from light mode to dark mode.

    
<link id="style1" rel="stylesheet" type="text/css" href="css/colors/light-mode.css" />
<link id="style2" rel="stylesheet" type="text/css" href="css/colors/dark-mode.css" disabled="disabled" />

It does so by switching from "style1" to "style2". Make sure you edit all the "styles" in the entire script, located in line #308 of the round & square index files.

Background Video Playback

Version 1.0.4 introduced a new index file called: "index_video.html". This preset has a background video player integrated.

Because of the video player, the index_video.html preset lacks a toggle switch since the CSS has to be unique in order for the text to be legible while any type of video (color/brightness) is playing in the background.

The default stylesheet in the "index_video.html" preset is located in line #41, and looks like this:

<linkrel="stylesheet" type="text/css" href="css/colors/video-mode.css">

Video Playback Parameters

<video autoplay loop muted playsinline class="bg-video">

The parameters of the background video playback are located in line #58, and are specified below:

Autoplay - Starts the video automatically as soon as the page is loaded.
Loop - Loops the video automatically as soon as the playback finishes.
Muted - Mutes the sound of the video, if any.
playsinline - This allows the video to scale & autoplay on mobile devices.

Gradient Background Color Mode

Version 1.0.4 introduced a new background CSS color file, called "gradient-bg.css". To customize the colors of the gradient, open the file and edit the color values in line #14:

background: linear-gradient(to left, #338e77, #ff10b7);

You can also edit the direction of the animation, in the example above the animation moves to the left side.

Editable Javascript Files

File Name	Description	Location
`custom.js`	This is the main JavaScript file. It contains the custom JS code needed for all features.	/assets/js/custom.js/
`contact.js`	This is the contact JavaScript file. It contains the JS code needed for the form to actually send the email.	/assets/js/contact.js/

Custom.js File

This file houses all the main scripts, back to top, preloader, sticky menu, etc. This file can be edited.

Contact.js File

This file houses the main javascript code for the contact form to actually send the email. This file can be edited.

PHP File

File Name	Description	Location
`contact.php`	This is a php file. It contains the php code needed for the contact form to work. This includes the email verification system. To customize the email destination, read below:	/assets/php/contact.php/

Customizing The Contact Email Address

To add your own destination email in the contact form, simply edit the contact.php file, inside the PHP folder. This can be done in line #47

//$address = "example@example.net";    
  $address = "support@jperez.ca";

Nothing else needs to be edited. Any other edits could potentially break the contact form.

Image Files

File Name	Description	Location
`Image Folder`	Version 1.0.4 added the ability to have a background video on your site. Make sure the video is located in the images folder.	/assests/images/

Video Files

File Name	Description	Location
`Image Folder`	Version 1.0.4 added the ability to have a background video on your site. Make sure the video is located in the images folder.	/assests/images/

Font Files

File Name	Description	Location
`Font-family Folder`	Version 2.0.0 adds 5 different font families, and let's you easily switch between them.	/assests/fonts/font-family/

Selecting A Font-family

To switch between any of the 5 font-families included, simply edit the style.css file, inside the css folder.

@import = "/assets/fonts/font-family/font-1.css";

Line #11 contains the import link. Here you can change it to any other of the fonts included, IE: font-1.css, font-2.css, font-3.css, etc.

How To Find The Right Icon

Version 2.0.2 adds and brand new icon library, the Bootstrap Icons v1.11.1. These are free and open source icons, so it's easy to browse for the specific icons and get the bi code. Check the icon cheatsheet here:

Bootstrap Icons v1.11.1 - https://icons.getbootstrap.com/

Editing The Main Buttons & Social Icons

Once you find the bi code of the icon that you are looking for, you can easily edit any of the main buttons or social media buttons. Simply replace the mdi code.

This is the bi code for the YouTube logo:

<i class="bi bi-youtube"</i>

Looks like this:

Let's replace it with the Twitter / X logo.

<i class="bi bi-twitter"</i>

Now looks like this:

Theme Changelog:

Here's a brief description of some of the changes:

Version 2.0.2 - Full Icon Library Update - X - Meta - Threads - Tiktok, etc.

A complete overhaul of the icon library, both material icons & mobirise icons have been deleted and replaced with Bootstrap Icons v1.11.1.
Style.css file has been updated.
All index.html files have been updated.
The gradient-bg.css file has been updated.
The video-bg.css file has been updated.
All the old icon files in the "assets/css/fonts/" folder have been deleted.
All the old icon files in the "assets/css/" folder have been deleted.

Version 2.0.1 - Modal Form Update.

The issue with the modal form not posting the info has been fixed.
CSS styling for the modal form has been updated.
A "clear/reset" button has been added to the modal form, it allows you to clear/reset all the text-boxes at once.
Overall theme compatibility has been updated.

Version 2.0.0 - This is a major update, replacing all files is recommended. This update includes:

Light/Dark mode toggle switch added
Modal contact form added
5 different fonts added
All Index HTML files updated
All Contact HTML files removed (Deprecated - Contact form opens on the same page, no need for a secondary page now.)
All CSS color files updated
Bootstrap.min.css file updated
Bootstrap.min.js file updated
Theme page & documentation page updated - https://themes.jperez.ca/
Contact.php file has been updated
Back to top class & button added.

Version 1.0.5.1 - PHP 8.2 compatibility, contact form. Updated documentation page
Version 1.0.4 - Background video playback, new css style for video template & new background gradient color.
Version 1.0.3 - True dark mode updated (same colour scheme as the YouTube app).
Version 1.0.2 - Contact form added, cleaner CSS.
Version 1.0.1 - Documentation page added, cleaner layout, updated to Bootstrap 5.
Version 1.0.0 - Theme Introduction.

Treelink Docs

A modular, responsive & minimalist "Link in bio" theme built with Bootstrap 5. Easy to deploy & easy to edit. Ideal for mobile & social media use.