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 :)
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
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/bg1.jpg); background-repeat: repeat;} <!-- boxed bg --> <link id="bodybg" href="bodybg/bg1.css" rel="stylesheet" type="text/css" />body { <!-- your body background --> background-image: url(../img/bodybg/bg1.jpg); background-repeat: repeat;}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" />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
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);
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
});
We've used the following images, icons or other files as listed.
FONTS:
JAVASCRIPT ,JQUERY PLUGINS & SCRIPTS :
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