Rufio Help Documentation

Yet Another Documentation Crafted with ♥ by elemis

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form or item discussions board.

× Warning! Please note that since some browsers deny local AJAX requests, the portfolio section won't run locally. Please test it on a working web server.

Header Height / Scroll Offset

Depending on your logo height, the header height may change and it will effect the scroll offsets. You need to edit style/js/scripts.js. The default value of header height is 80px in the template. Please measure your header height and if it is different than the original value, then replace the value 80 on highlighted areas.

style/js/scripts.js

$(document).ready(function(){     /* ANCHOR SCROLL */
    $('.scroll').localScroll({
	    offset: {top:-80, left:0}  /* make sure the minus sign stays */
    });
  }); 
  
...  
  
  
$(document).ready(function () { /* CONTENT SLIDER */
	 var speed=600;
	 var speed2=500;
	 var header_offset = 80;
  

Retina Logo

In order to display a high resolution logo on devices with retina display, you need two versions of your logo. One with regular size and another with twice its size. The high resolution one should have the exact same name with @2x at the end.

File Name Description
logo.png Default logo (e.g.: 100x100px)
logo@2x.png High resolution logo (e.g.: 200x200px)

Social Icons (Complete List)

The list of all available styled social icons to use in the footer or any other place.

<ul class="social">
	<li><a href="#"><i class="icon-s-rss"></i></a></li>
	<li><a href="#"><i class="icon-s-twitter"></i></a></li>
	<li><a href="#"><i class="icon-s-facebook"></i></a></li>
	<li><a href="#"><i class="icon-s-dribbble"></i></a></li>
	<li><a href="#"><i class="icon-s-pinterest"></i></a></li>
	<li><a href="#"><i class="icon-s-flickr"></i></a></li>
	<li><a href="#"><i class="icon-s-vimeo"></i></a></li>
	<li><a href="#"><i class="icon-s-youtube"></i></a></li>
	<li><a href="#"><i class="icon-s-skype"></i></a></li>
	<li><a href="#"><i class="icon-s-tumblr"></i></a></li>
	<li><a href="#"><i class="icon-s-linkedin"></i></a></li>
	<li><a href="#"><i class="icon-s-behance"></i></a></li>
	<li><a href="#"><i class="icon-s-github"></i></a></li>
	<li><a href="#"><i class="icon-s-delicious"></i></a></li>
	<li><a href="#"><i class="icon-s-500px"></i></a></li>
	<li><a href="#"><i class="icon-s-grooveshark"></i></a></li>
	<li><a href="#"><i class="icon-s-forrst"></i></a></li>
	<li><a href="#"><i class="icon-s-digg"></i></a></li>
	<li><a href="#"><i class="icon-s-blogger"></i></a></li>
	<li><a href="#"><i class="icon-s-klout"></i></a></li>
	<li><a href="#"><i class="icon-s-dropbox"></i></a></li>
	<li><a href="#"><i class="icon-s-songkick"></i></a></li>
	<li><a href="#"><i class="icon-s-posterous"></i></a></li>
	<li><a href="#"><i class="icon-s-appnet"></i></a></li>
	<li><a href="#"><i class="icon-s-gplus"></i></a></li>
	<li><a href="#"><i class="icon-s-stumbleupon"></i></a></li>
	<li><a href="#"><i class="icon-s-lastfm"></i></a></li>
	<li><a href="#"><i class="icon-s-spotify"></i></a></li>
	<li><a href="#"><i class="icon-s-instagram"></i></a></li>
	<li><a href="#"><i class="icon-s-evernote"></i></a></li>
	<li><a href="#"><i class="icon-s-paypal"></i></a></li>
	<li><a href="#"><i class="icon-s-picasa"></i></a></li>
	<li><a href="#"><i class="icon-s-soundcloud"></i></a></li>
</ul>

Contact Form

To receive the messages sent through the contact form, edit line 5 of
contact/form-handler.php

$emailto = 'yourname@yourdomain.com';

For SMTP support edit line 4. Set to 1 if you want to use SMTP to send the email. Default is 0, which uses the standard PHP mail function.

$use_smtp = '1';

If using SMTP you will also need to fill in the 4 SMTP variables - lines 64 - 67.

$SmtpServer = 'SMTP SERVER';
$SmtpPort = 'SMTP PORT';
$SmtpUser = 'SMTP USER';
$SmtpPass = 'SMTP PASSWORD';

Responsive Design

Media queries are included in both style/css/bootstrap-responsive.css and at the end of style.css for responsive design. If you would like to disable the responsiveness you will have to remove the link of bootstrap-responsive.css from your HTML files and delete responsive css styles from style.css file.


Color Scheme

There are 6 color options: blue, gray, green, orange, pink, and yellow, the default being yellow. To change the default color scheme you will have to edit the color css file name in each HTML page.

<link href="style/css/color/yellow.css" rel="stylesheet">

Google Map

Copy the HTML code of your map from Google Maps website and paste it into your HTML page wrapped in
<div class="map">

Google Map


<div class="map">
        <iframe width="100%" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?source=embed&amp;hl=en-US&amp;ie=UTF8&amp;ll=41.525287,-87.450485&amp;spn=0.099472,0.263844&amp;t=m&amp;z=13&amp;output=embed"></iframe>
</div>

PSD Mockups

You can find the mboile device mockups that can be seen in slider in the sources folder of the template package and apply your own images to them.


Gridview

Basic structure of the portfolio gridview:

<div class="primary portfolio">
  <div class="container box portfolio-wrapper">
    <div class="light-wrapper">
      <h1 class="page-title pull-left">Our Latest Works</h1>
      <div class="portfolio-filter btn-group pull-right">
        <button class="btn inverse dropdown-toggle bm0" data-toggle="dropdown">Filter Portfolio</button>
        <!-- /.btn -->
        <ul class="dropdown-menu filter">
          <li><a class="active" href="#" data-filter="*">All</a></li>
          <li><a href="#" data-filter=".branding">Branding</a></li>
          <li><a href="#" data-filter=".poster">Poster</a></li>
          <li><a href="#" data-filter=".illustration">Illustration</a></li>
          <li><a href="#" data-filter=".video">Video</a></li>
          <li><a href="#" data-filter=".audio">Audio</a></li>
        </ul>
        <!-- /.filter .dropdown-menu --> 
      </div>
      <!-- /.portfolio-filter -->
      <div class="clearfix"></div>
      <div class="divide15"></div>
      <ul class="items">
        <li class="item branding"> <a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".primary .container">
          <div class="overlay">
            <div class="info">
              <h3>Headlight Media</h3>
              <span>Logo, Branding</span> </div>
          </div>
          <img src="style/images/art/p1.jpg" alt="" /></a> </li>
        <li class="item poster"> <a href="#" data-contenturl="portfolio-post2.html" data-callback="callPortfolioScripts();" data-contentcontainer=".primary .container">
          <div class="overlay">
            <div class="info">
              <h3>Media Icons</h3>
              <span>Icons, Vector</span> </div>
          </div>
          <img src="style/images/art/p2.jpg" alt="" /></a> </li>
      </ul>
      <!--/.items--> 
    </div>
    <!--/.light-wrapper--> 
  </div>
  <!--/.container--> 
</div>
<!--/.primary-->

Detailview

There are 4 different layouts available for you to choose from. Of course, you can mix and/or alter these and create your own layouts.

File Name Description
portfolio-post.html Portfolio post with slider
portfolio-post2.html Portfolio post with static images
portfolio-post3.html Portfolio post with videos
portfolio-post4.html Portfolio post with Soundcloud

Heads up! There are 2 different versions of slider. Homepage (Fullscreen w/ captions), Portfolio Post (w/out captions).

Markup

Two surrounding DIVs are the basic holder for the slider:

Homepage slider

<div class=".fullscreen-container">
   <div class=".fullscreenbanner" >...</div>
</div>

Portfolio Post slider

<div class="portfolio-bannercontainer">
   <div id="portfolio-banner" >...</div>
</div>

An unordered list inside holds the different slides as list elements

<ul>
<!-- THE BOXSLIDE EFFECT EXAMPLES  WITH LINK ON THE MAIN SLIDE EXAMPLE -->

 <li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de"> 
   <img src="images/slides/image1.jpg">
   <div class="caption sft huge" data-x="center" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">TEXT</div>
   <div class="caption sfb big" data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">TEXT</div>
   <div class="caption lfr small" data-x="510" data-y="210" data-speed="300" data-start="2000">TEXT</div>
 </li>
...
</ul>

Heights

Slider heights are 600px. To change the height, you need to edit both style.css and style/js/scripts.js files.

style/js/scripts.js

...
$('.fullscreenbanner').revolution({ /* homepage slider */
	delay: 9000,
	startheight: 550,
...
$('.portfolio-banner').revolution({ /* portfolio post slider. Under PORTFOLIO SLIDER & CALL PORTFOLIO SCRIPTS */
		delay: 9000,
		startheight: 550,
...

style.css

...
.fullscreen-container { /* homepage slider */
    width: 100% !important;
    position: relative;
    padding: 0;
    max-height: 550px !important;
    overflow: hidden;
}
...
.portfolio-bannercontainer { /* portfolio slider */
    width: 100% !important;
    position: relative;
    padding: 0;
    max-height: 550px !important;
    overflow: hidden;
}
...

Slider Items

Every list item represents a new banner/slider item.

Attributes Options
data-transition boxslide
boxfade
slotzoom-horizontal
slotslide-horizontal
slotfade-horizontal
slotzoom-vertical
slotslide-vertical
slotfade-vertical
curtain-1
curtain-2
curtain-3
slideleft
slideright
slideup
slidedown
fade
random
slidehorizontal
slidevertical
papercut
flyin
turnoff
cube
3dcurtain-vertical
3dcurtain-horizontal
data-masterspeed Set the Speed of the Slide Transition. Default 300, min:100 max:2000.
data-slotamount The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.
data-link A link on the whole slide pic
data-target A link target (like _self or _blank)
data-linktoslide If data-link="slide" is set, you can define a slide where to jump in case the image has been clicked.
data-delay A new Dealy value for the Slide. If no delay defined per slide, the dealy defined via Options will be used
data-fstransition An Alternaive First Slide Transition (only in the first loop, than data-transition will be used)
data-fsmasterspeed An Alternaive First Slide Transition Speed (only in the first loop, than data-masterspeed will be used)
data-fsslotamount An Alternaive First Slide Slout Amoun (only in the first loop, than data-slotamoun will be used)

Captions

Captions are containers which can be customized via CSS, classes for the start animation and some data options.

Classes and Attributes Options
Class for color Example: huge, big, white (Check the style.css for details)
Class for Incoming Animations sft - Short from Top
sfb - Short from Bottom
sfr - Short from Right
sfl - Short from Left
lft - Long from Top
lfb - Long from Bottom
lfr - Long from Right
lfl - Long from Left
fade - fading
randomrotate- Fade in, Rotate from a Random position and Degree
Class for Outgoing Animations
only during the slide.
stt - Short to Top
stb - Short to Bottom
str - Short to Right
stl - Short to Left
ltt - Long to Top
ltb - Long to Bottom
ltr - Long to Right
ltl - Long to Left
fadeout - fading
randomrotateout- Fade in, Rotate from a Random position and Degree
data-x The horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)
data-y vertical position in the standard (via startheight option defined) screen size (other screen sizes will be calculated)
data-speed duration of the animation in milliseconds
data-start after how many milliseconds should this caption start to show
data-easing special easing effect of the animation

easeOutBack
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
data-endspeed duration of the animation when caption leaves the stage in milliseconds
data-end after how many milliseconds should this caption leave the stage (should be bigger than data-start+data-speed !
data-endeasing special easing effect of the animation.

easeOutBack
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

Colored Background Instead of Images

In order you wish to use a colored Background instead of some images as main Image in the Slider you can use the transparent image with a colored background style.

<img alt="" src="style/images/art/transparent.png" style="background-color:#ff0000">

Videos

You can embed videos via iframe of your favorite video site that allows this kind of embedding.

<li data-transition="slideup" data-slotamount="20">
<img src="images/slides/image20.jpg"  >
            <div class="caption lfb boxshadow" data-x="70" data-y="120" data-speed="900"
                 data-start="500" data-easing="easeOutBack">
                 <iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0" width="460"
                 height="259"></iframe>
            </div>
</li>

Fullwidth Videos

In order to play FullWidth Videos, use the class "fade fullscreenvideo" in the caption where you embeded the iframe. Use data-x="0" and data-y="0" and data-speed="500" and data-start="10" for best effect. The width and height of the iframe should be 100%!
In case you wish to use autoplay, just use the data-autplay="true" parameter in the div where you embeded the iframe.

<li data-transition="slideup" data-slotamount="20">
<img src="images/slides/image20.jpg"  >
            <div class="caption fade fullscreenvideo" data-x="0" data-y="0"
                data-speed="500" data-start="10" data-easing="easeOutBack">
                <iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0" width="100%"
                height="100%"></iframe>
            </div>
</li>

Once again, thank you so much for purchasing this theme. As said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.