Файл: DOCUMENTATION/index.html
Строк: 704
<?php
<!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>CloudMe - Responsive HTML Template for Web Hosting</title>
<meta name="generator" content="Documenter v2.0 http://rxa.li/documenter">
<meta name="date" content="2013-11-17T00:00:00+01: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>
<link rel="stylesheet" href="assets/css/custom.css" media="screen">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<script src="assets/js/jquery.js"></script>
<script src="assets/js/cufon.js"></script><script src="assets/js/font.js"></script><script>Cufon.replace("h1, h2, h3, h4, h5, h6");</script>
<script src="assets/js/jquery.scrollTo.js"></script>
<script src="assets/js/jquery.easing.js"></script>
<script>document.createElement('section');var duration='450',easing='easeOutExpo';</script>
<script src="assets/js/script.js"></script>
<style>
html{background-color:#F3F3F3;color:#585858;}
::-moz-selection{background:#111111;color:#F1F1F1;}
::selection{background:#111111;color:#F1F1F1;}
#documenter_sidebar #documenter_logo{background-image:url(assets/images/image_16.png);}
a{color:#111111;}
.btn {
border-radius:3px;
}
.btn-primary {
background-image: -moz-linear-gradient(top, #585858, #3B3B3B);
background-image: -ms-linear-gradient(top, #585858, #3B3B3B);
background-image: -webkit-gradient(linear, 0 0, 0 585858%, from(#333333), to(#3B3B3B));
background-image: -webkit-linear-gradient(top, #585858, #3B3B3B);
background-image: -o-linear-gradient(top, #585858, #3B3B3B);
background-image: linear-gradient(top, #585858, #3B3B3B);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#585858', endColorstr='#3B3B3B', GradientType=0);
border-color: #3B3B3B #3B3B3B #bfbfbf;
color:#F9F9F9;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
border-color: #585858 #585858 #bfbfbf;
background-color: #3B3B3B;
}
hr{border-top:1px solid #E5E5E5;border-bottom:1px solid #F9F9F9;}
#documenter_sidebar, #documenter_sidebar ul a{background-color:#333333;color:#F1F1F1;http://static.revaxarts-templates.com/noise.gif}
#documenter_sidebar ul a{-webkit-text-shadow:1px 1px 0px #444444;-moz-text-shadow:1px 1px 0px #444444;text-shadow:1px 1px 0px #444444;}
#documenter_sidebar ul{border-top:1px solid #222222;}
#documenter_sidebar ul a{border-top:1px solid #444444;border-bottom:1px solid #222222;color:#F1F1F1;}
#documenter_sidebar ul a:hover{background:#111111;color:#F1F1F1;border-top:1px solid #111111;}
#documenter_sidebar ul a.current{background:#111111;color:#F1F1F1;border-top:1px solid #111111;}
#documenter_copyright{display:block !important;visibility:visible !important;}
</style>
</head>
<body class="documenter-project-documenter-v20">
<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="#htmlfiles" title="HTML Files">HTML Files</a></li>
<li><a href="#cssfiles" title="CSS Files">CSS Files</a></li>
<li><a href="#jsfiles" title="JS Files">JS Files</a></li>
<li><a href="#whmcs" title="WHMCS Template">WHMCS Template</a></li>
<li><a href="#faq" title="FAQ">FAQ</a></li>
</ul>
<div id="documenter_copyright">Copyright Xaver Birsak 2013<br>
made with the <a href="http://rxa.li/documenter">Documenter v2.0</a>
</div>
</div>
<div id="documenter_content">
<section id="documenter_cover">
<h1>CloudMe</h1>
<h2>Responsive HTML Template for Web Hosting</h2>
<div id="documenter_buttons">
<a href="http://themeforest.net/user/audemedia#contact" target="_blank" class="btn btn-primary btn-large">Support</a>
</div>
<hr>
<ul>
<li>created: 21 Aug 2014</li>
<li>last update: 12 Sep 2015</li>
<li>by: Audemedia</li>
<li><a href="http://themeforest.net/user/audemedia" target="_blank">http://themeforest.net/user/audemedia</a></li>
</ul>
<p>Thank you for purchasing the CloudMe HTML template.</p>
<p>How to get help:</p>
<p><strong>We will respond to buyers' questions via the contact form on our <a href="http://themeforest.net/user/audemedia#contact" target="_blank">profile</a>.</strong> </p>
<div>
<p>We run support Weekdays 9am-5pm GMT. You can expect a response within 12 – 24 hours Monday to Friday. We’ll respond to questions outside of these times & weekends occasionally, but please don’t expect a response outside our stated hours.</p>
<p><strong>Support requests are for:</strong><br>
- Help using templates<br>
- Instructions setting up templates<br>
- Bug reports and fixes<br>
</p>
<p><strong>Support requests aren’t for:</strong><br>
- Help with 3rd party plugins<br>
- Integration of 3rd party plugins<br>
- Customizations of our templates<br>
</p>
<p>Thanks for your purchase!</p>
</div>
<p> </p>
</section>
<section id="htmlfiles">
<div class="page-header"><h3>HTML Files</h3>
<hr class="notop"></div>
<p>The CloudMe template is a responsive HTML template based on Zurb Foundation. The structure based on a flexible grid that lets you change HTML pages quickly and logically with a nestable system.</p>
<p>If you would like to edit the layout of any elements in whole template, you would do the following:</p>
<p>Open the file <b>/style.css</b>, so that is extremely easy to change any css attributes. Simply find the related and commented heading in this css file and make your magic. </p>
<p><img src="assets/images/1.jpg"></p>
<p>The font is <b>Lato from Google Web fonts</b> and if you like to change it with a usual web safe font (arial, verdana etc.) you must remove from <head> section of each page the line <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'> and also change the font-family class of various elements of file /style.css from font-family: 'Lato', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; to font-family: Verdana; (for example)</p>
<p><img src="assets/images/2.jpg"></p>
<p><img src="assets/images/3.jpg"></p>
</section>
<section id="cssfiles">
<div class="page-header"><h3>CSS Files</h3><hr class="notop"></div>
<p>CloudMe using the following CSS files:</p>
<p><strong>style.css</strong> <br>
The main css file</p>
<p><strong>css/animate.min.css</strong><br>
The main library for animation effects that you see on various pages.</a></p>
<p><strong>css/font-awesome.min.css</strong><br>
The css file for font-awesome icons. To see all the available icons and instructions on how to use them click <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">here</a></p>
<p><strong>css/foundation.css</strong><br>
The main responsive grid stylesheet, from Zurb foundation framework. It is recommended to make any changes/additions to style.css and keep foundation.css as it is. In this way, you can easily upgrade the grid framework when Zurb Foumdation releases an update.</p>
<p><strong>css/normalize.css</strong> <br>
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. You don't need to touch anything in this file.</p>
<p><strong>css/owl.carousel.css</strong><br>
The base stylesheet for carousels that the template using (testimonials in home page, carousel with fade effect in datacenter page, one item carousel in blog category)
</p>
<p><strong>css/owl.theme.css</strong><br>
The stylesheet that define the appearance of carousels. You can change saome things, for examople the color/size of pagination bullets.</p>
<p><strong>css/morphext.css</strong><br>
The stylesheet for word rotator in home page (just below the logo / navigation)</p>
<p><strong>css/slicknav.css</strong><br>
The stylesheet for menu on small screens and mobiles.
<br>
<br>
<strong>css/tablesaw.stackonly.css</strong><br>
The stylesheet for responsive tables (exists in dedicated servers page)<br>
<br>
</section>
<section id="jsfiles">
<div class="page-header"><h3>JS (javascript) files</h3><hr class="notop"></div>
<p>CloudMe using jQuery framework with various additional plugins. Also, there are all the js files of Zurb Foundation framework (in folder /js/foundation/) in case that you want to use them.</p>
<p><strong>js/foundation.min.js</strong><br>
The main js file that hook the supported scripts of Zurb Foundation framework <br>
</p>
<p><strong>js/foundation folder</strong><br>
is a directory that contains each plugin of Zurb Foundation framework as a single JavaScript file, so you can check out the source code and, if you'd like, include certain ones but not others, or do your own minifying.<br>
</p>
<p><strong>js/vendor/contact-script.js</strong><br>
The scripts that validates the contact form script in the contact page<br>
</p>
<p><strong>js/vendor/hoverIntent.js</strong><br>
A helper file that make clickable each main menu options on touch screens.</p>
<p><strong>js/vendor/jquery.animateNumber.min.js</strong><br>
The number counters in home page (call to action discout number / loved by developers number). The hook of the script exists in js/custom.js file on line 36 and 52. You can change there the end number and the delay of counting until this number.</p>
<p><strong>js/vendor/jquery.js</strong><br>
The jQuery framework</p>
<p><strong>js/vendor/jquery.slicknav.min.js</strong><br>
The menu on small screens and mobiles. The hook of the script exists in js/custom.js file on line 12.</p>
<p><strong>js/vendor/modernizr.js</strong><br>
Modernizr gives you finer control over the experience through JavaScript-driven feature detection. You don't need to touch anything here.</p>
<p><strong>js/vendor/owl.carousel.min.js</strong><br>
The script for carousels that the template using (testimonials in home page, carousel with fade effect in datacenter page, one item carousel in blog category). The hook of the script for each page exists in js/custom.js file on line 39.</p>
<p><strong>js/vendor/superfish.js</strong><br>
The main navigation menu script with it submenus. The hook of the script for each page exists in js/custom.js file on line 4.</p>
<p><strong>js/vendor/waypoints.min.js</strong><br>
The script that hooks the number counters when the specific section is in vewport. You don't need to touch anything here.</p>
<p><strong>js/vendor/masonry.pkgd.min.js</strong><br>
The script that generates the masonry layout in testimonials page.</p>
<p><strong>js/vendor/morphext.min.js</strong><br>
The script that generates the rotating words in home page.</p>
<p><strong>js/vendor/tablesaw.stackonly.js</strong><br>
The script that convert the tables to responsive layout in smaller screens.</p>
<p><strong>js/vendor/wow.min.js</strong><br>
The script that using for animations (in combination with animate.min.css) while scrolling the page</p>
</section>
<section id="whmcs">
<div class="page-header"><h3>WHMCS Template</h3><hr class="notop">
<p>CloudMe HTML template includes a basic WHMCS template (header/footer integration, no responsive) based on WHMCS popular Default template.
To install it, just upload the cloudme folder that exists in WHMCS folder in your downloaded files, to your WHMCS installation in /templates folder. Then login to WHMCS, go to SETUP > GENERAL SETTINGS and choose CloudMe in the templates drop-down.
You'll have a same design between your main site (HTML template) and your WHMCS installation!</p>
<p>Have in mind, that WHMCS template does not has any relation with HTML except the same design on header/footer. Does not use Zurb Foundation and it is not responsive as it is clearly stated in item description on ThemeForest.
If you need to make changes to header/footer, you need to open the files header.tpl or footer.tpl with an editor. Styles are includes in /css/style.css file.</p>
</div>
</section>
<section id="faq">
<div class="page-header"><h3>How to define the words/phrases that animated below the logo/navigation in home page?</h3><hr class="notop">
<p>Just separate the words/phrases with comma(,).</p>
</div>
<div class="page-header"><h3>Where i can define the number counters that i see in home page?</h3><hr class="notop">
<p>Number counters has been defined by its id (for example <span id="discount"/>). You can define each number counter by its id in js/custom.js (sections = // ______________ DISCOUNT NUMBER - CALL TO ACTION ON HOME PAGE and // ______________ LOVED BY DEVELOPERS NUMBER - CALL TO ACTION ON HOME PAGE). Define where to start (prop=0), where to end (number:) and the seconds that this counting takes until the end.</p>
</div>
<div class="page-header"><h3>How can i make the top bar (logo and navigation menu) sticky on scroll?</h3><hr class="notop">
<p>Edit style.css file and change the .top class. Replace in this specific class the position:absolute with position:fixed<br/><br/>
Go down to Media Queries and add the following jsut below of @media only screen and (max-width: 719px) {<br/><br/>
.top {position:relative; z-index:0}
</p>
</div>
<div class="page-header"><h3>How can i add animation while scrolling to an item?</h3><hr class="notop">
<p>You can do this, by using "wow" class and the class for the specific animation. <br/>
<br/>For example : <div data-wow-delay="0.2s" class="wow zoomIn"><br/><br/>
- the "wow" class hooks the animation when the specific div is in viewport<br/>
- the "zoomIn" class is the animation effect. You can see the effects taht you can assing here : <a href="http://daneden.github.io/animate.css/">http://daneden.github.io/animate.css/</a><br/>
- the data-wow-delay="0.2s" is a variable that we can assing to define the time that the specific div displaying.</p>
</div>
<div class="page-header"><h3>Where i can define my e-mail account to receive the messages from contact form?</h3><hr class="notop">
<p>It is in sendmail.php, line 17 ($site_owners_email=)</p>
</div>
<div class="page-header"><h3>Where i can define my plans, prices and other options to order slider?</h3><hr class="notop">
<p>Just go to to javascript code in the bottom of the page and define accordingly. See the screenshot for more info</p>
<p><img src="assets/images/os.png"></p>
</div>
<div class="page-header"><h3>I have purchased the video that i show in preview from VideoHive. Now?</h3><hr class="notop">
<p>Just save the 3 video formats (mp4, ogv, webm) that you found in video zip in the /video folder, and update the paths(source src=) in index-video.html that start on line 140.</p>
</div>
<div class="page-header"><h3>Where i can find the flat design icons that i see in the demo?</h3><hr class="notop">
<p>You can download them from : <br/>
1) <a href="http://www.smashingmagazine.com/2014/06/19/freebie-ballicons-2-icon-set-png-psd-svg/">http://www.smashingmagazine.com/2014/06/19/freebie-ballicons-2-icon-set-png-psd-svg/</a> <br/>
2) <a href="http://www.smashingmagazine.com/2014/05/27/summer-essentials-icon-set-freebie-eps-png-ai/">http://www.smashingmagazine.com/2014/05/27/summer-essentials-icon-set-freebie-eps-png-ai/</a><br/>
you can download and use them to your projects (Creative Commons 3.0), unfortunately we can't bundle them with the template because the redistribution is prohibited.</p>
</div>
</section>
</div>
</body>
</html>
?>