376 lines
15 KiB
HTML
376 lines
15 KiB
HTML
<!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>Relish - Spa salon HTML Template</title>
|
|
|
|
<meta name="description" content="Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to contact us. Thanks so much!">
|
|
<meta name="author" content="Creative Web Solutions">
|
|
<meta name="copyright" content="Creative Web Solutions">
|
|
|
|
<link rel="stylesheet" href="css/documenter_style.css" media="all">
|
|
|
|
|
|
<script src="js/jquery.1.6.4.js"></script>
|
|
|
|
<script src="js/jquery.scrollTo-1.4.2-min.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>SyntaxHighlighter.defaults['toolbar'] = false;SyntaxHighlighter.all();</script>
|
|
|
|
<script>document.createElement('section');var duration=500,easing='swing';</script>
|
|
<script src="js/script.js"></script>
|
|
|
|
<style>
|
|
::-moz-selection{background:#3D4F5F;color:#DDDDDD;}
|
|
::selection{background:#3D4F5F;color:#DDDDDD;}
|
|
#documenter_sidebar #documenter_logo{background-image:url(assets/images/creaws_logo.png);}
|
|
a, code{color:#0072D2;}
|
|
hr{border-top:1px solid #C7C7C7;border-bottom:1px solid #FFFFFF;}
|
|
#documenter_sidebar, #documenter_sidebar ol a{background-color:#2C3945;color:#FFFFFF;}
|
|
#documenter_sidebar ol a{-webkit-text-shadow:1px 1px 0px #202D3A;-moz-text-shadow:1px 1px 0px #202D3A;text-shadow:1px 1px 0px #202D3A;}
|
|
#documenter_sidebar ol{border-top:1px solid #496075;}
|
|
#documenter_sidebar ol a{border-top:1px solid #202D3A;border-bottom:1px solid #496075;color:#FFFFFF;}
|
|
#documenter_sidebar ol a:hover{background:#3D4F5F;color:#DDDDDD;border-top:1px solid #3D4F5F;}
|
|
#documenter_sidebar ol a.current{background:#3D4F5F;color:#DDDDDD;border-top:1px solid #3D4F5F;}
|
|
#documenter_copyright{display:block !important;visibility:visible !important;}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="documenter_sidebar">
|
|
<a href="http://themeforest.net/user/CreativeWS/portfolio" target="_blank" id="documenter_logo"></a>
|
|
<ol id="documenter_nav">
|
|
<li><a class="current" href="#documenter_cover">Introduction</a></li>
|
|
<li><a href="#html_structure">HTML Structure</a></li>
|
|
<li><a href="#css_files_and_structure">CSS Files and Structure</a></li>
|
|
<li><a href="#customize">Customization</a>
|
|
<ol>
|
|
<li><a href="#menu_n_layout">Menu type & Boxed Layout</a></li>
|
|
<li><a href="#color">Color scheme & Pattern type</a></li>
|
|
<li><a href="#slider">Image Slider</a></li>
|
|
<li><a href="#fonts">Typography</a></li>
|
|
<li><a href="#email">Email</a></li>
|
|
<li><a href="#twitter">Twitter</a></li>
|
|
<li><a href="#gmap">Google Maps</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#javascript">JavaScript</a></li>
|
|
<li><a href="#psd_files">PSD Files</a></li>
|
|
<li><a href="#credits">Credits</a></li>
|
|
|
|
</ol>
|
|
<div id="documenter_copyright">Copyright Creative Web Solutions 2016<br>
|
|
made with the <a href="http://rxa.li/documenter">Documenter v1.6</a>
|
|
</div>
|
|
</div>
|
|
<div id="documenter_content">
|
|
<section id="documenter_cover"><h1>Relish</h1><h2>Spa salon HTML Template</h2><hr><ul>
|
|
<li>Created: 04/29/2016</li>
|
|
<li>Last Update: 04/29/2016</li><li>By: <a href="http://creaws.com">Creative Web Solutions</a></li><li>Email: <a href="mailto:support@creaws.com">support@creaws.com</a></li></ul><p>Thank you for choosing our template. If you have any questions that are beyond the scope of this file, please feel free to contact us.
|
|
<p class="info">
|
|
<b>Please note:</b> for questions on basic HTML, JavaScript or CSS editing - please give your question to <a href="http://www.google.com/search?q=css+background+color">Google</a> or visit <a href="http://www.w3schools.com/tags/default.asp">W3Schools</a>. You will need some HTML/CSS knowledge to edit this template.</p></p></section>
|
|
|
|
<section id="html_structure">
|
|
<h3>HTML Structure</h3>
|
|
<p>
|
|
<b>Relish</b> has a fixed layout with up to 12 columns. All the information within the main content area is nested within a div. The general template structure is the same throughout the template as it uses the Bootstrap framework.</p>
|
|
<div>
|
|
The<strong> multi column layout</strong> consists of the .col-md-(from 1 to 12) classes. See Bootstrap documentation here: http://getbootstrap.com/css/</div>
|
|
<hr>
|
|
<p>
|
|
If you would like to edit the color, font or style of any element on the site please find the element's class or ID and locate where it is being controlled in styles.css.</p>
|
|
<p>
|
|
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.</p>
|
|
</section>
|
|
|
|
<section id="css_files_and_structure">
|
|
<h3>CSS Files and Structure</h3>
|
|
<p>
|
|
We're using the following CSS files in this template. Those files also contain some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind that these values might be overridden somewhere else in the files below:</p>
|
|
<ol>
|
|
<li>
|
|
<strong>styles.css</strong> - main css file (included reset styles);</li>
|
|
<li>
|
|
<strong>bootstrap.css</strong> - Bootstrap css file;</li>
|
|
<li>
|
|
<strong>font-awesome.css</strong> - FontAwesome icons stylesheet;</li>
|
|
<li>
|
|
<strong>flaticon.css</strong> - Flaticon icons stylesheet;</li>
|
|
<li>
|
|
<strong>owl.carousel.css</strong> - OWL carousel stylesheet;</li>
|
|
<li>
|
|
<strong>jquery.fancybox.css</strong> - FancyBox plugin styles;</li>
|
|
</ol>
|
|
<p>
|
|
<p>
|
|
At first glance, the CSS may look confusing, let me explain each below:</p>
|
|
<p>
|
|
<strong>Main CSS Files</strong></p>
|
|
<ul>
|
|
<li>
|
|
styles.css - This is the main CSS file that controls nearly everything on the site. This stylesheet is full of different color styles. </li>
|
|
<li>
|
|
bootstrap.css - Bootstrap CSS, you don't need to edit this file</li>
|
|
<li>
|
|
fancybox.css - FancyBox CSS, you don't need to edit this file</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<strong>styles.css</strong> file contains specific stylings for the page. The file is separated into sections using:</span></p>
|
|
<pre class="brush: html">
|
|
## GENERAL
|
|
## reset
|
|
## defaults
|
|
## LAYOUT
|
|
## list
|
|
## dividers
|
|
## breadcrumb
|
|
## promo
|
|
## HOME SECTIONS
|
|
## top panel
|
|
## section background
|
|
## home content
|
|
## MAIN MENU
|
|
## menu styles
|
|
## sticky styles
|
|
## submenu
|
|
## submenu mega
|
|
## mobile menu
|
|
## BANNERS
|
|
## BUTTONS
|
|
## FEATURES ITEM
|
|
## OWL CAROUSEL
|
|
## navigation styles
|
|
## dots styles
|
|
## SLIDER REVOLUTION
|
|
## SHOP
|
|
## shop slider
|
|
## shop checkout
|
|
## FOOTER
|
|
## top footer
|
|
## bottom footer
|
|
## NEWS
|
|
## ACCORDION
|
|
## TOGGLE
|
|
## TABS
|
|
## PROGRESS BARS
|
|
## PROCEDURE
|
|
## PRICING TABLE
|
|
## GIFTS
|
|
## SERVICES
|
|
## EXPERTS
|
|
## FILTER
|
|
## PORTFOLIO
|
|
## portfolio grid
|
|
## portfolio styles
|
|
## BLOG
|
|
## PAGINATION
|
|
## WIDGET
|
|
## widget default
|
|
## widget search
|
|
## widget categories
|
|
## widget post
|
|
## widget comments
|
|
## widget archives
|
|
## widget gallery
|
|
## widget twitter
|
|
## widget tag
|
|
## widget meta
|
|
## widget price slider
|
|
## widget cart
|
|
## widget banner
|
|
## widget selers
|
|
## widget video
|
|
## widget calendar
|
|
## widget big gallery
|
|
## widget form
|
|
## widget sidbar navigation & widget page
|
|
## FORM FIELDS
|
|
## CONTACTS
|
|
## GOOGLE MAP
|
|
## ALERT BOXES
|
|
## SCROLL TOP
|
|
## PRELOADER
|
|
## BOXED STYLE
|
|
## COLORPICKER
|
|
## MEDIA SCREEN
|
|
</pre>
|
|
</section>
|
|
|
|
<section id="customize">
|
|
<h3>Template customization</h3>
|
|
<h4 id="menu_n_layout">Layout type:</h4>
|
|
|
|
<strong>Relish supports wide or boxed layout.</strong></p>
|
|
Wide layout is applied by default. To activate the boxed one,
|
|
locate the "body" tag and add the "boxed" class, so that your new HTML code would look like this:
|
|
<pre class="brush: html"> <body class="boxed"> </pre>
|
|
Apply the above steps to every HTML page you need.
|
|
<hr>
|
|
<h4 id="color">Color scheme:</h4>
|
|
<ol>
|
|
<li>
|
|
With the help of Style Switcher (see demo site) choose a suitable color scheme for your website section. Let's choose the color #A560D9 as example.<br></li>
|
|
<li>
|
|
To apply this color you need to replace all the instances of "#00e7b4" with "#A560D9" located in styles.css file (with sublime or notepad it takes less then a second).
|
|
Don't forget to save the changes.
|
|
</li>
|
|
<li>
|
|
That's all, your new color scheme is setup and applied to all html files! The same steps should be done to change any other template color.
|
|
</li>
|
|
</ol>
|
|
|
|
<h4 id="slider">Image Slider:</h4>
|
|
</p>Our template uses a very powerful Revolution Slider plugin. The slider's documentation may be found <a href="RevSlider\index.html#how_to_start" target="_blank">here</a>.<p>
|
|
|
|
<hr>
|
|
|
|
<h4 id="fonts">Typography:</h4>
|
|
<ol>
|
|
<li>
|
|
Select a suitable font for your main menu or content. (for example we can choose any font from google fonts: <a href="http://www.google.com/webfonts#ChoosePlace:select">http://www.google.com/webfonts#ChoosePlace:select</a>)</li>
|
|
<li>
|
|
Let's choose Happy Monkey font as example.</li>
|
|
<li>
|
|
All you need is to import the font at the beginning of the styles.css file: <br>
|
|
<pre class="brush: css">@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);</pre>
|
|
<br>
|
|
and edit the according class or ID.<br>
|
|
In case of changing the menu text font, we need to find and replace font-family here:
|
|
<pre class="brush: css">
|
|
.inner-nav ul li a, .inner-nav ul li .search-menu {
|
|
font-family: 'Lato', sans-serif;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
-webkit-transition: all 0.3s;
|
|
-moz-transition: all 0.3s;
|
|
-o-transition: all 0.3s;
|
|
-ms-transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
}</pre>
|
|
Add font family 'Lato' with 'Happy Monkey' in the above code.
|
|
<br>
|
|
The same steps we should take to change all other fonts;
|
|
</li>
|
|
</ol>
|
|
<hr>
|
|
<h4 id="email">Email setup for contact form:</h4>
|
|
<ol>
|
|
<li>
|
|
Our PressView template includes working contact form. To change the email address so that all the messages would come to your email you'll need to edit just
|
|
one file called "contacts-process.php" at line #9 which is located in the "php" folder:<br>
|
|
<pre class="brush: html">
|
|
$ourMail = "your_email@mail.com";
|
|
</pre>
|
|
so, instead of "your_email@mail.com" just input your email address and upload the file to your host. That's all! The contact form, widget and signup page will send all inquiries to your email address.
|
|
</li>
|
|
</ol>
|
|
<hr>
|
|
<h4 id="twitter">Twitter setup:</h4>
|
|
<ol>
|
|
<li>
|
|
<p><b>Now we're ready to go forward and edit the Twitter user ID.</b></p>
|
|
|
|
<p>1. First you will need to create a twitter developer account (if you don't have one).
|
|
Note: this account is not the one you are retrieving status updates (tweets) from. </p>
|
|
|
|
<p>2. Open http://apps.twitter.com and login with your developer account.</p>
|
|
|
|
<p>3. Move your mouse to your avatar (the right top corner) and click "My Applications". </p>
|
|
|
|
<p>4. Click "Create a new application" and enter the necessary information. </p>
|
|
|
|
<p>5. Once your Application has been created, click on "Create my access
|
|
token" at the bottom of the "Details" tab. </p>
|
|
<p class="info">
|
|
<b>Please note:</b> there's a nice article showing all the above steps with screenshots: <a href="http://bit.ly/1dc3veA" target="_blank" >http://bit.ly/1dc3veA</a>.
|
|
So, it might be helpful if you find the above steps a little complex. </p>
|
|
|
|
<p>6. Now, when you have all the keys and tokens
|
|
necessary for using the Twitter plugin, open the "script.js" file (located in the "js" folder) and find the twitter section.
|
|
You will find a twitter block, which contains the Twitter ID. Just replace the "username:ID" with your
|
|
twitter ID. Next edit the "php\twitter\index.php" file and edit the "config" section filling in the following fields:
|
|
$consumer_key, $consumer_secret, $user_token, $user_secret with your own twitter access keys.
|
|
<p class="warning">Be careful while setting up the above keys and tokens. Wrong values might block the whole script.js file which is used throughout the whole template.</p>
|
|
|
|
</p>
|
|
Please don't forget to upload the "index.php" file to your host after you save all changes.
|
|
</li>
|
|
|
|
</ol>
|
|
<hr>
|
|
<h4 id="gmap">Google Map setup:</h4>
|
|
<strong>Google Map setup is a very easy process.</strong>
|
|
<p> All you have to do is to edit the map address in the code bellow (which is usually located on the page where the map is shown):
|
|
<pre class="brush: html">
|
|
<!-- google map -->
|
|
|
|
<div class="google-map">
|
|
<div data-address="Hays" id="map-canvas"></div>
|
|
</div>
|
|
|
|
<!-- /google map -->
|
|
</pre>
|
|
|
|
<p>That's all, your google map is setup and ready to use!</p>
|
|
</section>
|
|
<section id="javascript">
|
|
<h3>JavaScript</h3>
|
|
<p>
|
|
This template imports the following Javascript files. <strong>You can get more script info when clicking the appropriate link:</strong></p>
|
|
<ol>
|
|
<li>
|
|
<strong>script.js</strong> - main js file.</li>
|
|
<li>
|
|
<strong>jquery.fancybox.pack.js</strong>. Refer to the <a href="http://fancyapps.com/fancybox/" target="_blank">author's documentation</a> for additional notes on how to use it.</li>
|
|
<li>
|
|
<strong>jquery.isotope.min.js</strong> Refer to the <a href="http://isotope.metafizzy.co" target="_blank">author's documentation</a> for additional notes on how to use it.</li>
|
|
<li>
|
|
<strong>owl.carousel.js</strong> Refer to the <a href="http://www.owlgraphic.com/owlcarousel" target="_blank">author's documentation</a> for additional notes on how to use it.</li>
|
|
<li>
|
|
<strong>jquery.ui libraries</strong> Refer to the <a href="http://jqueryui.com" target="_blank">author's documentation</a> for additional notes on how to use it.</li>
|
|
<li>
|
|
<strong>jquery.min.js</strong> Refer to the <a href="jquery.org" target="_blank">author's documentation</a> for additional notes on how to use it.</li>
|
|
</ol>
|
|
</section>
|
|
<section id="psd_files">
|
|
<h3>PSD Files</h3>
|
|
<p>
|
|
We've included some PSD files to make the re-design process a bit easier.</p>
|
|
<p>
|
|
Please check the PSD folder for all included PSD files.</p>
|
|
|
|
|
|
</section>
|
|
<section id="credits">
|
|
<h3>Credits</h3>
|
|
<p>
|
|
We've used the following images, icons and other resources as listed.</p>
|
|
<ul>
|
|
<li>
|
|
<strong>Flaticon library - Free Vector Icons </strong> - http://www.flaticon.com/</li>
|
|
<li>
|
|
<strong>FancyBox - jQuery Plugin </strong> - http://fancyapps.com</li>
|
|
<li>
|
|
<strong>jQuery</strong> - www.jquery.com</li>
|
|
<li>
|
|
<strong>Maps</strong> - Maps.Google.com used in live demo</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html> |