Outsider

Contact Form

This template contains fully working php contact form. Forms used

- jQuery Validation Plugin form validation library,

- script contact.js (must be included before end body tag - see chapter Javascript)

- php file (contact-form.php or newsletter-form.php).

Contact Form (Newsletter Form)

In order to receive messages you need to edit line 8 of php/contact-form.php (php/newsletter-form.php) file and type in your own email address:

<?php
...
    // Your email address - edit line 8
    $to = "your@mail.com";                     < = = = HERE REPLACE YOUR EMAIL ADDRESS
...
?>

Latest Tweets Plugin

Plugin is based on jquery.tweet.js-mod plugin by Stan Scates. It is simple to use and configure.

First step: You need to have a twitter App for your usage in order to obtain OAuth credentials. See https://dev.twitter.com/apps for help.

Second step: After obtaining OAuth credentials, put them to php/twiter/index.php. Edit following code:

<?php
/* Configure your twitter API access params below */
// Your Twitter App Consumer Key
$consumer_key = 'YOUR_CONSUMER_KEY';        < = = = HERE REPLACE YOUR CONSUMER KEY                           

// Your Twitter App Consumer Secret
$consumer_secret = 'YOUR_CONSUMER_SECRET';  < = = = HERE REPLACE YOUR CONSUMER SECRET                  

// Your Twitter App Access Token
$user_token = 'YOUR_ACCESS_TOKEN';     < = = = HERE REPLACE YOUR ACCESS TOKEN                 

// Your Twitter App Access Token Secret
$user_secret = 'YOUR_ACCESS_TOKEN_SECRET';    < = = = HERE REPLACE YOUR ACCESS TOKEN SECRET                                         

The third step: Open js/main.js  (record for twitter script starts on line 145) and edit this code, especially line 150:

// -----------------------------
// Twitter
// -----------------------------
$(".twitter-feed").tweet({
    join_text: "auto",
    username: ["username"],         < = = = Line 150 SPECIFY TWITTER USERNAME (see info below)                                           
    modpath: "php/twitter/",                 
    count: 6,                       < = = = Line 152 (Optional) SET NUMBER OF LOADED TWEETS                                                
    loading_text: "loading ...",
    template: "{text},{time},{user}",        
    auto_join_text_default: " ", //We said,
    auto_join_text_ed: " ", //We
    auto_join_text_ing: " ", //We were
    auto_join_text_reply: " ", //We replied
    auto_join_text_url: " " //We were checking out
 });

Twitter Username: Line 150

You may specify twitter username to fetch tweets from. By default it is blank, because it will fetch tweets from user, who owns the Twitter App, that you configured at php/twitter/index.php.

You can load tweets from another user. As you can see in the example above, will now be loaded tweets by envato.

For further documentation about jquery.tweet plugin, see Author Repository.

Linea Icons Font

Template uses Custom set of Linea Icons generated with IcoMoon. It contains 530+ icons that you can easily use and customize.

You can placeLinea icons just about anywhere with the i tag. You can also use other techniques, with span or a, but i tag is the best choice.

<i class="icon icon-display"></i>

Replace icon name, example icon-basic-display, with the actual icon name you wish to display, example icon-basic-heart.

Full list of icons: see folder Icomoon included in the download package (icomoon/demo.html).

Font Awesome - Iconic Font

Analogous like Linea Icons. Font Awesome contains 479 icons that you can easily use and customize.

You can place Font Awesome icons just about anywhere with the i tag. You can also use other techniques, with span or a, but i tag is the best choice.

<i class="fa fa-heart"></i>

Replace icon name, example fa-heart, with the actual icon name you wish to display. Full list of icons: visit Font Awesome

Color Filter

Header with background image (index.html) use a color filter. If the image is too bright or too dark, or if the font is not visible in the background or for a nicer effect. You can easily customize it as needed.

Example 1:

.header::before {              /* Use this color filter - for example with too light bg image
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    background: none repeat scroll center center rgba(0,0,0,0.5); < = = = RGBA: SET OPACITY 0-1                                 
}

Example 2:

.header::before {              /* Use this color filter - for example with too light bg image
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    background: none repeat scroll center center #808080;
    opacity: 0.5;   < = = = SET ELEMENT OPACITY 0-1                                            
}

Optional components (see Shortcodes)

Counters Settings

Shortcodes (shortcodes.html)

Include jquery.countTo.js and init countTo. Setting the counters make directly in HTML code. Follow the example below:

                <!-- Counters -->
                <section class="shortcode">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="numbers">
                                <span class="number" data-from="0" data-to="987" data-speed="5000" data-refresh-interval="50"></span>
                                <span class="number-info">Creative Ideas</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="numbers">
                                <span class="number" data-from="0" data-to="218" data-speed="5000" data-refresh-interval="50"></span>
                                <span class="number-info">Projects Designed</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="numbers">
                                <span class="number" data-from="0" data-to="1356" data-speed="5000" data-refresh-interval="50"></span>
                                <span class="number-info">Pizzas Eaten</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="numbers">
                                <span class="number" data-from="0" data-to="1856" data-speed="5000" data-refresh-interval="50"></span>
                                <span class="number-info">Coffee Drunk</span>
                            </div>
                        </div>
                    </div>
                </section>

               <script src="js/vendor/jquery.countTo.js"></script>
               <script>
                   // Counters
                   $('.number').appear(function () {
                       $('.number').countTo();
                   });            
               </script>

Change number value data-to="number".

For further documentation and setting information, see jQuery countTo.

Progress Bars

Shortcodes (shortcodes.html)

Setting the progress value make directly in HTML code. Then use javascript. See example:

               <div class="progress-wrap">
                   <span class="progress-label">Storytelling</span>
                   <div class="progress">
                       <div class="progress-bar progress-bar-success rising-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                           <span class="sr-only">95%</span>
                       </div>
                   </div>
               </div>

               
               <script>
                   // Progressbar
                   $('.progress-wrap').appear(function () {
                       $('.progress').each(function () {
                           var value = $(this).find('.progress-bar').attr('aria-valuenow');
                               $(this).find('.progress-bar').animate({
                                   'width': value + '%'
                               }, 100, function () {
                               $(this).find('.bar-value').countTo({
                                   from: 0,
                                   to: value,
                                   refreshInterval: 10
                               }).fadeTo(3300, 1);
                           });
                       });
                   });       
               </script>

Change number value aria-valuenow="number"