Table of Contents
- Directories
- Font Used
- Color Schema
- Background Image - Video
- Newsletter
- Contact Form
- Google Maps
- 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