<h3>.......<h3>
TrendSalon
Multi-Page Html Template
- Created: 30 / May / 2016
- latest Update: 30 / May / 2016
- By: buddhathemes
- Email: ram@iamdesigning.com
Thanks for purchasing our template! We understand that no business will complete without a prompt after sales support. If you have any questions that are beyond the scope of this help file, please feel free to contact us and you can mail us via our user page contact form. We will be more happy to be of any service as and when you require.
Folder Structure
NeoCut Default
- style.css - main style.css
- The css folder - contains the CSS for all major browsers, prettyphoto, responsive to site makes responsive for all devices and the font awesome (Please ensure that your new styles are applied. Also make sure that they carry enough "weight" and there isn't a style lower in the CSS file that is being applied after yours.)
- The fonts folder - contains the font awesome font files.
- The images folder - contains all the images that are being used in the stylesheets for the layout purpose and it has a subfolder like blog-images, portfolio-images, which contains images used in posts, pages and other areas
- The PHP folder - contains php files for Mailchimp
- The js folder - contains javascript files and plugins as follows,
- jquery
(jquery-1.11.2.min.js) - CarouFredSel
(jquery.carouFredSel-6.2.1-packed.js) - Easing Effect
(jquery-easing-1.3.js) - Sticky Nav
(jquery.sticky.js) - Scroll To
(jquery.scrollTo.min.js) - Inview
(jquery.inview.js) - Parallax Scrolling
(jquery.parallax-1.1.3.js) - Validation plugin for form validation
(jquery.validate.min.js) - Isotope plugin
(jquery.isotope.min.js) - ToolTip
(jquery.tipTip.minified.js) - Back to Top
(jquery.ui.totop.min.js) - Google Map plugin
(jquery.gmap.min.js) - Donut Chart
(jquery.donutchart.js) - Loader
(pace.min.js) - And custom js
(custom.js)
- jquery
HTML Structure
Here is the HTML Structure of the Template (simplified):
..... .....
CSS files Structure
The style.css is main CSS file used in this template. This file also contains some general styling such as anchor tag colors, font-sizes and etc. Keep in mind that these values might be overridden somewhere else in the file.
@charset "UTF-8";
/* CSS Document */
@import "css/reset.css";
1. General
01. Fonts
02. Headings
03. Transition
04. Text Elements
05. Forms
06. Images
07. Widget's
2. Layout
01. Container
02. Header
03. Menu
04. Main
01. Slider
02. Services
03. Offer
04. Product
05. Counting Number's
06. Blog
07. Pricing Table
08. Testimonial
09. About
10. Contact
11. Portfolio
12. Shop
13. 404 - Page
14. Style Picker
15. Go To Top
3. Footer
If you like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
Javascript
This template imports the following Javascript files.
- jquery
(jquery-1.11.2.min.js) - CarouFredSel
(jquery.carouFredSel-6.2.1-packed.js) - Easing Effect
(jquery-easing-1.3.js) - Sticky Nav
(jquery.sticky.js) - Scroll To
(jquery.scrollTo.min.js) - Inview
(jquery.inview.js) - Parallax Scrolling
(jquery.parallax-1.1.3.js) - Validation plugin for form validation
(jquery.validate.min.js) - Isotope plugin
(jquery.isotope.min.js) - ToolTip
(jquery.tipTip.minified.js) - Twitter Feeds
(jquery.tweet.min.js) - Back to Top
(jquery.ui.totop.min.js) - Google Map plugin
(jquery.gmap.min.js) - Donut Chart
(jquery.donutchart.js) - Loader
(pace.min.js) - And custom js
(custom.js)
Color Schemes
Our template comes with 20 predefined color variations. By default we have called skins/ "skin-name" /style.css (Line No 41) which is present in head tag. And, here we have listed the available colors. Please choose your favorite color and update it with all the pages.
Blue = <link id="skin-css" href="skins/blue/style.css" rel="stylesheet" media="all" />
Chillipepper = <link id="skin-css" href="skins/chillipepper/style.css" rel="stylesheet" media="all" />
Chocolate = <link id="skin-css" href="skins/chocolate/style.css" rel="stylesheet" media="all" />
Eggplant = <link id="skin-css" href="skins/eggplant/style.css" rel="stylesheet" media="all" />
Electricblue = <link id="skin-css" href="skins/electricblue/style.css" rel="stylesheet" media="all" />
Palebrown = <link id="skin-css" href="skins/palebrown/style.css" rel="stylesheet" media="all" />
Graasgreen = <link id="skin-css" href="skins/graasgreen/style.css" rel="stylesheet" media="all" />
Green = <link id="skin-css" href="skins/green/style.css" rel="stylesheet" media="all" />
Orange = <link id="skin-css" href="skins/orange/style.css" rel="stylesheet" media="all" />
Pink = <link id="skin-css" href="skins/pink/style.css" rel="stylesheet" media="all" />
Purple = <link id="skin-css" href="skins/purple/style.css" rel="stylesheet" media="all" />
Radiantorchid = <link id="skin-css" href="skins/radiantorchid/style.css" rel="stylesheet" media="all" />
Red = <link id="skin-css" href="skins/red/style.css" rel="stylesheet" media="all" />
Skyblue = <link id="skin-css" href="skins/skyblue/style.css" rel="stylesheet" media="all" />
Yellow = <link id="skin-css" href="skins/yellow/style.css" rel="stylesheet" media="all" />
Note - It's also easy to change the color of any element such as background, font, link and etc.., Just copy and paste the property of the respective color from the above list.
Full-width & Boxed Layout
For Boxed Version, Please add the boxed class inside the body tag as shown below. We have 15 different patterns and 3 images in the image folder. If you wish to add your own pattern instead of the default pattern,then just place you own pattern in the images folder. After that you can call the pattern imageas shown in the below example.
Example
<body class="boxed" style="background-image:url(images/patterns/pattern1.jpg);">
Default
..... .....
..... .....
Type 2
..... .....
..... .....
Type 3
..... .....
..... .....
Type 4
..... .....
..... .....
Type 5
..... .....
..... .....
Portfolio Setup
Skeleton to add portfolio items
Blog Setup
Skeleton to add Blog Items
Shortcodes
Team
Team 2
Team 3
Table Styles
| Header1 | Header2 | Header3 | Header4 | Header5 |
|---|---|---|---|---|
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Header1 | Header2 | Header3 | Header4 | Header5 |
|---|---|---|---|---|
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Header1 | Header2 | Header3 | Header4 | Header5 |
|---|---|---|---|---|
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
| Division1 | Division2 | Division3 | Division4 | Division5 |
Service Type - 1
Service Type - 2
Service Type - 3
- <h5> ....... <h5>
- <h5> ....... <h5>
- <h5> ....... <h5>
- <h5> ....... <h5>
<h4> ....... <h4>
.......
.....
<h4> ....... <h4>
.....
.......
<h4> ....... <h4>
.......
.....
<h4> ....... <h4>
.....
.......Tabs 1
Tabs
Accordion
Accordion 1
<h5 class="dt-sc-toggle-accordion"> .... .....<h5>
...........
Accordion 2
<h5 class="dt-sc-toggle-accordion"> .... .....<h5>
...........
Toggle
Toggle 1
<h5 class="dt-sc-toggle"> .... .....<h5>
..........
Toggle 2
<h5 class="dt-sc-toggle"> .... .....<h5>
..........
Vertical Tabs
Vertical Tabs 1
Contact Form
We have used form in contact page
Here is the basic skeleton of the form:
Note
1. name attribute should be "enqform"
2. action attribute should be "php/send.php"
3. How to change the email address to receive mails (to address only receivers email)?
Please open "php/send.php" at line no: 4
$to = 'xxx@xxx.xx'; #Replace your email id
Subscribe Form
Note
1. Name attribute should be "frmnewsletter"
2. Action attribute should be "php/subscribe.php"
3. How to change the API Key & List ID for mailchimp subscription?
Please open "php/subscribe.php" at line no: 3 & 9
$mcapi = new MCAPI('PUT YOUR API KEY HERE...'); $list_id = 'PUT A VALID LIST ID...'; #Replace your api key & list id
Animations
Here is the list of available animations
- flash
- shake
- bounce
- tada
- swing
- wobble
- pulse
- flip
- flipInX
- flipOutX
- flipInY
- flipOutY
- fadeIn
- fadeInUp
- fadeInDown
- fadeInLeft
- fadeInRight
- fadeInUpBig
- fadeInDownBig
- fadeInLeftBig
- fadeInRightBig
- fadeOut
- fadeOutUp
- fadeOutDown
- fadeOutLeft
- fadeOutRight
- fadeOutUpBig
- fadeOutDownBig
- fadeOutLeftBig
- fadeOutRightBig
- bounceIn
- bounceInUp
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceOut
- bounceOutUp
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- rotateIn
- rotateInUpLeft
- rotateInDownLeft
- rotateInUpRight
- rotateInDownRight
- rotateOut
- rotateOutUpLeft
- rotateOutDownLeft
- rotateOutUpRight
- rotateOutDownRight
- hinge
- rollIn
- rollOut
- lightSpeedIn
- lightSpeedOut
- slideDown
- slideUp
- slideLeft
- slideRight
- slideExpandUp
- expandUp
- expandOpen
- bigEntrance
- hatch
- floating
- tossing
- pullUp
- pullDown
- stretchLeft
- stretchRight
Apply the animation to any element using the below format.
Eg: Using in html element:
Sample Text here
You can add animation to any (div, span, p, img etc) element. We just showed the example with div.
Google Map Setup
1. Please find "custom.js" file which is located in js/custom.js.
2. Find the script (Line No 298 - 312) for google map.
3. Please change your address here to be shown with the map in your contact page.
Fonts
We have used Google Fonts (Raleway, Roboto) in our template. You can use any Google font simply as following,
1. Please replace the following lines in all layout files.
2. Find the following lines in style.css and replace with your new font family.
Icons
We have used FontAwesome icons in this template.
You can see the complete list of FontAwesome icons we've used at, here
Source & Credits
We would really like to thank,
Once again, thanks a lot for purchasing our template. As we said at the beginning, we would be glad to help you if you have any questions that are related to this template. We'll do our best to assist you. If you have a more general question relating to the template on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
BuddhaThemes