Documentation by “Ansonika” v1.3
“ATENA - HTML Site template”
Created: 13 October 2015
Last update: 28 Feb 2017
By: Ansonika
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to post a comment on item page. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!
Table of Contents
- HTML Structure
- CSS Files, Structure and basic modifications
- PHP contact form, quotation and quotation wizard
- JavaScript
- Sources and Credit
Updates
V.1.3 (28 Feb 2017).
- Fixed an issue relative to the Coming soon page
V.1.2 (22 October 2015).
- Added other languages support for the main Proxima font. To update from previous versions, please copy, paste and replace the entire folder "main_font" located in in your css folder.
- Added a Jquery text rotator in index_4.html
A) HTML Structure - top
This theme has a fixed centered layout 1170px. It's based on Boostrap framework grid. It's ULTRA RESPONSIVE!!. It comes with two versions: one with a side nav menu and another one with a standard horizontal menu. 3 premade color scheme are available.
B) CSS Files Structure and basic modfication - top
The css files are inside the css folder (minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. Below how the file is organized:
1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure
2. CONTENT
- 2.1 Home all versions
- 2.2 Accademics/single course page
- 2.3 About
- 2.4 Gallery
- 2.5 Staff
- 2.6 Contact
3. COMMON
3.1 Preloader
3.2 Forms
3.3 Container backgrounds
3.4 Login/Register modals
3.5 Spacing
3.6 Newsletter footer
3.7 Pagination
3.8 Search modal
3.9 List styles
3.10 Misc
3.11 Tooltips
IMPORTANT
All the common css styles are imported in base.css...this for a fast editing and more clean code.
Then some pages have on top some specific css style.
BASE.CSS
@import url("main_font/main_font.css"); /* Main Fonts */ @import url("animate.min.css"); /* Animate */ @import url("bootstrap.css"); /* Main Bootstrap */ @import url("menu.css"); /* Menu styles */ @import url("style.css"); /* Main theme styles */ @import url("responsive.css"); /* Responsive */ @import url("elegant_font/elegant_font.min.css"); /* Icon pack */ @import url("icon_font/pe-icon-7-stroke.min.css"); /* Icon pack */ @import url("fontello/css/fontello.min.css");ì /* Icon pack */ @import url("edu_fonts/edu_fonts.min.css"); /* Icon pack */ @import url("magnific-popup.css"); /* Lightbox & dialog script */ @import url("custom.css"); /* Your custom css*/ /* How to change colors 1) uncomment one of the color variation below 2) change the header images DONE! */ /* @import url("color-green.css"); Color variation Green */ /* @import url("color-purple.css"); Color variation Purple */ /* @import url("color-red.css"); Color variation Green */
LAYERSLIDER
Please refer this DOCUMENTATION
Change the primary color
The theme comes with 3 more predefined colors. Open base.css and follow the comments. For the tour page, please refer to tour.html and uncomment the color scheme.
/*How to change colors
1) uncomment one of the color variation below 2) change the header images/* @import url("color-green.css"); Color variation Green */ /* @import url("color-purple.css"); Color variation Purple */ /* @import url("color-red.css"); Color variation Green */
Set up site launch page located in site_launch folder
Open functions.js and find this line of code:
SET THE DATE
Open site_launch/js/functions.js and find this line.
var target = new Date("July 15 2014 13:30:00 GMT+0100"); //replace with YOUR DATE SET NEWSLETTER EMAIL
Open site_launch/assets/newsletter.php and find this commented code.
//$address = "your email address";
$address = "test@domain.com";
Change the address of Google map in contact page: open mapmarker_func.js and change with your latitude and longitude + your full address. You can change also your map marker (that has to be png24); you can use also the psd provided in the psd folder.
//set up markersCOMMON ISSUE ON GOOGLE MAP (if the Google map works locally but does not works once the site will be online)
var myMarkers = {"markers": [
{"latitude": "51.511732", "longitude":"-0.123270", "icon": "img/map-marker2.png"}
]
};
//set up map options
$("#map").mapmarker({
zoom : 14,
center : 'Covent Garden London', //YOUR FULL ADDRESS
markers : myMarkers
});
In some cases Google requires an api key for the Google map.
You can create your own "Standard api key" here
by clicking on "GET KEY" BUTTON (on Authentication for the standard API—API keys section),
and follow the steps. https://developers.google.com/maps/documentation/javascript/get-api-key#key Here some additionale info on how to create an API KEY http://thegrue.org/google-map-javascript-api-key/
Then replace at the bottom of every page that use Google map, this line
<script src="http://maps.googleapis.com/maps/api/js"></script> OR <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
with your api key included, like the example below
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Home with video header (fallback with a background color in tablets and mobile)
1)Save you mp4 and ogv video in the video folder.The name of the files must match the datasource tag:
Example
data-teaser-source="video/intro" (folder/name_files)=
intro.mp4
intro.ogv
2) Optionally you can set a video play button for youtube/vimeo that works only in tablet and mobile by
changing the link in the html
<a href="https://www.youtube.com/watch?v=Zz5cu72Gv5Y" class="video animated fadeInUp button_intro outline">
Play video</a>. NOTE THIS BUTTON IS VISIBLE ONLY ON TABLETS AND MOBILES.
Responsive table (ex. in academic_single_course.html)
NOTE THAT THE TABLE HEADS CHANGE ON MOBILES VIA CSS
.table.cart-list, .table.cart-list thead, .table.cart-list tbody, .table.cart-list th,
.table.cart-list td, .table.cart-list tr{ display: block; border:0; }
.table.cart-list thead tr { position: absolute;top: -9999px;left: -9999px;}
.table.cart-list tr { border: 1px solid #ccc; }
.table.cart-list td { border: none;border-bottom: 1px solid #eee; position: relative;padding-left: 50%; }
.table.cart-list td:before { position: absolute;top: 12px;left: 12px;width: 45%;
padding-right: 10px; white-space: nowrap;}
.table.cart-list td:nth-of-type(1):before { content: "Day"; font-weight: bold; color:#111; }
.table.cart-list td:nth-of-type(2):before { content: "Lessons"; font-weight: bold; color:#111; }
.table.cart-list td:nth-of-type(3):before { content: "Workshops"; font-weight: bold; color:#111;}
.table.cart-list td:nth-of-type(4):before { content: "Group session"; font-weight: bold; color:#111;}
.table.cart-list td:nth-of-type(5):before { content: "Exams"; font-weight: bold; color:#111;}
THE GRID
Please refer to this documentation Boostrap
C) PHP files: Contact form, Quick home contact, Plan a visit, Newsletter - top
The templates use two different types of php scriptst: one for the contact form, quick home contact, newsletter (all the files are located in the assets folder), second one for the plan a visit page.
Below the script for the contact form, you can set the error messages in the validate.js.
If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings
3) If your email has to be managed from the same hosting provider
4) Set the permission of the asset folder on your host to 755 your FTP client
5) This script does not support SMTP authentication.
Same logic of the script above, for the quick home contact form and the newsletter.
D) JavaScript - top
This theme use These Javascript (minified versions included). i've included the common theme scripts in a single file for a fast edit and load.
common_scripts.js content:
- Boostrap.js
- Magnifc-popup.js
- Retina-replace.js
- Wow on scroll animate
- Menu (for the horizontal menu version)
Below a full list of js used.
E) Sources and Credits - top
I've used the following images, icons or other files as listed.
- Twitter Bootstrap
- Fontello
- Elegant Icon font
- Magnific popup
- Retina replace
- Jquery validate
- Jquery
- Agenda calendar
- Bootstrap datepicker
- Bootstrap timepicker
- iCheck for styling checkbox and radio buttons
- Wow
- Animate.css
- Modernizr
- Morphext - text rotator
Images are not included.
Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.
Need support?
For support contact me using the form on my profile page with subject [ThemeForest Support] Template name, or submit a comment on item page. You will receive an answer within 24-48 hours (working days) GMT +1.- I only provide support for fixing bugs or small issues on my items.
- I don't provide free support for additional custom modifications to the items.
- Please provide your site link, screenshots and other information about your issue.
Need customization or availability for freelance projects?
Just send an email via profile page form; please don't forget to specify:- if you are a company, agency or private user
- all the information about your projects, needs, site urls, project sheet, etc..
- from which country you are
- if you have a deadline
- if you have basic knowledge of HTML , CSS, JS, PHP
Ansonika