Logo Image

Find and replace

Background - Fullscreen Image

In order to add a fullscreen image to a page, you have to add the class image-background to the body. Example:


<body class="image-background">

Change line 21 of main.js:


$.backstretch([
  "http://placehold.it/1920x1200"
]);

Background - Image Slides 


<body class="slideshow-background">

Change line 23 of main.js:


$.backstretch([
        "images/backgrounds/bg-1.jpg",
        "images/backgrounds/bg-2.jpg",
        "images/backgrounds/bg-3.jpg",
        "images/backgrounds/bg-4.jpg"
    ], {
    duration: 7000,
    fade: 800
});

Background - Youtube Video 


<body class="video-youtube-background">

Add to index.html:

Background - Youtube Video Blur

Background - Youtube Videos List 


<body class="video-youtube-list">
Change of main.js videoURL: "Your Youtube Video Short Code": 


var videos = [{
    videoURL: "0pXYp72dwl0",
    containment: 'body',
    autoPlay: true,
    mute: true,
    startAt: 0,
    opacity: 1,
    loop: false,
    ratio: "4/3",
    addRaster: true
}, {
    videoURL: "9d8wWcJLnFI",
    containment: 'body',
    autoPlay: true,
    mute: true,
    startAt: 0,
    opacity: 1,
    loop: false,
    ratio: "4/3",
    addRaster: false
}, {
    videoURL: "nam90gorcPs",
    containment: 'body',
    autoPlay: true,
    mute: true,
    startAt: 0,
    opacity: 1,
    loop: false,
    ratio: "4/3",
    addRaster: true
}];

Background - Gradient and Colors

Example:

More colors and graients backgrounds style.css 


.page-background{
  .gradien-1 ...
}

Background - Constellation

Insert html tag in body.

Countdown

Open js/main.jsfind and replace "2019/10/14 12:00:00" Line 140 


$('#clock').countdown('2019/10/14 12:00:00')

Elapsed timer

Open js/main.jsfind and replace Line 98-101 


//Put your elapsed date (in past)
var year = '2009';
var month = '03';
var day = '11';
var time = '00:00:00'
//End Put your elapsed date

Fonts

  • Template use Google Web Fonts
  • Choose your font and click on Quick-use.
  • Replace this code to your website.

Subscribe Form - Mailchimp

Add the Mailchimp Post URL of main.js: 

var mailchimpForm = $('.mailchimp-form');
mailchimpForm.ajaxChimp({
    callback: mailchimpMsg,
    url: "mailchimp-url-subscribe" // Replace this with your own mailchimp post URL. Paste the url inside "". The mailchimp post url will look like this: http://blahblah.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f
});
The mailchimp post url:

1. Log into MailChimp account.

2. Click the Lists button in the left navigation bar.

3. Click the drop-down box on the right, and choose Signup forms.

4. Choose Embedded forms.

5. Find Form code like Copy/paste onto your site

6. Copy code inside action=""

7. Open main.js and replace url: "mailchimp-url-subscribe".

Contact Form

The base version which will be delivered with this theme supports 4 different fields:

  • Name
  • Email
  • Message

If you need more field or just change the message outputs please open the "sendmail.php" and change the settings part to fit your needs. After you have changed these values you are already able to send emails.

Change on file sendmail.php at line 4 


$toEmail = "your@mail.com";     //Replace with recipient email address