Cosmo

Customization

Cosmo template is crafted with high customizability approach. In this section you will find some "how to's" to make your website more unique and stylish. There are most popular customization abilities are hightlited. If you need more assistance don't hesistate to contact our support.

Customizing canvas special effects

If you don’t like the existing pre-made configuration for special effects plugin, you can easily style it the way you like. This is really simple to tune Particles.js plugin without touching a single line of code!

You can customize almost everything in Particles.js plugin including color, style, direction, speed, interactivity and much more. Just go to Particles.js generator. Use this playground to fine tune every parameter of particles. After you’re done, click on "Download current config json". Now simply overwrite the existing configuration file in js/particlesjs-config.json with the new one.

If like to apply canvas particles drawing on the specific section, simply add id="particles-js" ID to the HTML element.

<section class="page-section page-section_intro _overlay-black _background-image1" id="particles-js">
  ...
</section>

Adding overlays to the sections

Adding overlay is a good design practice when you want to increase text readability or just to style a page section. There are 3 overlay types you can easiliy use throughout the template (see an example). Simply add one of the following classes to an HTML element:

1. ._overlay-black - black overlay
2. ._overlay-white - white overlay
3. ._overlay-pattern - overlay with pattern (good for video background)

Please note, that your HTML element should be block or inline-block and should have position: relative; CSS property set on.

<section class="page-section page-section_intro _overlay-black _background-image1" id="particles-js">
  ...
</section>

All about parallax background effects

There are 2 types of parallax background effects predefined in Cosmo. If you wish some specific page section to be spiced with parallax effects, please make sure that:

1. The section has valid background image CSS property background: url('/path/to/image.jpg');
2. You have added .js-jarallax_type_1 or .js-jarallax_type_2 HTML classes to the section.
3. js/common.js script file is working and functioning correclty.

If you need more control on your parallax effects, please refer to Jarallax plugin website.

<section class="page-section page-section-casting _background-image3 js-jarallax_type_1">
  ...
</section>

Setting up background video

index_3.html is an example on how you can place your own background video from Youtube. To set your own video as a background, simply follow these steps:

1. Open js/common.js file with any text editor and jump to 108 line.
2. Customize this parameter in the function: videoId: 'ul-K_c-RfHk'
3. This code may be obtained from any Youtube video. Once some youtube video is opened look at the URL in your browser: https://www.youtube.com/watch?v=ul-K_c-RfHk

There are some other parameters available to customize. If you need more control on your video backgrounds, please refer to jQuery Youtube Background website.

// video background
$('#js-video-background').YTPlayer({
    fitToBackground: true,
    loop: true,
    videoId: 'ul-K_c-RfHk',
    quality: 'small',
    playerVars: {
        modestbranding: 0,
        autoplay: 1,
        controls: 0,
        showinfo: 0,
        branding: 0,
        rel: 0,
        autohide: 0,
        start: 35
    }
}); 

Setting up contact form

Cosmo comes with simple mail.php script which allows you to gather leads from your website. Open mail.php file with any text editor and change $recepient variable to your own e-mail address. Some other variables and text templates are also safe to customize.

Please note that you need PHP to be enabled on your hosting with mail() allowed function. To get more information, please contact your hosting provider.

<?php

$frm_name  = "Mailer"; //your name
$recepient = "admin@example.com"; //your e-mail
$sitename  = "Cosmo HTML Template"; //your site name
$subject   = "New contact from \"$sitename\""; //subject template

$name = trim($_POST["visitor_name"]);
$email = trim($_POST["visitor_email"]);
$msg = trim($_POST["visitor_msg"]);

$message = "
-------------------<br><br>
Visitor name: $name <br>
Visitor email: $email <br><br>
$msg
<br><br>-------------------
";

mail($recepient, $subject, $message, "From: $name <$recepient>" . "\r\n" . "Reply-To: $recepient" . "\r\n" . "X-Mailer: PHP/" . phpversion() . "\r\n" . "Content-type: text/html; charset=\"utf-8\"");
?>