<!doctype html>
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Sailor - Modern corporate site template</title>
<meta name="description" content="">
<meta name="author" content="iwebstudio">
<meta name="copyright" content="iwebstudio">
<meta name="generator" content="">
<meta name="date" content="2014-08-25T00:00:00+02:00">
<link rel="stylesheet" href="assets/css/documenter_style.css" media="all">
<link rel="stylesheet" href="assets/js/google-code-prettify/prettify.css" media="screen">
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.scrollTo.js"></script>
<script src="assets/js/jquery.easing.js"></script>
<script>document.createElement('section');var duration='500',easing='swing';</script>
<script src="assets/js/script.js"></script>
<style>
html{background-color:#F1F1CA;color:#554236;}
::-moz-selection{background:#45352C;color:#CDB380;}
::selection{background:#45352C;color:#CDB380;}
#documenter_sidebar #documenter_logo{background-image:url();}
a{color:#F77825;}
.btn {
border-radius:3px;
}
.btn-primary {
background-image: -moz-linear-gradient(top, #F77825, #C7611E);
background-image: -ms-linear-gradient(top, #F77825, #C7611E);
background-image: -webkit-gradient(linear, 0 0, 0 F77825%, from(#554236), to(#C7611E));
background-image: -webkit-linear-gradient(top, #F77825, #C7611E);
background-image: -o-linear-gradient(top, #F77825, #C7611E);
background-image: linear-gradient(top, #F77825, #C7611E);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F77825', endColorstr='#C7611E', GradientType=0);
border-color: #C7611E #C7611E #bfbfbf;
color:#FFFFFF;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
border-color: #F77825 #F77825 #bfbfbf;
background-color: #C7611E;
}
hr{border-top:1px solid #DEDEBA;border-bottom:1px solid #FFFFD6;}
#documenter_sidebar, #documenter_sidebar ul a{background-color:#554236;color:#CDB380;}
#documenter_sidebar ul a{-webkit-text-shadow:1px 1px 0px #6B5344;-moz-text-shadow:1px 1px 0px #6B5344;text-shadow:1px 1px 0px #6B5344;}
#documenter_sidebar ul{border-top:1px solid #30251F;}
#documenter_sidebar ul a{border-top:1px solid #6B5344;border-bottom:1px solid #30251F;color:#F77825;}
#documenter_sidebar ul a:hover{background:#45352C;color:#CDB380;border-top:1px solid #45352C;}
#documenter_sidebar ul a.current{background:#45352C;color:#CDB380;border-top:1px solid #45352C;}
#documenter_copyright{display:block !important;visibility:visible !important;}
</style>
</head>
<body class="documenter-project-sailor">
<div id="documenter_sidebar">
<a href="#documenter_cover" id="documenter_logo"></a>
<ul id="documenter_nav">
<li><a class="current" href="#documenter_cover">Start</a></li>
<li><a href="#general" title="General">General</a></li>
<li><a href="#basic_setting" title="Basic setting">Basic setting</a>
<ul>
<li><a href="#basic_setting_use_quotboxed_quot_or_quotwide_quot_layout">Use "boxed" or "wide" layout</a>
<li><a href="#basic_setting_use_background_pattern_images_or_customize_body_background_applied_on_boxed_mode_">Use background pattern images or customize body background (applied on boxed mode)</a>
<li><a href="#basic_setting_use_premade_template_color">Use premade template color</a>
<li><a href="#basic_setting_template_font_typography">Template font / typography</a>
</ul>
</li>
<li><a href="#element_settings" title="Element settings">Element settings</a>
<ul>
<li><a href="#element_settings_revolution_slider">Revolution slider</a>
<li><a href="#element_settings_flexslider">Flexslider</a>
</ul>
</li>
<li><a href="#source_and_credits" title="Source and credits">Source and credits</a></li>
<li><a href="#conclusion" title="Conclusion">Conclusion</a></li>
</ul>
<div id="documenter_copyright">Copyright iwebstudio 2014<br>
</div>
</div>
<div id="documenter_content">
<section id="documenter_cover">
<h1>Sailor</h1>
<h2>Modern corporate site template</h2>
<div id="documenter_buttons">
</div>
<hr>
<ul>
<li>created: 08/25/2014</li>
<li>latest update: 08/25/2014</li>
<li>by: iwebstudio</li>
<li><a href=""></a></li>
<li>email: <a href="mailto:info@iweb-studio.com">info@iweb-studio.com</a></li>
</ul>
<p></p>
</section>
<section id="general">
<div class="page-header"><h3>General</h3><hr class="notop"></div>
<p>
<strong>Sailor </strong>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.</p>
<p>
You can go to <a href="http://getbootstrap.com/" target="_blank">http://getbootstrap.com/</a> if you want to learn more about Boostrap since this is the main css framework of Sailor template.</p>
<p>
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 :)</p>
</section>
<section id="basic_setting">
<div class="page-header"><h3>Basic setting</h3><hr class="notop"></div>
<h4 id="basic_setting_use_quotboxed_quot_or_quotwide_quot_layout">Use "boxed" or "wide" layout</h4>
<p>
By default all HTML files in Sailor are using "wide/stretched" layout. It's very easy if you want to use "boxed" wapper layout.</p>
<p>
- Just add "<strong>boxed</strong>" class in wrapper div, that's it!</p>
<p>
see example code below:</p>
<p>
</p>
<pre class="prettyprint lang-html linenums">
<div id="wrapper" class="boxed></pre>
<p>
<strong>* wrapper div located under <body> tag</strong></p>
<p>
</p>
<p>
</p>
<h4 id="basic_setting_use_background_pattern_images_or_customize_body_background_applied_on_boxed_mode_">Use background pattern images or customize body background (applied on boxed mode)</h4>
<p>
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.</p>
<p>
Currently each body background called by single css file, see in folder 'bodybg' there are 10 css files from bg1.css.... to bg10.css</p>
<p>
see css code example (from bg1.css) which call "bg1.jpg" as body background</p>
<div class="container">
<div class="line number1 index0 alt2">
<code class="css plain">body {</code></div>
<div class="line number2 index1 alt1">
<code class="css spaces"> </code><code class="css keyword">background-image</code><code class="css plain">: </code><code class="css value">url</code><code class="css plain">(../img/bodybg/bg</code><code class="css value">1</code><code class="css plain">.jpg);</code></div>
<div class="line number3 index2 alt2">
<code class="css spaces"> </code><code class="css keyword">background-repeat</code><code class="css plain">: </code><code class="css value">repeat</code><code class="css plain">;</code></div>
<div class="line number4 index3 alt1">
<code class="css plain">}</code></div>
<div class="line number4 index3 alt1">
</div>
<div class="line number4 index3 alt1">
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</div>
<div class="line number4 index3 alt1">
</div>
<div class="line number4 index3 alt1">
<div class="container">
<div class="line number1 index0 alt2">
<code class="html spaces"> </code><code class="html comments"><!-- boxed bg --></code></div>
<div class="line number2 index1 alt1">
<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">link</code> <code class="html color1">id</code><code class="html plain">=</code><code class="html string">"bodybg"</code> <code class="html color1">href</code><code class="html plain">=</code><code class="html string">"bodybg/bg1.css"</code> <code class="html color1">rel</code><code class="html plain">=</code><code class="html string">"stylesheet"</code> <code class="html color1">type</code><code class="html plain">=</code><code class="html string">"text/css"</code> <code class="html plain">/></code></div>
<div class="line number2 index1 alt1">
</div>
<div class="line number2 index1 alt1">
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</div>
<div class="line number2 index1 alt1">
</div>
<div class="line number2 index1 alt1">
<div class="container">
<div class="line number1 index0 alt2">
<code class="css plain">body {</code></div>
font-family:'Open Sans', Arial, sans-serif;<br>
font-size:14px;<br>
font-weight:300;<br>
line-height:1.6em;<br>
color:#656565;
<div class="line number6 index5 alt1">
<code class="css spaces"> </code><code class="css plain"><!-- your body background --></code></div>
<div class="line number7 index6 alt2">
<code class="css spaces"> </code><code class="css keyword">background-image</code><code class="css plain">: </code><code class="css value">url</code><code class="css plain">(../img/bodybg/bg</code><code class="css value">1</code><code class="css plain">.jpg);</code></div>
<div class="line number8 index7 alt1">
<code class="css spaces"> </code><code class="css keyword">background-repeat</code><code class="css plain">: </code><code class="css value">repeat</code><code class="css plain">;</code></div>
<div class="line number9 index8 alt2">
<code class="css plain">}</code></div>
<pre class="prettyprint lang-html linenums">
</pre>
<div class="line number9 index8 alt2">
</div>
<div class="line number9 index8 alt2">
<h4 id="basic_setting_use_premade_template_color">Use premade template color</h4>
<p>
Sailor has 10 premade accent colors that can be found in folder '<strong>skins</strong>', by default each HTML file uses 'default.css' (red color).</p>
<p>
if you want to use other color, just open your html file and find following code (on line 18-19)</p>
<p>
</p>
<div class="container">
<div class="line number1 index0 alt2">
<code class="html spaces"> </code><code class="html comments"><!-- Theme skin --></code></div>
<div class="line number2 index1 alt1">
<code class="html spaces"> </code><link id="t-colors" href="skins/default.css" rel="stylesheet" /></div>
<div class="line number2 index1 alt1">
</div>
<div class="line number2 index1 alt1">
just change 'default.css' above with other available color e.g 'blue.css', 'yellow.css'..so on from folder '<strong>skins</strong>'</div>
<div class="line number2 index1 alt1">
</div>
<div class="line number2 index1 alt1">
</div>
<div class="line number2 index1 alt1">
<h4 id="basic_setting_template_font_typography">Template font / typography</h4>
<p>
This template using 2 main colors from Google webfont</p>
<p>
1. Open sans ( General body )</p>
<p>
2. Roboto (for Heading H1-H6, blockquote & pullquotes )</p>
<p>
Both font above imported via "style.css" on line 1-2</p>
<p>
</p>
<div class="container">
<div class="line number1 index0 alt2">
<code class="css comments">/* ==== Google font ==== */</code></div>
<pre class="prettyprint lang-css linenums">
@import url('http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900|Open+Sans:300,400,600,700');
</pre>
<div class="line number2 index1 alt1">
</div>
<div class="line number2 index1 alt1">
</div>
<div class="line number2 index1 alt1">
<p>
<strong>Upload template to your hosting</strong></p>
<p>
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 <a href="http://wiki.filezilla-project.org/Using" target="_blank">http://wiki.filezilla-project.org/Using</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p>
</p>
</section>
<section id="element_settings">
<div class="page-header"><h3>Element settings</h3><hr class="notop"></div>
<h4 id="element_settings_revolution_slider">Revolution slider</h4>
<p>
used on index.html</p>
<p>
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</p>
<p>
You can set revolution slider parameter from the revolution slider function that written in 'plugins/revslider/revslider.js' file as follows :</p>
<p>
</p>
<pre class="prettyprint lang-js linenums">
(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);</pre>
<p>
</p>
<h4 id="element_settings_flexslider">Flexslider</h4>
<p>
used on index2.html</p>
<p>
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</p>
<p>
</p>
<p>
You can set revolution slider parameter from the home 2 flexslider function that written in 'plugins/flexslider/flexslider.config.js' file as follows :</p>
<pre class="prettyprint lang-js linenums">
$('.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
});</pre>
</section>
<section id="source_and_credits">
<div class="page-header"><h3>Source and credits</h3><hr class="notop"></div>
<p>
We've used the following images, icons or other files as listed.</p>
<p>
<strong>FONTS:</strong></p>
<ol>
<li>
Fontawesome - http://fortawesome.github.com/Font-Awesome/</li>
<li>
Roboto & Open sans webfont from <a href="http://www.google.com/fonts" target="_blank">http://www.google.com/fonts</a></li>
</ol>
<p>
</p>
<p>
<strong>JAVASCRIPT ,JQUERY PLUGINS & SCRIPTS :</strong></p>
<ol>
<li>
Bootstrap from http://getbootstrap.com/</li>
<li>
jQuery from<a href="http://%20jquery.com" target="_blank"> jquery.com</a></li>
<li>
jQuery easing v.1.3 from <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a></li>
<li>
modernizr from <a href="http://www.modernizr.com" target="_blank">http://www.modernizr.com</a></li>
<li>
Flexslider from http://www.woothemes.com/flexslider/</li>
<li>
Revolution slider from http://www.themepunch.com/home/</li>
<li>
jQuery appear from https://github.com/morr/jquery.appear/</li>
<li>
jQuery stellar from http://markdalgleish.com/projects/stellar.js</li>
<li>
UIsearch from http://www.codrops.com</li>
</ol>
</section>
<section id="conclusion">
<div class="page-header"><h3>Conclusion</h3><hr class="notop"></div>
<p>
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</p>
</section>
</div>
</body>
</html> |