What's Included

Pheromone is a flexible theme with minimalistic and universal design. The theme also includes a variety of powerful jQuery plugins.

Plugins

The following plugins are used in the Pheromone theme. For more detailed usage instructions for each plugin, please visit the plugin website using the links provided below.

Form.js and jq Bootstrap Validation

A jQuery valdiation plugin for Bootstrap forms.
Plugin Website

Jquery Placeholder

HTML5 Placeholder jQuery Plugin for contact form
Plugin Website

Ion Icons

The premium icon font
Plugin Website

Font Awesome

The iconic font and CSS toolkit
Plugin Website

YTPlayer

jQuery component to build custom Youtube® player or to use a Youtube® video as background.
Plugin Website

Text Rotator

A light weight jQuery plugin that will allow to add rotating text to website
Plugin Website

Vegas Background Slideshow

VEGAS is a jQuery plugin which adds beautiful animated background slideshows to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.
Plugin Website

Device.js

Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo, AppleTV, etc), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
Plugin Website

Jquery Countdown

A simple and html agnostic date countdown plugin for jQuery
Plugin Website

TweeCool

Fast and simple Twitter plugin
Plugin Website

WOW.js

A jQuery plugin for reveal animations when you scroll.
Plugin Website

Animate.css

A CSS plugin for CSS animations.
Plugin Website

SmoothScroll.js

Smooth scrolling with the mouse wheel and keyboard buttons.
Plugin Website

Background Slideshow

Pheromone includes jQuery plugin which adds beautiful animated background slideshows to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.

Apply Slide Show to body or any element.

$('#example, body').vegas({
                    slides: [
                    { src: '/img/slide1.jpg' },
                    { src: '/img/slide2.jpg' },
                    { src: '/img/slide3.jpg' },
                    { src: '/img/slide4.jpg' }
                    ]
                    });

Read the Settings page for more information.

Contact form

Cover includes a working contact form. In order to activate the form, follow these directions:

• Open the mail/contact_me.php file.
• On line 17, enter the email address you want mail sent to. $to = '[email protected]'; // *REPLACE WITH THE EMAIL ADDRESS YOU WANT THE FORM TO SEND MAIL TO*
• On line 20, enter the email address you want messages sent to you to be from. $headers = "From: [email protected]\n"; // *REPLACE WITH THE EMAIL ADDRESS YOU WANT THE MESSAGE TO BE FROM*. Typically, an email address like [email protected] will work here.
• Save, and upload the file.

Adding Fields to the Contact Form

If you want to add fields to the contact form, you will need to edit the mail/contact_me.php file as well as the js/form.min.js file. Requires basic working knowledge of PHP and JavaScript.

If Your Form Isn't Working

If you have followed the instructions above, and uploaded your website to a live server and the form is still not working then it is likely that your web host is blocking the form from sending messages. In order to troubleshoot form functionality after it's been uploaded it is best to contact your server administrator or web host to see if there are permissions or security features preventing the form from sending, or if the version of PHP on your web server is not compatible with the form scripts.

MailChimp Signup Form

Pheromone now comes with a call to action box that has a built-in MailChimp signup form. All you need to do in order to activate this feature is include your MailChimp form action within the template! Below are the steps on how to do this.

1. Log into your MailChimp account.
2. Go to your lists. This is usually a link on the top menu bar called "Lists"
3. You will now see your subscriber lists on the screen. On the right hand side of the list there will be a button that says "Stats" and a dropdown arrow. Click on the dropdown arrow to open a menu and select "Signup forms."
4. Click on the second option that says "Embedded forms"
5. The embedded forms has multiple formats, but we only need the form action! To get the form action select the "Naked" form option. The other options are Classic, Super Slim, and Advanced.
6. Once you see the "Naked" form option you will see a preview and an embed code. Copy the embed code and paste it into a blank Notepad or text editor document. The code will have a <form action="...">. Copy the contents of the form action that is between the quotations, and drop the form action URL into the Pheromone template you're using!
7. Now the form should be working. You can test it by entering an email address and hitting the subscribe button. It should take you to a new window notifying you that you've signed up for the mailing list.

If you aren't using MailChimp you can still use the signup form HTML. Just delete references to the MailChimp scripts and use the remaining HTML as a template for your different signup method!

Video Background

To retrive the video from YouTube you can use any of the following string:

• The URL of the page containing the video
  videoURL: ‘https://www.youtube.com/watch?v=V2rifmjZuKQ’.
• The short URL available fron the YouTube share panel
  videoURL: ‘http://youtu.be/V2rifmjZuKQ’.
• The video ID
  videoURL: ‘V2rifmjZuKQ’.

Data-property

• mute: true (boolean) mute the audio;
• showControls: true (boolean) show or hide the player controls;
• ratio: ‘4/3’, ‘16/9’ or ‘auto’ (string) to set the aspect ratio of the movie; if ‘auto’ the aspect ratio will be retreived form the getDataFromFeed method.
• quality: ‘default’ or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”.
• opacity: 0 to 1 (number) define the opacity of the video.
• containment: (string) the CSS selector of the DOM element where you want the video background; if not specified it takes the “body”; if set to “self” the player will be instanced on that element.
• optimizeDisplay: true (boolean) will fit the video size into the window size optimizing the view.
• loop: true (boolean) or false loops the movie once ended.
• vol: 1 to 100 (number) set the volume level of the video.
• startAt: 20 (number) Set the seconds the video should start at.
• stopAt: 20 (number) Set the seconds the video should stop at. If 0 is ignored.
• autoPlay: true (boolean) or false play the video once ready.
• showYTLogo: true (boolean) Show or hide the YT logo and the link to the original video URL.
• showControls: true (boolean) Show or hide the controls bar at the bottom of the page.
• addRaster: false (boolean) Show or hide a raster image over the video.
• realfullscreen: true (boolean) activate the new HTML5 full screen behavior.
• stopMovieOnBlur: true (boolean) activate the pause behavior when the window loose focus.
• gaTrack: true (boolean) activate the Google Analytics event tracker for that player.

Text Rotator

Put every rotating words inside the <span class="rotate"></span> and separate it with a comma and the script will automatically cycle through each words in order.

Super <span class="rotate">Simple, Light Weight, Easy</span> Text Rotator

Read the Settings page for more information.

Countdown

Time and date setting: js/jquery.countdown.js

countdown('2016/05/22 10:00:00')

Read the Settings page for more information.

Twitter Widget

Setting: js/pheromone.js

$('#tweecool').tweecool({
                username : 'Your-username',
                action_reply_icon: '',
                action_retweet_icon: '',
                action_favorite_icon: ''

Google Map

Custom Google Map Skin, Address and PNG map marker (map-marker.png) setting: js/map.js

// The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(40.722330, -73.992905), // You Address Here

// Custom Map Marker Icon - Customize the map-marker.png file to customize your icon
                var image = 'img/misc/map-marker.png';

Smooth Page Scrolling

As a one page theme, the smooth page scrolling feature is a great way to let your users navigation your content while being contsantly aware of where they are on the page. In order to use the page scroll content, you need a few things. You need a link that you want users to click on to bring them to a section, a unique ID set for the section you want to navigation to, and the #you-section-id id added to the link itself.

Here is an example of what a link needs in order to scroll to a section:

<a href="#you-section-id">Link Text</a>

Credits Photos

• Pixabay - pixabay.com
• Unsplash - unsplash.com
• Im Free - imcreator.com
• Logo templates - freepik.com
• Nicholasmaggio - nicholasmaggio.com