1. Item Name : Musicly - Music Bands and Musicians HTML Template + RTL
  2. Created: 19 April 2023
  3. Item Version : v 1.0
  4. Author : Topylo
  5. Support Ticket: https://support.bdevs.net/

Introduction

Musicly - Music Bands and Musicians HTML Template Documentation

For any support please don't hesitate to contact us at Support Center. We provide 16 hours real-time support for our customers.

We would like to thank you for choosing Musicly - Music Bands and Musicians HTML Template.

Getting started

Musicly is a clean and modern HTML5 , Music Bands and Musicians Template. We have built Musicly to be as compatible as possible so that you can use it for any of your needs. It’s suitable for any music, band, club, party, event, magazine, classic, podcast, podcasts, artist etc.

Template Features

  • HTML5 & CSS3
  • Bootstrap v5.x
  • Font Awesome Pro
  • SVG Icon
  • Built With SASS
  • jQuery
  • Gsap3
  • 3 Home Pages
  • Responsive Design
  • Pixel Perfect Design
  • Creative Animations
  • Clean Code & Unique Design
  • Easy to Customize

What's Included

After purchasing Musicly template on themeforest.net with your Envato account, go to your Download page. You can choose to download Musicly template package which contains the following files:

The contents of the template package downloaded from ThemeForest

  • Musicly - An HTML Template file. this file you can edit and use for your Services.
  • Documentation - This folder contains what you are reading now :)

Template Structures

Articles

HTML Structure

This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into different section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.

3.1.1
HTML Markup Structure

CSS Files and Structure

We are using one customed CSS files (main.css) and several vendor css files. CSS file structure is as follows:

3.1.1
CSS Files and Structure

JavaScript Files

There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:

3.1.1
JavaScript Files

Change Contents

Changing Images

To change any images of the website

  1. Carefully collect the source name of the image (i.e. hero.jpg)
  2. Open the file called img
  3. Find the particular image file.
  4. Replace the file with your image.
  5. Make sure that the file name does not change. The file name should be the same.

Example: Suppose you want to change the following image file:

4.1.1

You have to do the following to change this image with your own image:

  1. Open the file called img
  2. Find the particular image file called news-06.jpg
  3. Replace the file with your image
  4. Make sure that the file name does not change.

Changing Colors

We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the main.scss file after you have made changes in any of the .scss files. We have compiled scss files into main.css file.

Changing default template colors

  1. Open the colors.scss file from assets > app > scss > utils folder with a text-editor.
  2. Change the right-side values of the variables to change any default colors of your site.
  3. Save your file.
4.1.1

Change the default dirrection LTR to RTL

  1. Open the settings.js file from assets > app > js > settings.js file with a text-editor.
  2. Change 1 small code following the attachment below
  3. Replace ltr text to rtl following the attachment in settings.js file
4.1.1
4.1.1

Hide the Color Switcher

  1. Open the settings.js file from assets > app > js > settings.js file with a text-editor.
  2. Change 1 small code following the attachment below
  3. Add a d-none class following the attachment in settings.js file
4.1.1
 4.1.1
 4.1.1

Support

If you face any issue please contact us at Support Ticket. We provide 16 hours real-time support for our customers.

Thank you for purchasing our template.