Moodboard Docs

Theme Introduction:

Moodboard is a minimalist digital moodboard with a responsive masonry layout, a visual link in bio template built with Bootstrap 5.3.3, CSS and JavaScript. Easy to deploy & easy to customize.

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 2 different main HTML page presets:

1. index_type.html
2. index_rotate.html

These correlate to the typescript header effect template & the rotate header 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
    │		    └─ cards
    │			    └── cards css file
    │  └─ fonts/
    │       └── All font files
    │  └─ js/
    │       └── All javascript files
    │  └─ images/
    │       └── All images & video files
    │  └─ php/
    │       └── Contact.php file
└─ html
    └─ All html files
                    

Editable CSS Files

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.

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.

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-1.css";

Line #12 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

This theme includes the Bootstrap Icons v1.11.1 library. 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: