Beatrix HTML Template Documentation

Template designed by Gossip Themes

1. Introduction#back to top

We would like to thank you for purchasing Beatrix! We are very pleased that you have chosen Beatrix for your Modern Clean Mgazine & Blog website, you will not be disappointed! Before you get started, please be sure to always search our Documentation. We outline all kinds of good information, and provide you with all the details you need to use our theme.

1.1. What's Included

After purchasing Beatrix template on templateforest.net with your Envato account, go to your Download page. You can choose to download Beatrix template only or the entire Beatrix template package which contains the following files:

  • Beatrix template: A .zip file with all .html files with all necessary assets.
  • Documentation: An HTML format documentation.
  • Licensing

1.2. How To Install Beatrix HTML Template

Installing a Beatrix Template is not like WordPress or CMS theme installation, actually, installation keyword does not go with Beatrix template. Why? Because you do not need to install anything, yes Beatrix or HTML templates are automatically rendered by the browser.

1.1 Editing Beatrix Template

Before all that you have to edit your template and place your own contents by replacing old demo contents, in this case, you will need a code editor such as – VScode, Sublime Text, Notepad++ etc. When template editing is done using editor, save the files and folder by pressing (ctrl+s) buttons and go ahead to upload template files on live server.

1.2 Uploading to Live Server Using FTP:

First of all, If you don’t have your template on your computer, download Beatrix template to get started. When download/purchase completed, you will get a package like this screenshot (after unzip).

screenshot

1.3 Package comes with documentation. Unzip the download package and you’ll found a folder with all template files, like below screenshot.

screenshot

1.4 Now, login to your hosting control panel or FTP client, such as: FileZilla, CyberDuck etc. and upload template files on your server root.

1.5 Once all files are uploaded, go to www.yoursite.com/index.html. You can see your homepage! Please, make sure the initial page is named as index.html

2. Template Structure#back to top

2.1. HTML Structure

This template is a fixed layout with three columns. The main contents are inside the 'body' tag divided into different section (i.e. header, blog-hero-area, most-recent-area, ..., footer, etc.). The general template structure is the same throughout the template. Here is the general structure.

screenshot

2.2. CSS Files and Structure

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

screenshot

2.3. Javascript Files

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

screenshot

3. Change Contents#back to top

3.1. Changing Images

To change any images of the website

  1. Carefully collect the source name of the media (i.e. logo.png)
  2. Open the file called media which is located in (yourrootpath/assets/media).
  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:

screenshot

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

  1. Open the file called media.
  2. Find the particular image file called logo.png
  3. Replace the file with your image
  4. Make sure that the file name does not change.
  1. Open the folder called media.
  2. Find the .svg files called logo.svg.
  3. Replace the files with your own logo.
  4. Make sure that the file names does not change.

3.3. Changing Colors

We have used css file for this project to write css. If you are familiar with css, you can easily customize the css files. Please make sure you save the app.css file after you have made changes in any of the .css files.

3.3.1. Changing Default Template Colors

  1. Open the app.css file from assets > css > app.css 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.

Have a look at the following image for a visual description:

screenshot

3.4. Changing Email Settings of the Contact Form

  1. Go to main folder
  2. Open mail.php
  3. Go to line number 3.
  4. Follow instructions in image below:
screenshot

Please, change the newsletter email address following the same produre from newsletter.php file.

3.5. Change Icons

We have used Icofont and RemixIcon for this project.

  1. Open the .html file with a text-editor from where you want to change any Icofont/RemixIcon icon
  2. Choose and collect icons from icofont.com and remixicon.com
  3. Replace the existing icon from the .html file with the new icon you got from icofont.com and remixicon.com which you prefer!
screenshot

To get any icons from icofont.com-

  1. Go to icofont.com
  2. Click the icon tab
    3. screenshot
  3. Search for your desired icon font and click on the thumbnail to get the icon
    4. screenshot
  4. Copy the red bordered text by clicking on the copy button as shown in the following image
    5. screenshot
  5. Collect this text and replace the existing icon from the .html file.

To get any icons from remixicon.com, follow the same process as given below-

  1. Go to remixicon.com
  2. Search for your desired icon and click on the thumbnail to get the icon
    3. screenshot
  3. Copy the red bordered text by clicking on the copy button as shown in the following image
    4. screenshot
  4. Collect this text and replace the existing icon from the .html file.

4. Sources and Credits#back to top

We've used the following fonts, free icons and plugins as listed:

5. Support#back to top

Please remember you have purchased a very affordable template and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your connivence, so please be patient, polite and respectful.

Please visit our profile page  Ask question through Support Desk.