Created: 11/11/2020
Last Update: 21/02/2023
By: AthenaStudio
E-mail: athenastudio87@hotmail.com
Twitter: twitter.com/AthenaStudio87

## Table of Contents

1. Directories
2. Font Used
3. Color Schema
4. Background Image - Video
5. Newsletter
6. Contact Form
7. Google Maps
8. RTL Languages

### A) Directories

source - PSD files.

deploy – Published files to use the theme where you can modify all content and features. These are the files you need to upload to your server.

help – Help file (HTML)

### B) Font Used

Roboto - https://fonts.google.com/specimen/Roboto
Font Awesome - https://fontawesome.com/
Linea - https://github.com/linea-io/Linea-Iconset

You can change font from CSS file.

### C) Color Schema

Naxos comes with 8 predefined colors blue, green, red, turquoise, purple, orange, yellow and grey.

You can change the color of theme by the following code in demo HTML sources, <head> tag:

    <link rel="stylesheet" href="layout/colors/blue.css" class="colors">

### D) Background Image - Video

Single Image

Open layout/js/main.js in a text editor. You'll see the following code:

    $(".banner.image-bg").backstretch("images/banner/single-image.jpg");

Image Slideshow

Open layout/js/main.js in a text editor. You'll see the following code:

    $(".banner.slide-bg").backstretch([
      "images/banner/slideshow-1.jpg",
      "images/banner/slideshow-2.jpg",
      "images/banner/slideshow-3.jpg"
    ], {duration:3000, fade:750});

Youtube Background

Open video.html in a text editor. You'll see the following code:

    <div id="BackgroundVideo" class="player"
      data-property="{
        videoURL:'https://www.youtube.com/watch?v=mqEeWiRwv0k',
        mobileFallbackImage:'images/banner/video.jpg',
        containment:'#home',
        autoPlay:true,
        showControls:false,
        mute:true,
        startAt:2,
        opacity:1,
        showYTLogo:false,
        vol:50
      }">
    </div>

You can the video by replacing mqEeWiRwv0k with your own Youtube video ID.

### E) Newsletter

1st solution: MailChimp

Get your API Key:

Step 1 - Click your profile name to open the Account Panel and choose Account.
Step 2 - Click the Extras drop-down menu and choose API keys.
Step 3 - Copy an existing API key or click the Create A Key button.

Step 4 - Be careful that your list asks just the email address, Audience / Signup forms / Form Builder / Build it. See the screenshot below.

Get your Audience ID:

Step 1 - Navigate to the Audience page on the top left of your dashboard.
Step 2 - Click on Manage Audience drop down menu and select Settings.
Step 3 - Click on Audience name & defaults to find the unique Audience ID for the list, see the screenshot below.

Final step

Open the file php/subscribe.php and fill up the API_KEY and LIST_ID fields.

2nd solution: File

Save the emails in a text file.

Set up the file storage:

Step 1 - Open the file php/subscribe.php
Step 2 - You have to fill up the fields as seen below:

    $STORE_MODE = "file";

3rd solution: Email

You can receive subscribers's emails directly in your mailbox.

Set up the email sending:

Step 1 - Open php/subscribe-mail.php
Step 2 - Write your email and don't forget to change the path in your html.

    $toName = "Naxos";
    $toAddress = "email@sitename.com";

Step 3 - Change the subscribe form action to php/subscribe-mail.php in HTML file.

### F) Contact Form

You need to configure php/contact.php to get e-mails from the users.

Change those variables on line 11 with the real name & e-mail address to send the mail information:

    $toName = "Naxos";
    $toAddress = "email@sitename.com";

### G) Google Maps

Please, get an API key here:
https://developers.google.com/maps/documentation/javascript/get-api-key

Change the demo API key with your own in HTML pages:

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]"></script>

### H) RTL Languages

Firstly, add following settings to html tag:

    dir="rtl" lang="COUNTRY CODE"

For example (Arabic):

    <html class="no-js" dir="rtl" lang="ar">

Then, replace Bootstrap CSS file with RTL version:

    <link rel="stylesheet" href="assets/library/bootstrap/css/bootstrap.rtl.min.css">

After that, add rtl.css to head after media.css:

    <link rel="stylesheet" href="assets/css/rtl.css">

Finally, edit assets/js/main.js and replace rtl:false:

    rtl:true