CORE – Multipurpose Single Page HTML5 Template

# CORE

## Multipurpose Single Page HTML5 Template

- Created: 02/14/2013
- latest Update: 10/21/2013
- By: designthemes
- Email: ram@iamdesiging.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

### Folder Structure

- style.css - main style.css
- responsive.css - makes the template as resposive
- The skins folder - contains the css for predefined skins that comes with the template.
- The css folder - contains the css for all major browsers, prettyphoto & for the font awesome. - ( Please ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours. )
- The images folder - contains all the images that are used in the stylesheets for the layout purpose & it has subfolder named post-images , which contains images used in post, pages and other areas
- The js folder - contains javascript files & plugins ( Which includes)
  1. jQuery framework `(jquery.js)`
  2. Modernizr `(modernizr-2.6.2.min.js)`
  3. Isotope plugin `(isotope.js)`
  4. CarouFredSel plugin `(jquery.carouFredSel-6.2.0-packed.js)`
  5. Easing `(jquery.easing.1.2.js)`
  6. PrettyPhoto `(jquery.prettyPhoto.js)`
  7. Tabs `(jquery.tabs.min.js)`
  8. Tweets `(jquery.tweet.js)`
  9. bx Slider plugin `(jquery.bxslider.min.js)`
  10. Google Map plugin `(jquery.gmap.min.js)`
  11. For Navigation
      1. Mouse Wheel `(jquery.mousewheel.js)`
      2. Mobile Menu `(jquery.mobilemenu.js)`
      3. Visual Nav Plugin `jquery.visualNav.js`
  12. Media Element
      1. Video `(video.js)`
      2. Audio `(audio.min.js)`
  13. And custom js like `(core-custom.js)`

### HTML Structure

The general template structure is the same throughout the template. Here is the general structure.

                    	.	.	.	.	.

                            .	.	.	.	.

                            .	.	.	.	.

                .	.	.	.	.

### CSS files and 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, etc. Keep in mind, that these values might be overridden somewhere else in the file.

            @charset "utf-8";
            /* CSS Document */

            @import "css/reset.css";

            /*----*****---- << General >> ----*****----*/

                Body Style Comes here

                /*----*****---- << Fonts >> ----*****----*/

                Fonts Style Comes here

                /*----*****---- << Headings >> ----*****----*/

                Headings Style Comes here (H1 .... H6 Styles)

                /*----*****---- << Text Elements >> ----*****----*/

                Text Elements Style Comes here

                /*----*****---- << Tables >> ----*****----*/

                Tables Style Comes here

                /*----*****---- << Definition Lists >> ----*****----*/

                Definition Style Comes here

                /*----*****---- << Buttons >> ----*****----*/

                Buttons Style Comes here

                /*----*****---- << Forms >> ----*****----*/

                Forms Style Comes here

                /*----*****---- << Images >> ----*****----*/

                Images Style Comes here

                /*----*****---- << Columns >> ----*****----*/

                Columns Style Comes here (one-third, one-half ... Styles)

                /*----*****---- << Lists >> ----*****----*/

                Lists Style Comes here

                /*----*****---- << Widgets >> ----*****----*/

                Widgets Style Comes here

            /*----*****---- << Layout >> ----*****----*/

                /*----*****---- << Container >> ----*****----*/

                Container Style Comes here

                /*----*****---- << Header >> ----*****----*/

                Header Style Comes here

    	/*----*****---- << Responsive Menu >> ----*****----*/

                Responsive Menu Style Comes here

    	/*----*****---- << Main >> ----*****----*/

            Main Style Comes here

                /*----*****---- << Home >> ----*****----*/

                Home Style Comes here

                /*----*****---- << Services >> ----*****----*/

                Services Style Comes here

                /*----*****---- << About >> ----*****----*/

                About Style Comes here

                /*----*****---- << Team >> ----*****----*/

                Team Style Comes here

                /*----*****---- << Blog >> ----*****----*/

                Blog Style Comes here

                /*----*****---- << Blog Single >> ----*****----*/

                Blog Single Style Comes here

                /*----*****---- << Blog Comment Entries >> ----*****----*/

                Blog Comment Entries Style Comes here

                /*----*****---- << Portfolio >> ----*****----*/

                Portfolio Style Comes here

                /*----*****---- << Portfolio Single >> ----*****----*/

                Portfolio Single Style Comes here

                /*----*****---- << Contact >> ----*****----*/

                Contact Style Comes here

                /*----*****---- << Features >> ----*****----*/

                /* Accordion */
                Highlight Style Comes here

                /* Tooltip */
                Dropcap Style Comes here

                /* Tabs */
                Horizontal Tabs Style Comes here

                /* Pricing Tables */
                Standard Toggle Style Comes here

            /*----*****---- << Footer >> ----*****----*/

            Footer Style Comes here

If you would 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 following Javascript files.

1. jQuery framework `(jquery.js)`
2. Modernizr `(modernizr-2.6.2.min.js)`
3. Isotope plugin `(isotope.js)`
4. CarouFredSel plugin `(jquery.carouFredSel-6.2.0-packed.js)`
5. Easing `(jquery.easing.1.2.js)`
6. PrettyPhoto `(jquery.prettyPhoto.js)`
7. Tabs `(jquery.tabs.min.js)`
8. Tweets `(jquery.tweet.js)`
9. bx Slider plugin `(jquery.bxslider.min.js)`
10. Google Map plugin `(jquery.gmap.min.js)`
11. For Navigation
    1. Mouse Wheel `(jquery.mousewheel.js)`
    2. Mobile Menu `(jquery.mobilemenu.js)`
    3. Visual Nav Plugin `jquery.visualNav.js`
12. Media Element
    1. Video `(video.js)`
    2. Audio `(audio.min.js)`
13. And custom js like `(core-custom.js)`

### Color Schemes

Our template supports following 5 color variations. Please add this CSS above the style.css

        	Blue			=	<link href="skins/blue.css" rel="stylesheet" media="all" />
            Turquoise		=	<link href="skins/turquoise.css" rel="stylesheet" media="all" />
            Green			=	<link href="skins/green.css" rel="stylesheet" media="all" />
            Mustard			=	<link href="skins/mustard.css" rel="stylesheet" media="all" />
            Violet			=	<link href="skins/violet.css" rel="stylesheet" media="all" />

Note - It's easy to change the color of any element such as background,font,link and etc..,

### Portfolio & Blog Setup

#### Portfolio setup

skeleton for adding single item

            /* === Note === */
            /* filter-class = (if your portfolio page wants the filter option use it. eg: indoor-sort( anything ))  */

                     Portfolio Title

skeleton for sortable portfolio page

                 All
                 Indoor
                 Outdoors
                 Shootings
                 Camera
                .	.	.
                .	.	.

                /* === Note === */
                /* filter-class = (if your portfolio page wants the filter option use it. eg: wordpress-sort( anything ))  */

                /* === Note === */
                /* filter-class = (if your portfolio page wants the filter option use it. eg: wordpress-sort( anything ))  */

                .	.	.	.	.
                .	.	.	.	.
                .	.	.	.	.

#### Blog Setup

skeleton for adding single blog item

#####

                           12

                             20
                             Dec
     2012

                          Blog Title

                           Author
                            Tags Here,   Tags Here

                         Content
                         Read full story »

skeleton to show Blog items in carousel

                            .	.	.	.	.	.	.

                            .	.	.	.	.	.	.

                    .	.	.	.	.	.	.

### Using Styled Elements

#### Styled Buttons

#### Tabs

                     Tab1 Title
                     Tab2 Title
                     Tab3 Title

                   .	.	.	.	.	.	.

                    .	.	.	.	.	.	.

                    .	.	.	.	.	.	.

#### Accordion

#####

#####

#####

                     Accordion Title 1

                        .	.	.	.	.	.

                     Accordion Title 2

                        .	.	.	.	.	.

                     Accordion Title 3

                        .	.	.	.	.	.

#### Tooltip

#### Pricing Table

You can show your Pricing Table in "two, three, four, five and six columns" manner.

        	/* === Columns ===*/
            /* 1. Two Column  	 = one-half 	*/
            /* 2. Three Columns  = one-third	*/
            /* 3. Four Columns	 = one-fourth	*/
            /* 4. Five Columns	 = one-fifth	*/
            /* 5. Six Columns	 = one-sixth	*/

Skeleten for adding Pricing Table

#####

######

- #####

#####

######

- #####

#####

######

- #####

            /* === Note === */
            /* 1. column-class	= one-half, one-third, one-fourth, one-fifth, one-sixth  */
            /* 2. color-class	= We have listed available colors in the above image you can use one of those classes */
            /* 3. no-space	    = Use no-space class if you do not need spacing between the columns */

                                 Title
                                 Sub Title

                              Content Title
                             .	.	.	.	.
                             .	.	.	.	.
                             .	.	.	.	.
                             .	.	.	.	.

                             Buy Now

                                 Title
                                 Sub Title

                              Content Title
                             .	.	.	.	.
                             .	.	.	.	.
                             .	.	.	.	.
                             .	.	.	.	.

                             Buy Now

                .	.	.	.	.

                                 Title
                                 Sub Title

                              Content Title
                             .	.	.	.	.
                             .	.	.	.	.
                             .	.	.	.	.
                             .	.	.	.	.

                             Buy Now

### Media Elements

Skeleten to add Video

Skeleten to add Audio

### Contact Form

We have used form in contact page.

Here is the basic skeleton of the form:

                     Your Name  (required)

                     E-mail  (required)

                     Message  (required)

Note: How to change the to email address( to address only receives email)

Please open the "php/sendmail.php"

        	$address = 'test@test.com'; #Replace this email id with your own

### Google Map Setup

1. Please find the file "core-custom.js" which is located in js/core-custom.js.
2. Find the script (Line No 85) for google map.
3. Please Change your address here to show your map in contact page.

Kindly refer below screenshot.

### Fonts

We have used Google Fonts in our template. You can use any google font by doing the following changes :

1. Please replace the following lines in all layout files.

            <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
            <link href='http://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>

2. Find the following lines in style.css and replace with your new font family.

            #main-nav ul li a, .mobile-menu { font-family:'Oswald', sans-serif; }
            body, h1, h2, h3, h4, h5, h6, input[type=text], input[type=password], input.text, textarea, input[type=submit] { font-family:'Lato', sans-serif; }

### PSD Files

I've included three psds with this theme:

1. The Main Layout
2. The Features Page
3. The Blog Page

### Sources and Credits

I've used the following images, icons or other files as listed.

- 60 Social Media Icons
- Icon Sweets 2
- Images from Shuttershock.com

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

DesignThemes