Thank you for purchasing Soonr. If you have any questions that are beyond the scope of this help file, please feel free to contact us either on Themeforest or via Email.

Soonr Features

• Modern, Minimalistic and Flexible Coming Soon Template
• Built on Bootstrap 3
• HTML5 & CSS3
• Fully Responsive Design
• Touch Ready
• Countdown
• >10 Template Variations
• Animating Bokeh Overlay
• RAINDAY Jquery Effect
• Youtube Video Background
• Full Background Slider
• Static Background
• Pattern Overlay
• and variations / combinations
• +50 Animation Effects for text, images and more
• Full Working AJAX Newsletter including sending animation and prevention of multiple submits
• Modal view for Newsletter / About and Contact Section
• Preloader
• 361 Scalable Vector Icons
• Display an under construction message of your choice
• Easy to customize
• Add links to your social networks
• Crossbrowser Compatible with IE8+, Firefox, Safari, Opera, Chrome
• Extensive and detailed Documentation

The installation is straight forward. Unzip the downloaded pack. You will find a template folder with all the files for this theme.
Edit the files to your needs in your favourite editor.
Note: The theme can also be displayed offline (however the newsletter form will not work as it needs PHP support).
After you have done your updates upload all the files to your server.

Checklist

• Replace all the placeholder images
• Replace all the dummy texts
• Check all the links
  1. if there's not just a # sign
  2. if they actually go somewhere
• Edit the newsletter form php file

Basically there are just 4 things you should edit before using Soonr on your site. The text you would like to display, the countdown, your social icons and finally of course how you would like to display the page (Full Background slideshow, Youtube Video and so on...).

Your Text

Main Text

You can find the right spot in the index file when searching for the head section. Put your text here.

Modal Text

As you might have already seen. There is modal view coming from the top when you use the navigation. This is where the newsletter form / about and contact page is displayed. Consequently this needs to be changed as well. All necessary information is also located in the index.html file. It is located in the modal section. Each "page" is an article. So newsletter e.g. is located in article modal-newsletter.

Your Countdown

In the main.js file you should change the countdown to your personal go live date. Search for the following line.

							var target = new Date("Jan 01 2015 21:15:00 GMT+0200"); //replace with YOUR DATE

Change the date which is MONTH / DD / YYYY / HH:MM:SS and timezone to your needs.

Social Icons

In the index file go to the footer section. Here you will find all social icons listed. Add/edit yours like this

So URL and SOCIAL-ICON-NAME needs to be changed. The icons are provided by Font Awesome. Take a look at their documentation to see which social icons are available.

Selecting a template

Within this package several index-*.html files are included. They define the style of your template. Basically you can decide between 5 different styles.

• N E W : Rainday. An incredibly good looking JQuery rain simulation (index-rain.html)
• Static Background (a background color) (index-staticbackground.html)
• Static Background Image (a single background image) (index-staticimage.html)
• Full Background Slider (a slideshow of images in the background) (index-slider.html)
• Youtube Video (a youtube video as background) (index-youtube.html)

On top there is a fifth index-*.html file (index-slider-bokeh.html) which uses the Full Background Slider and puts a bokeh effect on top.

You can find a detailed explanation in section Styles.

• Bokeh effect
• Pattern Overlay (for better readability)

You can find a detailed explanation in section Effects

This section displays the basic html structure for the different sections.

Main Page

						

							

								

									

										
									
								
								

									...
								
							
						
					 

The structure for the main page is straight forward. The page is structured in 3 rows. One for the headline and the text, the second one for the divider (which says: we will be back in) and the third one for the counter. As this theme uses bootstrap as framework, its grid system can be used which dynamically (responsive) expandes or contracts based on the available space. Bootstrap uses a 12 column grid system. The following example shows a 8 to 4 seperation of the content. For further information please refer to Bootstrap Grid System.

Modals

As you can see the structure is nearly identical.

As already explained you can choose between 4 different styles. Consequently you can find several different index files. Choose the file that is right for you and apply the modifications as described in the setup section.

• Static Background (a background color) (index-staticbackground.html)
• Static Background Image (a single background image) (index-staticimage.html)
• Full Background Slider (a slideshow of images in the background) (index-slider.html)
• Full Background Slider with Bokeh Effect(a slideshow of images in the background) (index-slider-bokeh.html)
• Youtube Video (a youtube video as background) (index-youtube.html)

The Styles are achieved by using several plugins. Please refer to their documentation for instructions.

• jQuery tubular plugin - Youtube Background Video
• Superslides - Full Background Slider

Three effects can be applied to the different templates.

Rainday

Rainday.js is a plugin provided by Maroslaw which takes a image and creates realistic raindrops on it. A demo is included within this package (index-rain.html). At the bottom of the file you will find the basic settings for the rain

		             		/*
							 * rainday.js implementation
							 */
							function run() {
								var engine = new RainyDay({
									element : 'rain-background',
									blur : 10,
									opacity : 1,
									fps : 30
								});
								engine.trail = engine.TRAIL_DROPS;
								engine.rain([[3, 2, 2]], 100);
							}
		             

Bokeh

Go to the bottom of your index file. Locate this section.

		            	   $(".bokeh").bokeh({
			        			minCount:5,
			        			maxCount:10,
			        			minSize:25,
			        			maxSize:250,
			  					color:'white',
			        			speed:50000
			        		});      
					

As you can see there are several parameters you can play around with.

• minCount: Minimum number of bokeh elements
• maxCount: Maximum number of bokeh elements
• minSize: Minimum size of bokeh elements
• maxSize: Maximum size of bokeh elements
• color: Color of bokeh elements (can be hex value as well)
• speed: speed after which movement should be finished (and next one starts. In milliseconds)

Bokeh effect can be applied to Static Background Image, Full Background Slider and Static Background

Pattern Overlay

Sometimes text can be hard to read if the background color and text color have a similar color. This theme covers you on that!

		            	   /*#slides .slides-container > div:before {
							   	background: url(../img/bg_pattern.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
							    content: "";
							    height: 100%;
							    left: 0;
							    position: absolute;
							    width: 100%;
							    z-index: 0;
							}*/   
					

Just uncomment it (which means removing /* and */ ). Now a dot pattern is applied to your Static Background Image and Full Background Slider

This theme includes a huge list of various animations you can use. To use the animations add the class .animated to an element, along with any of the animation names (see below). A script within main.js will handle the rest. The basic usage is the following:

The div gets the class animated and two data attributes. The first one defines the delay after which the animation will be triggered. Data-animation defines the animation.

Here is a list of all the possible animations

• flash bounce shake tada swing wobble pulse
• flip flipInX flipOutX flipInY flipOutY
• fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig
• fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig
• bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight
• bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight
• rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
• rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
• lightSpeedIn lightSpeedOut
• hinge rollIn rollOut

This theme extensively uses Font-Awesome icon fonts (version: 4.0.3). The implementation is simple. Just use the i tag and include the icon you want as a class.

This would include a Facebook icon

Preconfigurations

For the newsletter form to work properly you have to make some changes.
First make sure that PHP is installed on your server.

Put this code in a new file and call it test.php. It is important that the file ending is *.php. Access test.php. If you can see the code you just put in this file than you have NOT installed PHP on your server. Otherwise you have PHP on your server.

Change email recipient

So assuming PHP is installed properly, what you have to do now is changing the email recipients within the newsletter.php (located in the inc folder). So all requests are received by you.
Search for the following line and replace YOUR.EMAIL@MAIL.COM with your email. Please make sure that your email is still within the quotes.

							$admin_email = 'YOUR.EMAIL@MAIL.COM';
						

Preconfigurations

For the newsletter form to work properly you have to make some changes.
First make sure that PHP is installed on your server.

Put this code in a new file and call it test.php. It is important that the file ending is *.php. Access test.php. If you can see the code you just put in this file than you have NOT installed PHP on your server. Otherwise you have PHP on your server.

Initialize Mailchimp

Edit the "mailchimp/inc/store-address.php" file:
Line 24: replace "your_apikey" with an API Key retrieved from here:
http://admin.mailchimp.com/account/api/

Line 27: replace "my_list_unique_id" with the List Unique Id obtained by going to:
http://admin.mailchimp.com/lists/
Click the "settings" link for the list - the Unique Id is at the
bottom of that page.

						

							

								Email address
								
								
									 SUBMIT
								
							
							Don't worry we will not use your email for spam
							

						
						
					

The contact modal incorporates a static Google Maps image. You need to change the location of the Map to your location. The string looks like this.

As you can see the address is New%20York%20City which means New York City (%20 stands for space). So this is what you need to change to your location. The blue pin on the map is the so called marker icon. This is the code markers=icon:http://themes.createbrilliance.com/Soonr/theme/img/map-marker.png|New%20York%20City This line says where to get the image for the marker (please change that too) and where to put the marker (again NYC).

After you are done with changing the url you need to update this url in the css/main.css file as well

As you might have already seen there are different scripts used within this theme. Here is a complete list of all the scripts used (most of them in the plugins.js file)

• jQuery
• Modernizr
• jQuery tubular plugin
• Bootstrap Framework
• Superslides
• Owl Carousel
• Rainday.js

The bokeh plugin is created by CREATEBRILLIANCE - Media & Consulting