# Sailor

## Modern corporate site template

- created: 08/25/2014
- latest update: 08/25/2014
- by: iwebstudio
- email: info@iweb-studio.com

### General

Sailor is a HTML site template built with latest Bootstrap 3.2. Please remember, it's HTML CSS site template so you need to edit with any HTML editor to customize text or content. This template coming with "Boxed" and "Wide (default)" layout and has 10 pre-made template accent colors as you can see on folder 'skins'. We've separated each accent color to a single css file to make you easy to edit template color without touching other css files.

You can go to http://getbootstrap.com/ if you want to learn more about Boostrap since this is the main css framework of Sailor template.

Again, since it's HTML CSS based you can edit all text, content with HTML editor like notepad++ or anykind else. Quite easy for people with basic HTML-CSS knowledge :)

### Basic setting

#### Use "boxed" or "wide" layout

By default all HTML files in Sailor are using "wide/stretched" layout. It's very easy if you want to use "boxed" wapper layout.

- Just add "boxed" class in wrapper div, that's it!

see example code below:

    <div id="wrapper" class="boxed>

* wrapper div located under <body> tag

#### Use background pattern images or customize body background (applied on boxed mode)

When you use boxed wrapper, you'll be able to show your body backgound. We've included 10 repeatable background images in folder 'img/bodybg' that can be used as body background.

Currently each body background called by single css file, see in folder 'bodybg' there are 10 css files from bg1.css.... to bg10.css

see css code example (from bg1.css) which call "bg1.jpg" as body background

`body {`
`` `background-image``:` `url``(../img/bodybg/bg` `1``.jpg);`
`` `background-repeat``:` `repeat``;`
`}`
say you want to use bg1.jpg pattern image as body background, so just call the bg1.css from your HTML file and put before </head> tag
`` `<!-- boxed bg -->`
`` `<``link` `id``=``"bodybg"` `href``=``"bodybg/bg1.css"` `rel``=``"stylesheet"` `type``=``"text/css"` `/>`
If you don't want to use this way and has HTML-CSS knowledge you can also edit from 'style.css' directly, find "body" tag and put background value
`body {`
font-family:'Open Sans', Arial, sans-serif;
font-size:14px;
font-weight:300;
line-height:1.6em;
color:#656565;
`` `<!-- your body background -->`
`` `background-image``:` `url``(../img/bodybg/bg` `1``.jpg);`
`` `background-repeat``:` `repeat``;`
`}`

#### Use premade template color

Sailor has 10 premade accent colors that can be found in folder 'skins', by default each HTML file uses 'default.css' (red color).

if you want to use other color, just open your html file and find following code (on line 18-19)

`` `<!-- Theme skin -->`
`` <link id="t-colors" href="skins/default.css" rel="stylesheet" />
just change 'default.css' above with other available color e.g 'blue.css', 'yellow.css'..so on from folder 'skins'

#### Template font / typography

This template using 2 main colors from Google webfont

1. Open sans ( General body )

2. Roboto (for Heading H1-H6, blockquote & pullquotes )

Both font above imported via "style.css" on line 1-2

`/* ==== Google font ==== */`

    @import url('http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900|Open+Sans:300,400,600,700');

Upload template to your hosting

After you've done with content editing, you can just upload all files & folders directly with FTP to your hosting root directory. If you're very new with FTP you can learn from http://wiki.filezilla-project.org/Using

### Element settings

#### Revolution slider

used on index.html

all slider images for index.html stored in folder 'img/slides/rev' .You can overwrite example images with your own images, for easiest way just use same name, image format and size so you don't need to edit the HTML

You can set revolution slider parameter from the revolution slider function that written in 'plugins/revslider/revslider.js' file as follows :

      (function ($) {
    var revapi;
    jQuery(document).ready(function() {

                        revapi = jQuery('.tp-banner').revolution(
                        //jQuery('.tp-banner').show().revolution(
                        {
                            dottedOverlay:"none",
                            delay:20000,
                            startwidth:1170,
                            startheight:600,
                            hideThumbs:200,

                            thumbWidth:100,
                            thumbHeight:50,
                            thumbAmount:5,

                            navigationType:"bullet",
                            navigationArrows:"solo",
                            navigationStyle:"preview2",

                            touchenabled:"on",
                            onHoverStop:"on",

                            swipe_velocity: 0.7,
                            swipe_min_touches: 1,
                            swipe_max_touches: 1,
                            drag_block_vertical: false,

                                                    parallax:"mouse",
                            parallaxBgFreeze:"on",
                            parallaxLevels:[7,4,3,2,5,4,3,2,1,0],

                            keyboardNavigation:"off",

                            navigationHAlign:"center",
                            navigationVAlign:"bottom",
                            navigationHOffset:0,
                            navigationVOffset:20,

                            soloArrowLeftHalign:"left",
                            soloArrowLeftValign:"center",
                            soloArrowLeftHOffset:20,
                            soloArrowLeftVOffset:0,

                            soloArrowRightHalign:"right",
                            soloArrowRightValign:"center",
                            soloArrowRightHOffset:20,
                            soloArrowRightVOffset:0,

                            shadow:0,
                            fullWidth:"on",
                            fullScreen:"off",

                            spinner:"spinner4",

                            stopLoop:"off",
                            stopAfterLoops:-1,
                            stopAtSlide:-1,

                            shuffle:"off",

                            autoHeight:"off",
                            forceFullWidth:"off",

                            hideThumbsOnMobile:"off",
                            hideNavDelayOnMobile:1500,
                            hideBulletsOnMobile:"off",
                            hideArrowsOnMobile:"off",
                            hideThumbsUnderResolution:0,

                            hideSliderAtLimit:0,
                            hideCaptionAtLimit:0,
                            hideAllCaptionAtLilmit:0,
                            startWithSlide:0,
                            videoJsPath:"rs-plugin/videojs/",
                            fullScreenOffsetContainer: ""
                        });

    });    //ready
    })(jQuery);

#### Flexslider

used on index2.html

all slider images on index2.html stored in folder 'img/slides/flexslider'. You can overwrite example images with your own images, for easiest way just use same name, image format and size so you don't need to edit the HTML

You can set revolution slider parameter from the home 2 flexslider function that written in 'plugins/flexslider/flexslider.config.js' file as follows :

        $('.main-slider').flexslider({
            // Primary Controls
            controlNav          : true,              //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
            directionNav        : true,              //Boolean: Create navigation for previous/next navigation? (true/false)
           prevText: "",           //String: Set the text for the "previous" directionNav item
        nextText: "",               //String: Set the text for the "next" directionNav item
            // Special properties
            controlsContainer   : "",                //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
            manualControls      : "",                //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
            sync                : "",                //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
            asNavFor            : "",                //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
        });

### Source and credits

We've used the following images, icons or other files as listed.

FONTS:

1. Fontawesome - http://fortawesome.github.com/Font-Awesome/
2. Roboto & Open sans webfont from http://www.google.com/fonts

JAVASCRIPT ,JQUERY PLUGINS & SCRIPTS :

1. Bootstrap from http://getbootstrap.com/
2. jQuery from jquery.com
3. jQuery easing v.1.3 from http://gsgd.co.uk/sandbox/jquery/easing/
4. modernizr from http://www.modernizr.com
5. Flexslider from http://www.woothemes.com/flexslider/
6. Revolution slider from http://www.themepunch.com/home/
7. jQuery appear from https://github.com/morr/jquery.appear/
8. jQuery stellar from http://markdalgleish.com/projects/stellar.js
9. UIsearch from http://www.codrops.com

### Conclusion

Once again, thank you so much for purchasing this template. As we said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but we'll do the best to assist. If you have a more question regarding Sailor template, you can drop us message through our profile contact form