Documentation by “Ansonika” v1.6


“UDEMA - HTML Site template”

Created: 7 november 2017
Lat udpate: 15 June 2019
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

  1. HTML Structure
  2. CSS Files, Structure and basic modifications
  3. PHP contact form, newsltetter form and plan a visit form
  4. JavaScript
  5. Sources and Credit
  6. UPDATES

A) HTML Structure - top

This theme has a fixed centered layout 1170px. It's based on Boostrap 4 framework grid. It's ULTRA RESPONSIVE!!.


B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply. 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
- 2.2 About
- 2.3 Courses list
- 2.4 Course detail
- 2.5 Login/register/admission
- 2.6 Contacts
- 2.7 404 page

3. COMMON
- 3.1 Misc
- 3.2 Accordion
- 3.3 List
- 3.4 Input forms
- 3.5 Spacing
- 3.6 Block reveal
- 3.7 Search modal
- 3.7 Cookie bar

Note
Some pages required additional specific css in the header, for example in the blog page.
<!-- SPECIFIC CSS -->
<link href="css/blog.css" rel="stylesheet">

The items comes with SASS files.

Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 34px). Below how is coded

Suggested max height 42px.

REMEMBER to create the retina version that have double size of the orginal dimension and name it with _2x
(in this case for example width:298px height:84px logo_2x.png).

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 markers 
var myMarkers = {"markers": [
{"latitude": "51.511732", "longitude":"-0.123270", "icon": "img/map-marker.png"}
]
};

//set up map options
$("#map").mapmarker({
zoom : 14,
center : 'Covent Garden London', //YOUR FULL ADDRESS
markers : myMarkers
});
COMMON ISSUE ON GOOGLE MAP (if the Google map works locally but does not works once the site will be online)
In some cases Google require 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>

NOTE: if you apply an api key, the map locally does not load. You must upload your site.

Home with video header (fallback with a background image 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 You can change also the opacity in style.css

video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.6;
}

2) To change the fallback background image for mobiles and tablets open css/style.css and find this class:

@media (max-width: 1024px):
#hero_video{ background: #333 url(../img/bg_home_fallback_video.jpg); background-size:cover; background-position: center bottom;}

Admission wizard

Add one more step to the wizard
Each step is defined by a div, so simply duplicate one of them. Below an example of the structure:

<div class="step">
	your content....                
</div><!-- end step-->

Make an input field, select or radio/checkbox required or not.
Simply add or remove the class "required" to the element. To change the error message go to js/jquery.validate.js.

Add one more questions with checkbox answer
Open the HTML page. As you can see the name of the input has to be the same with at the end [], each one have a different value. in the example below we add 2 more checkbox questions:

<h3>Question?</h3> 
<div class="form-group radio_input">
<label> <input type="checkbox" value="Management" name="preferences[]" class="icheck">Management adn Business </label> </div>
<div class="form-group radio_input">
<label> <input type="checkbox" value="Art" name="preferences[]" class="icheck">Art: Impressionist </label>
</div> $message .= "\n3) Your course preferences\n" ;
foreach($_POST['preferences'] as $value)
{
$message .= "- " . trim(stripslashes($value)) . "\n";
};

Antispam protection:
spam bots usually disable javascripts to avoid the jquery validation or automatically fill all the input fields and send the email. Now the php submission script link is removed from the html and placed inside the the js script. So if the js will be disabled, the form will be not processed. The js script check also if the hidden input field (id website) is filled by the spam bot...if filled the form will be not processed.

LEAVE THE HIDDEN INPUT FIELD WEBSITE for the reason above
<input id="website" name="website" type="text" value="">

THE GRID
Please refer to this documentation Boostrap



C) PHP files: Contact form - top

All the files you need are located in assets folder. If you need to change the allert messages open assets/validate.js. Below an example taken from contact.php; all the files are well commented.

Contact form
It's the same logic and script of check newsletter. If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings (SMTP Authentication is not supported by the script)
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


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 (or if you prefer you can find the same js in separate files in js folder).

common_scripts.js content:


E) Sources and Credits - top

I've used the following images, icons or other files as listed. For the js listed below, you can find the more documentation on the relative sites.

Images are not included.


E) Updates - top

v.1.6 15 June 2019

How to update from previous version:

 1) Update js/common_scripts.js

Version 1.5 10 December 2018

HOW TO UPDATE FROM PREVIOUS VERSION

1) Update the following files:
- js/bootstrap.js
- js/bootstrap.min.js
- css/bootstrap.css
- css/bootstrap.min.css - js/common_scripts.js - js/common_scripts.min.js 2) Update css/style.css - scss/style.scss or remove @import for google font Add on every html pages: <!-- GOOGLE WEB FONT -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800" rel="stylesheet"> Same changes for the coming soon page and admin section (html pages + css/admin.css - scss/admin.scss) For the html_menu_1 version, menu_2.css has been included in style.css 3) Takes as reference index-6.html + in style.css the section /* Home with Flexslider */

Version 1.4 6 August 2018

HOW TO UPDATE FROM PREVIOUS VERSION

1) On footer of admission.html change this script
<script src="js/main.js"></script>

into

<script src="js/main_admission.js"></script> 2) copy and paste this file (html_menu_1 version only) js/main_admission.js in the html_menu_1/js folder 3) In admission.html delete this line <nav id="menu" class="fake_menu"></nav>

Version 1.3 26 January 2018

Version 1.2 5 December 2017

 HOW TO UPDATE FROM PREVIOUS VERSION

1) PHP working newsletter footer
Update assets folder + in style.css under the comment /* Newsletter footer (updated v.1.2) */ 2) Cart pages
New in css/style.css (section 2.8) 3) Detail page with PHP working form
New in css/style.css (section 2.9) 4) Media Gallery
New in css/style.css (section 2.10) 5) Agenda Calendar
Check the new page and relative css in the head and scripts on footer.
Then in css/style.css (section 2.13) 6) Teacher detail page
New in css/style.css (section 2.10) 7) Faq page
New in css/style.css (section 2.11) + update js/main.js

6) Help page
New in css/style.css (section 2.11) 7) Fixed z-index issue Magnific Popup
Update css/vendors.css and css/venedors.unminfied.css 8) Improved Menu version 2
New in menu_2/css/style.css (section 1.4)

Version 1.1 25 November 2017


Maybe you are interested in




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.

Need customization or availability for freelance projects?

Just send an email via profile page form; please don't forget to specify:

Ansonika

Go To Table of Contents