HELP FILE

Informations

If you have any questions, feel free to email me via my user page with the contact form Here or by email: julien.brion.08@gmail.com

I would answer you as soon as possible ;-)
7/7 and almost 24/24 !

One more time, a big thank to you for have purchased Future ! :-)

Countdown Set your end date

• 1. Open the file "future.js" findable in assets/js/future.js
• 2. On line 75, you will find:

  /* **** 2. Countdown **** */       
  
  jQuery(document).ready(function() {
      $('#countdown_dashboard').countDown({
          targetDate: {
              'day':      24,
              'month':    12,
              'year':     2015,
              'hour':     11,
              'min':      13,
              'sec':      0
          },
          omitWeeks: true
      });

• 3. So just set up the date that you want :)

Be careful for the progress bar :

For the end date, when you set the month, if you want for example May, normally it's "05" but you must set "04". There is a one-month delay, month in javascript format is from 0 to 11...

• 1. Open the file "script.js" findable in assets/js/script.js
• 2. On line 55, you will find:
  var iNow = new Date().setTime(new Date(2013, 03, 18, 0, 0, 0).getTime() );
• 2.1 So just set up the start date like this: Year - Month(-1) - Day - Hours - Minutes - Seconds

• 2. On line 58, you will find:
  var iEnd = new Date().setTime(new Date(2015, 11, 24, 11, 13, 10).getTime() );
• 2.1 So just set up the end date like this: Year - Month(-1) - Day - Hours - Minutes - Seconds

Map Location & text

• 1. Open the file "future.js" findable in assets/js/future.js
• 2. On line 105, you will find:

  var myLatlng = new google.maps.LatLng(49.6122021,6.1324549,17);

• 3. On line 125, you will find:

  var contentString = We are here 28, Rue du Nord @ Luxembourg Located in the center of the city, lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum euismod erat, nec porta turpis fringilla sed. Morbi euismod metus sagittis, gravida orci id, tincidunt odio. Pellentesque habitant morbi tristique.

• I advise you to visit Snazzy Map to have a lot of styles for your map ;-)

background static index-1

• 1. Open index-1.html
• 2. At the bottom of your document, you will find:

  $.vegas({
      src:'http://placehold.it/1920x1080/2B2D35/514563'
  });

• 3. You just have to write the path of your picture

background rainy index-2

• 1. Open index-2.html
• 2. At the bottom of your document, you will find:

  blur: 0,  // Defines blur due to rain effect, 0-100
  opacity: 1,  // Opacity of rain drops
  
  //...
  
  engine.rain([ [1, 0, 100], [3, 3, 1] ], 100);
  // add 120 drops of size 1... add 2 drops of size 2 and 3 every 100ms

• 3. For change the background, on line 55, you will find:

  img id="background" alt="" src="http://placehold.it/1920x1080"

background slideshow index-3

• 1. Open index-3.html
• 2. At the bottom of your document, you will find:

  $.vegas('slideshow', {
      delay:8000,
      backgrounds:[
          { src:'http://placehold.it/1920x1080/2B2D35/CCCCCC', fade:3000 },
          { src:'http://placehold.it/1920x1080/18BC9C/FFFFFF', fade:3000 },
          { src:'http://placehold.it/1920x1080/F39C12/333333', fade:3000 }
      ]
      })('overlay', {
          src:'assets/overlays/01.png'
  });

• 3. You just have to write the paths of your pictures
• 4. You can set the duration of display (with delay), and the duration of fading between 2 pictures

background youtube index-4

• 1. Open index-4.html
• 2. At the top of your document, on line 59, you will find:

  {videoURL:'http://www.youtube.com/watch?v=u-qYMl9T9wQ'

• 3. You just have to change the part after the ?v= , and write the correct url of your video
• The plugin YouTube needs to have a website online to work, in local, the background stay black ;-)

Background YouTube - mobile & tablet

• The mb.YTPlayer doesn't work on any mobile devices (iOs, Android, Windows, etc.) due to restrictions applied by the vendors on media controls via javascript. Adding a background image to the body as mobile devices fallback is a good practice.
• 1. Open the file style.css, findable in assets/css/style.css
• 2. On line 585, you will find:

  .sub-picture {
      background-color:none;
      background-image: url('../img/re-video-phone.jpg');
      background-size:cover;
  }

• 3. Write the correct path to your substitution picture

background flat surface shader index-5

• 1. Open index-5.html
• 2. At the bottom of your document, you will find on line 341:

  light = new FSS.Light('#0d2656', '#fc000f');

• 3. The first color is for the background, and the second for the light

background bubble index-6

• 1. Open index-6.html
• 2. At the bottom of your document, you will find on line 334:

  $.vegas({
      src:'http://placehold.it/1920x1080'
  });

• 3. You just have to write the path of your picture

Parallax index-7

• 1. Open the file "index-7.html" to set the background
• 2. On line 345, you will find:

  $.vegas({
      src:'http://placehold.it/1920x1080'
  });

• 3. Open the file "style.css" findable in assets/css/style.css
• 4. On line 679, to set the second background, you will find:

  .layer:nth-child(1) {
      opacity: 0.15;
      background:url(http://placehold.it/1920x1080); /* I advise you to place a png with a transparent backgroud */
      background-size:cover;
      left:70px !important;
      top:-50px !important;
      position:absolute
  }

background FSS 2 index-8

• 1. Open index-8.html
• 2. At the bottom of your document, you will find on line 322:

  var ambient_value = '#33455b'; 
  var diffuse_value = '#20ad9c'; 

• 3. The first color is for the ambient color, and the second for the diffuse color

background worms index-9

• 1. Open index-9.html
• 2. For change the colors of the worms, at the bottom of your document, on line 336 you will find:

  colors: ['#f1e7c0'],

• 3. You just have to write the color that you want
• 4. For change the background, open the file "glassyWorms.js" findable in assets/js/glassyWorms.js
• 5. On line 336 you will find:

  background: ['#2B2D35']

• 6. You just have to write the color that you want

background stars index-10

• 1. Open index-10.html
• 2. At the bottom of your document, you will find on line 361:

  context.fillStyle = 'rgba(43,45,53,' + opacity + ')'; //color of the background
  context.strokeStyle='rgb(241,231,192)'; //color of the stars

carousel add pictures

• 1. Open one index.html
• 2. In the first part, around the line 210-220, you will find:

  <ol class="carousel-indicators">
      <li class="active" data-slide-to="0" data-target="#carousel-services"></li>
      <li data-slide-to="1" data-target="#carousel-services" class=""></li>
      <li data-slide-to="2" data-target="#carousel-services" class=""></li>
  </ol>

• If you want add a picture, add firstly a line under the others like this:

  <li data-slide-to="3" data-target="#carousel-services" class=""></li>

  Don't forget to check if you have correctly write the number data-slide-to="***"
• 3. After, add these lines under the others:

  <div class="item">
      <div class="row text-box">
          <div class="col-md-12">
              <a href="http://placehold.it/1800x1354" class="swipebox" title="My Caption" ><img src="http://placehold.it/1800x1354" alt="" class="img-responsive" height="363" width="560"/></a>
          </div>
      </div>
  </div>

contact form write your email

• 1- Open contact_me.php findable in assets/php/contact_me.php
• 2- On the line 9, you will find:

  $to = 'myemail@mail.com';
  

• 3. So just replace "myemail@mail.com" by your mail

Newsletter Mailchimp / File / Email

With this Coming soon, you have the choice between 3 solutions to know the persons wanting to be alerted when your website will be online, the launching of your event etc...

1. Mailchimp - Newsletter service

• More than 6 million people use MailChimp to create, send, and track email newsletters. Whether you're self-employed, you manage projects for clients, or you work for a Fortune 500 company, MailChimp has features and integrations that will suit your email marketing needs. More informations
• For the configuration with Mailchimp, you must just to know your API Key and the ID of your list.

• API Key

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

• 
  

  ---

  
  

  List ID

• 1- Navigate to the Lists page on the left of your dashboard.
• 2- Click the list's drop down menu and select Settings.
  
  
• 3- Scroll down to the bottom of the Settings page to find the unique List ID for the list.
  
  

Final step

• 1- Open the file "notify-me.php" findable in assets/php/notify-me.php
• 2- From the line 8 to 14, you will find:

  // Set to "mailchimp" or "file"
  $STORE_MODE = "mailchimp";
  
  // MailChimp API Key findable in your Mailchimp's dashboard
  $API_KEY =  "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
  
  // MailChimp List ID  findable in your Mailchimp's dashboard
  $LIST_ID =  "XXXXXXXXXX";
  

• 3- So to finish the configuration:
  • Check if the $STORE_MODE is well "mailchimp"
  • Replace the "XXXXX" by your API key & the ID of your list
• On line 23 of notify-me.php, Don't forget to check the path of MailChimp.php:

  require('../php-tools/MailChimp.php');
  

• On line 67 of notify-me.php, you can edit if you want that the subscribers receive a confirmation of their subscription:

  'send_welcome'      => true,

  Set true for the confirmation, or false to send nothing