|
Server IP : 162.241.148.128 / Your IP : 216.73.216.95 Web Server : Apache System : Linux md-ht-9.webhostbox.net 4.19.286-203.ELK.el7.x86_64 #1 SMP Wed Jun 14 04:33:55 CDT 2023 x86_64 User : caribhll ( 2226) PHP Version : 8.3.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON Directory (0755) : /home3/caribhll/ridevis.com/forkandfable/documentation/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<!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> Template Documentation</title>
<link rel="stylesheet" href="css/documenter_style.css" media="all">
<script src="js/jquery.1.6.4.js"></script>
<script src="js/jquery.easing.js"></script>
<link rel="stylesheet" href="css/shDocumenter.css" media="screen">
<script src="js/shCore.js"></script>
<script src="js/shBrushCss.js"></script>
<script src="js/shBrushXml.js"></script>
<script src="js/shBrushJScript.js"></script>
<script src="js/shBrushPhp.js"></script>
<script>SyntaxHighlighter.defaults['toolbar'] = false;SyntaxHighlighter.all();</script>
<script>document.createElement('section');var duration=500,easing='swing';</script>
<script src="js/script.js"></script>
</head>
<body>
<div class="top-header">
<!-- Logo -->
<a class="logo" href="https://themeforest.net/user/kwst/portfolio"> <img src="images/logo.png" alt=""> </a>
<!-- Logo End -->
<ul class="navbar-nav">
<li><a target="_blank" href="https://themeforest.net/user/kwst/portfolio">Other Templates</a></li>
<li><a href="mailto:support@kwst.net">Support</a></li>
<li><a href="https://twitter.com/katokli3mmm" target="_blank">Twitter</a></li>
<li><a href="https://www.facebook.com/kwst3" target="_blank">Facebook</a></li>
<li><a href="https://themeforest.net/user/kwst" target="_blank">Follow on Themeforest</a></li>
</ul>
</div>
<div id="documenter_sidebar">
<nav id="documenter_nav" class="menu_init">
<ul>
<li><a href="#documenter_cover" class="actscr-link">Start - Files</a></li>
<li><a href="#colors">Color</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#ajax">Ajax Page Transitions</a></li
<li><a href="#icons">Icons</a></li>
<li><a href="#reserv_form">Reservation form</a></li>
<li><a href="#contact_form">Contact form</a></li>
<li><a href="#sub">Subscribe mailchimp</a></li>
<li><a href="#share">Share</a></li>
<li><a href="#map">Map</a></li>
<li><a href="#counter">Counter</a></li>
<li><a href="#sources_credits">Sources & Credits</a></li>
<li><a href="#thanks">Thanks</a></li>
</ul>
</nav>
</div>
<div id="documenter_content">
<section id="documenter_cover">
<div class="sec-container">
<h1>Forked </h1><h2> Restaurant / Cafe / Pub Template</h2><hr><ul><li>Created: 09/08/2025</li><li>latest Update: 09/08/2025</li><li><a href="http://themeforest.net/user/kwst">By: KWST</a></li> <li>Email: <a href="mailto:support@kwst.net">support@kwst.net</a></li></ul>
<p>Thanks for purchasing tempalte and for supporting my work. Forked - Restaurant / Cafe / Pub Template. This documentation will not teach you HTML & CSS, it's just showcase of custom elements used in template. </p> <br>
<p><strong style="color:red"> Very important !</strong> In order to work php scripts (ajax page transitions, contact form , reservation form)- your site files must reside on the local host or server. In turn, you can easily edit any page (all JavaScript files will work).</p>
<br><br><h3>Files</h3><hr class="notop"><br>
<p>All site files are divided into folders:<br><br>
<strong>css folder</strong> - css files that are responsible for the style themes.<br>
<strong>js folder</strong> - javascript files.<br>
<strong>php folder</strong> - php files.<br>
<strong>video folder</strong> - video files.<br>
<strong>images folder</strong> - folder that contains all images.<br>
<strong>fonts folder</strong> - folder that contains fonts plugin "Font-Awesome".<br>
</p>
</div>
</section>
<div class="clerfix"></div>
<section id="colors">
<div class="sec-container">
<h3>Colors</h3>
<p>By default, 'Forked' has uses gold color - golden (#C19D60). To change the color, you must do the following steps:
<br>
1. Open file style.css it with your text editor.
<br>
2. In this file find code <strong style="color:#A62D2F"> --main-color: #C19D60; </strong>. And change value C19D60 as you like.
<br>
</p>
</div>
</section>
<section id="ajax">
<h3>Ajax</h3><hr class="notop">
<p>To dynamically loaded content - you can simply add a link class "ajax". For example: </p>
<pre class="brush: html">
<a href="menu.html" class="ajax">Our Menu </a>
</pre>
<p>Accordingly to the content page was loaded as usual, this class must be removed</p><br>
<h3>Disable ajax</h3>
<p>To disable Ajax throughout the template - open file scripts.js find</p>
<pre class="brush: js">
// Init Ajax------------------
$(function () {
$.coretemp({
reloadbox: "#content-holder",
outDuration: 800,
inDuration: 100
});
readyFunctions();
$(document).on({
ksctbCallback: function () {
readyFunctions();
}
});
});
// Init All Functions------------------
function readyFunctions() {
initForked();
}
</pre>
<p>And the change it on this code :</p>
<pre class="brush: js">
$(document).ready(function() {
initForked();
});
</pre>
<p>In order to remove the Ajax request in separate links - just remove class "ajax" . For example :</p>
<pre class="brush: html">
<a href="menu.html">Menu</a>
</pre>
<p>In order to change the title when changing the page find div with class <strong>"dyn_page_title" </strong> :</p>
<pre class="brush: html">
<div class="content dyn_page_title" data-pagetitle="Our News">
</pre>
<p>
and add title in <strong>data-pagetitle="Our news"</strong>.
</p>
</section>
<section id="images">
<div class="sec-container">
<h3>Images</h3><hr class="notop">
<p>All images are in the folder "images".<br>
</p>
<br>
<h3>How to add and change the background image</h3>
<p>To change the background you can simply change the path in the style rendered in html code, for example : </p>
<code>
<pre class="brush: html">
<div class="bg" data-bg="images/bg/1.jpg"></div>
</pre>
</code>
</div>
</section>
<section id="icons">
<div class="sec-container">
<h3>Icons</h3><hr class="notop">
<p> All icons are generated by the plugin <a href="https://fontawesome.com/icons" target="_blank">"Font-Awesome"</a>. List of all the icons can be found <a href="https://fontawesome.com/icons" target="_blank">here</a>.
<br>
To change the icon, you have to copy and paste the code icon at the right place for you.
</p>
<p>For example: </p>
<code>
<pre class="brush: html">
<i class="fa-solid fa-chevron-left"></i>
</pre>
</code>
</div>
</section>
<section id="reserv_form">
<div class="sec-container">
<h3>Reservation Form</h3><hr class="notop">
<p>
Find the file "reservation" in the folder <strong>php</strong> . In this file, find the line <strong style="color:red">$to_Email = "myemail@gmail.com";</strong> and add you e-mail.</p>
<p>How to forward mail to your mailbox ask your Hosting Service Provider. Because providers use different control panel site and I find it hard to predict what you use. Server side script for sending emails is in "contact.php" . Ajax submit is initialized in "scripts.js" file.</p>
<p>
</p>
<code>
<pre class="brush: js">
// reservation form------------------
$(document).on('submit', '#reservationform', function () {
var a = $(this).attr("action");
$("#reserv-message").slideUp(750, function () {
$("#reserv-message").hide();
$.post(a, {
name: $("#name").val(),
email: $("#email").val(),
phone: $("#phone").val(),
numperson: $("#persons").val(),
resdate: $("#res_date").val(),
restime: $("#resrv-time").val(),
comments: $("#comments").val()
}, function (a) {
document.getElementById("reserv-message").innerHTML = a;
$("#reserv-message").slideDown("slow");
if (null != a.match("success")) {
$("#reserv-message").slideDown("slow");
}
});
});
return false;
});
$("#reservationform input, #reservationform textarea ").keyup(function () {
$("#reserv-message").slideUp(1500);
});
</pre>
</code>
</div>
</section>
<section id="contact_form">
<div class="sec-container">
<h3>Contact Form</h3><hr class="notop">
<p>
Find the file "contact" in the folder <strong>php</strong> . In this file, find the line <strong style="color:red">$to_Email = "myemail@gmail.com";</strong> and add you e-mail.</p>
<p>How to forward mail to your mailbox ask your Hosting Service Provider. Because providers use different control panel site and I find it hard to predict what you use. Server side script for sending emails is in "contact.php" . Ajax submit is initialized in "scripts.js" file.</p>
<code>
<pre class="brush: js">
// Contact form------------------
$(document).on('submit', '#contactform', function () {
var a = $(this).attr("action");
$("#message2").slideUp(750, function () {
$("#message2").hide();
$("#submit_cnt").attr("disabled", "disabled");
$.post(a, {
name: $("#name2").val(),
email: $("#email2").val(),
phone: $("#phone2").val(),
subject: $("#subject2").val(),
comments: $("#comments2").val()
}, function (a) {
document.getElementById("message2").innerHTML = a;
$("#message2").slideDown("slow");
$("#submit_cnt").removeAttr("disabled");
if (null != a.match("success")) $("#contactform").slideDown("slow");
});
});
return false;
});
$(document).on('keyup', '#contactform input, #contactform textarea', function () {
$("#message2").slideUp(1500);
});
</pre>
</code>
</div>
</section>
<section id="sub">
<div class="sec-container">
<h3>Subscribe mailchimp</h3><hr class="notop">
<p> To set up the subscription form, you must perform the following steps :</p>
<p>
1. Sign up on <a href="http://mailchimp.com/" target="_blank">mailchimp</a> . It's free.
<br>
2. Next, open the <strong style="color:red">Lists --- Signup forms --- Embedded forms </strong>
<br>
3. Locate the folder js file <strong>scripts.js</strong> and open it with your text editor.
<br>
4.In this file, you should find a code :
<br>
</p>
<code>
<pre class="brush: js">
// mailchimp------------------
$("#subscribe").ajaxChimp({
language: "eng",
url: "https://gmail.us1.list-manage.com/subscribe/post?u=1fe818378d5c129b210719d80&id=a2792f681b"
});
$.ajaxChimp.translations.eng = {
submit: "Submitting...",
0: '<i class="fal fa-check"></i> We will be in touch soon!',
1: '<i class="fal fa-exclamation-circle"></i> You must enter a valid e-mail address.',
2: '<i class="fal fa-exclamation-circle"></i> E-mail address is not valid.',
3: '<i class="fal fa-exclamation-circle"></i> E-mail address is not valid.',
4: '<i class="fal fa-exclamation-circle"></i> E-mail address is not valid.',
5: '<i class="fal fa-exclamation-circle"></i> E-mail address is not valid.'
};
</pre>
</code>
<p> 5.In the form <strong style="color:red">Copy/paste onto your site </strong> copy code <strong style="color:red">"https://gmail.us1.list-manage.com/subscribe/post?u=1fe818378d5c129b210719d80&id=a2792f681b" </strong> For example : </p>
<code>
<pre class="brush: js">
$('#subscribe').ajaxChimp({
language: 'eng',
url: "https://gmail.us1.list-manage.com/subscribe/post?u=1fe818378d5c129b210719d80&id=a2792f681b"
});
</pre>
</code>
</div>
</section>
<section id="share">
<h3>Share your pages</h3><hr class="notop">
<p>To configure the plugin in file scriptys.js find line :</p>
<code>
<pre class="brush: js">
// Share ------------------
$(".share-container").share({
networks: ['facebook', 'pinterest', 'twitter', 'linkedin']
});
</pre>
</code>
<p>You can simply add a comma in line: <strong>social: 'facebook','pinterest', 'twitter','linkedin' 'foursquare' , 'flickr', 'digg' , 'tumblr', , 'stumbleupon'</strong> separated names of social networks . </p>
</section>
<section id="map">
<div class="sec-container">
<h3>Map </h3><hr class="notop">
<p>To configure the single map in html find code :</p>
<code>
<pre class="brush: html">
<div class="map-links_tabs">
<a class="map-link ml_act first_init_marker" href="#" data-markermail="yourmail@domain.com" data-markerphone="+3(123)987654" data-markeradress="USA 27TH Brooklyn NY" data-markertitle="NewYork Forked" data-linklat="[40.714 , -74.005]"> NewYork Forked</a>
<a class="map-link" href="#" data-markermail="poormail@domain.com" data-markerphone="+4(123)555444" data-markeradress="USA 11TH Washington DC" data-markertitle=" Washington Forked" data-linklat="[38.907 , -77.056]"> Washington Forked</a>
<a class="map-link" href="#" data-markermail="cleanma@domain.com" data-markerphone="+5(123)578945" data-markeradress="USA 15TH Boston NY" data-markertitle="Boston Forked" data-linklat="[42.338 , -71.030]"> Boston Forked</a>
</div>
</pre>
</code>
<p> To find the coordinates - visit this <a href="http://www.mapcoordinates.net/en" target="_blank"><strong style="color:red">link</strong></a> </p>
<code>
<pre class="brush: html">
<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>
</pre>
</code>
</div>
</section>
<section id="counter">
<div class="sec-container">
<h3>Counter</h3><hr class="notop">
<p>To configure the date in html file find code :</p>
<code>
<pre class="brush: js">
<div class="cs-media-container counter-widget fl-wrap" data-countDate="09/12/2021"></div>
</pre>
</code>
<p>Add your your date in : <strong>data-countDate="09/12/2021"</strong> .</p>
</div>
</section>
<section id="sources_credits">
<div class="sec-container">
<h3>Sources & Credits</h3><hr class="notop">
<p>
<strong>Fonts</strong><br>
http://www.google.com/fonts<br>
<br>
<strong>Images</strong><br>
Shutterstock<br>
http://www.shutterstock.com/
</p>
<p>
<strong>Icons</strong><br>
Font-Awesome<br>
http://fortawesome.github.io/Font-Awesome/</p>
<p>
<strong>JQuery</strong><br>
http://jquery.com</p>
<p>
<strong>JQuery Easing</strong><br>
http://gsgd.co.uk/sandbox/jquery/easing/</p>
<p>
<strong>Swiper</strong><br>
https://swiperjs.com/</p>
<p>
<strong>isotope</strong><br>
http://isotope.metafizzy.co/</p>
<p>
<strong> Lightgallery</strong><br>
http://sachinchoolur.github.io/lightGallery/</p>
</div>
</section>
<section id="thanks">
<div class="sec-container">
<h3>Thanks</h3><hr class="notop">
<p>
Thanks for purchasing template and for supporting my work. If we fail here in this documentation, please e-mail me <a href="mailto:support@kwst.net">support@kwst.net</a>. If you have a spare time, please go and rate my template. I will apreciate that.</p>
<p>
Thanks</p>
</div>
</section>
</div>
</body>
</html>