.....
Red Art
Creative Multi-Page Html Template
- Created: 07 / Nov / 2015
- latest Update: 07 / Nov / 2015
- 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
Red Art Default
Red Art Menu Overlay
Red Art Slide Bar
Red Art Slider Over Menu
- 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) - Modernizr
(modernizr-2.6.2.min.js) - CarouFredSel
(jquery.carouFredSel-6.2.1-packed.js) - Easing Effect
(jquery-easing-1.3.js) - Sticky Nav
(jquery.sticky.js) - Viewport
(jquery.viewport.js) - Inview
(jquery.inview.js) - Parallax Scrolling
(jquery.parallax-1.1.3.js) - Prettyphoto
(jquery.prettyPhoto.js) - Tabs
(jquery.tabs.min.js) - BX Slider
(jquery.bxslider.min) - 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) - Rounded Chart
(jquery.donutchart.js) - For Charts Plugins
-
morris.min.js -
raphael.js -
jquery.sparkline.min.js
-
- Migrate
(jquery-migrate.min.js) - Custom Scroll-bar
(mCustomScrollbar.min.js) - Dropdown Box
(jquery.dropdown.js) - Retina
(retina.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";
--------------------------------------------------------------
TABLE OF CONTENTS:
--------------------------------------------------------------
1.General Styles
1.1. Body
1.2. Fonts
1.3. Headings
1.4. Text Elements
1.5. Forms
1.6. Transition
1.7. Box sizing
1.8. Images
1.9. Tables
1.10. Widgets
1.11. Definition Lists
1.12. Woocommerce
2.Layout
2.1. Wrapper
2.2. Container
2.3. Header
2.4. Main
2.4.1. Breadcrumb
2.4.2. Fullwidth - Page Title
2.4.3. Portfolio
2.4.4. Blog
2.4.5. Frames
2.4.6. About Us
2.4.7. Contact Us
2.4.8. Recent Gallery
2.4.9. Shop
2.5. Footer
3.Back To Top
4.Retina Ready
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) - Modernizr
(modernizr-2.6.2.min.js) - CarouFredSel
(jquery.carouFredSel-6.2.1-packed.js) - Easing Effect
(jquery-easing-1.3.js) - Sticky Nav
(jquery.sticky.js) - Viewport
(jquery.viewport.js) - Inview
(jquery.inview.js) - Parallax Scrolling
(jquery.parallax-1.1.3.js) - Prettyphoto
(jquery.prettyPhoto.js) - Tabs
(jquery.tabs.min.js) - BX Slider
(jquery.bxslider.min) - 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) - Rounded Chart
(jquery.donutchart.js) - For Charts Plugins
-
morris.min.js -
raphael.js -
jquery.sparkline.min.js
-
- Migrate
(jquery-migrate.min.js) - Custom Scroll-bar
(mCustomScrollbar.min.js) - Dropdown Box
(jquery.dropdown.js) - Retina
(retina.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 28) 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.
Avocado = <link id="skin-css" href="skins/avocado/style.css" rel="stylesheet" media="all" />
Blue = <link id="skin-css" href="skins/blue/style.css" rel="stylesheet" media="all" />
Blueiris = <link id="skin-css" href="skins/blueiris/style.css" rel="stylesheet" media="all" />
Blueturquoise = <link id="skin-css" href="skins/blueturquoise/style.css" rel="stylesheet" media="all" />
Brown = <link id="skin-css" href="skins/brown/style.css" rel="stylesheet" media="all" />
Burntsienna = <link id="skin-css" href="skins/burntsienna/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" />
Graasgreen = <link id="skin-css" href="skins/graasgreen/style.css" rel="stylesheet" media="all" />
Gray = <link id="skin-css" href="skins/gray/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" />
Palebrown = <link id="skin-css" href="skins/palebrown/style.css" rel="stylesheet" media="all" />
Pink = <link id="skin-css" href="skins/pink/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 5 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 image as shown in the below example.
Example
<body class="boxed" style="background-image:url(images/patterns/pattern1.jpg);">
Default
Menu Overlay
Slide Bar
..... .....
Slider Over Menu
Portfolio Setup
Skeleton to add portfolio items
Blog Setup
Skeleton to add Blog Items
.....
.....
.....
Shortcodes
Buttons
Code for Small Button Type1 - Small Button
Code for Medium Button Type1 - Medium Button
Code for Large Button Type1 - Large Button
Code for Xlarge Button Type1 - XLarge Button
Code for Small Button Type2 - Small Button
Code for Medium Button Type2 - Medium Button
Code for Large Button Type2 - Large Button
Code for Xlarge Button Type2 - XLarge Button
Code for Small Button Type3 - Small Button
Code for Medium Button Type3 - Medium Button
Code for Large Button Type3 - Large Button
Code for Xlarge Button Type3 - XLarge Button
Code for Small Button with Icon Type1 - Small
Code for Medium Button with Icon Type1 - Small
Code for Large Button with Icon Type1 - Small
Code for Xlarge Button with Icon Type1 - Small
Code for Small Button with Icon Type2 - Small
Code for Medium Button with Icon Type2 - Small
Code for Large Button with Icon Type2 - Small
Code for Xlarge Button with Icon Type2 - Small
Code for Small Button with Icon Type3 - Small
Code for Medium Button with Icon Type3 - Small
Code for Large Button with Icon Type3 - Small
Code for Xlarge Button with Icon Type3 - Small
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 |
Horizontal Tab
Vertical Tab
Left Vertical Tab
Right Vertical Tab
Toggles
Standard Toggle
Toggle 1
......................
Toggle 2
......................
Toggle 3
......................
Framed Toggle
Toggle 1......................
Toggle 2......................
Toggle 3......................
Accordion
Standard Accordion
Accordion 1
......................
Accordion 2
......................
Accordion 3
......................
Framed Accordion
Accordion 1......................
Accordion 2......................
Accordion 3......................
Pricing Table
Type 1
Type 2
- Total Cost - 0
- ......
- ......
- ......
- ......
- ......
- ......
- ......
- ......
- ......
- ......
- ......
- ......
- ......
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 508 - 524) 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 (PT Sans Narrow, Josefin Sans) in our template. You can use any Google font simply as following,
1. Please replace the following lines in all layout files.
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,100italic,300italic);
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
2. Find the following lines in style.css and replace with your new font family.
body, p, .mailchimp-form p input, .about-details p, .breadcrumb h2 span, .dt-sc-service-content p, .shop-dropdown ul li span, .shop-dropdown span span, .project-details ul.client-details li span, .project-details ul.client-details li p
{ font-family: 'PT Sans Narrow', sans-serif;}
.main-title h1, .main-title h2, .main-title h3, .main-title h4, .main-title h5, .main-title h6, .main-title h3, .entry-details .entry-title h3, .about-section h3, .breadcrumb h2, blockquote q, .post-author-details .author-desc p
{ font-family: 'Josefin Sans', sans-serif; font-weight: 100;}
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,
- jQuery
- jQuery Easing Plugin
- Fontawesome
- G Map
- Isotope
- Parallax
- jQuery Tabs
- Custom scroll bar
- Diagram Bar
- Pie Chart
- PrettyPhoto
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