Softone - Help document

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.

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. Thanks so much!

Theme Name | : | Softone
Created By | : | Tansh
Theme Support | : | http://themeforest.net/user/tansh
Latest Version | : | 1.3
Created | : | 24 - JAN - 2012

# Find help for the topics listed below....

Click to go directly for the particular point.

### Elements related help

- Contact form
- Subscribe form
- Nivo slider
- Anything slider
- prettyPhoto
- Jcarousel
- Cycle plugin - Testimonial
- Accordion & Tabs
- Cufon
- Twitter

### Misc

- Customization tips
- Credits and sources

# Contact form - top

- Needs...
  - jquery.validate.js
  - jquery.form.js
  - function
  These are attached in html head section of page with contact form.
- You need to do / give following two things, to make contact form work....
  - Your email id in submit-form.php file

  -      $to='yourname@mail.com';

  - Give path / url of php file "submit-form.php" in html as form action.
    Here path / url is ---- http://yoursitename.com/php/submit-form.php.

  -      Name

- Upload all files. Form will work fine.

## Other more info about contact form

### How to change mail body?

It can be changed in 'submit-form.php' file.

     $body='You have got a message...like this your desired text here'."\n\n";

### How to give fixed / particular subject name to receiving mail?

If you want fix subject name for received mail, in case where u are not including subject field in contact form, it can be changed in 'submit-form.php' file.

     $subject = 'Fixed / particular subject name can be written here';

If subject field is included, then it will be like this.

     $subject = $subject;

### How to change success message (message displayed after send process complete)?

Message which displays as result on send process complete, can be changed in php file, at place shown below.

     if(mail($to, $subject, $body, $headers)) {
     die('Your desired result text here');
     } else {
      die('Error: Mail failed');
     }

### Why I'm getting error ..."There was an error sending your email. Please try again"

Form do not work offline, you need to upload all necessary files first.

### How to add extra fields in contact form?

- Add field html.
- Add php for it, as it is added for other fields.
- Choose suitable validation class for input field. Those are give in 'jquery.validate.js' approx. line no. 260 - 280.

# Take me to index

# Subscribe form - top

- Needs...
  - jquery.validate.js
  - jquery.form.js
  - function
  These are attached in html head section of pages including subscribe form.
- You need to do / give following two things, to make subscribe form work....
  - Your email id in subscribe-form.php file

  -      $to='yourname@mail.com';

  - Give path / url of php file "subscribe-form.php" in html as form action.
    Here path / url is ---- http://yoursitename.com/php/subscribe-form.php.

  -      Name

- Upload all files. Form will work fine.

## Other more info about subscribe form

### How to change mail body of subscribe form?

It can be changed in 'subscribe-form.php' file.

     $body='You have got a request for subscription...like this your message here'."\n\n";

### Where to change subject of mail?

It can be changed in 'subscribe-form.php' file.

     $subject = 'Fixed / particular subject name can be written here';

### How to change success message (message displayed after send process complete)?

Message which displays as result on send process complete, can be changed in php file, at place shown below.

     if(mail($to, $subject, $body, $headers)) {
     die('Your desired result text here');
     } else {
     die('Error: Mail failed');
     }

### Why I'm getting error ..."There was an error sending your email. Please try again"

Form do not work offline, you need to upload all necessary files first.

### How to add extra fields in subscribe form?

- Add field html.
- Add php for it, as it is added for other fields.
- Choose suitable validation class for input field. Those are give in 'jquery.validate.js' approx. line no. 260 - 280.

# Take me to index

# Nivo slider - top

- Needs...
  - nivo-slider.css
  - jquery.nivoslider.js
  - function
  These are attached in html head section of page with nivo slider.
- Images are listed in div id "slider" with class "nivoslider", these both are specified in function of nivo slider.
- id of respective caption is given as title. Caption text is written in those divs.

- You can change effects, animation speed etc. in function of nivo slider.

# Take me to index

# Anything slider - top

- Needs...
  - anythingslider.css
  - jquery.anythingslider.js
  - function
  These are attached in html head section of page with anything slider.
- Slides are included as follows

       First slide
       Second slide
       Third slide
        ...and so on..

- You can change animation speed etc. in function of anything slider.

## How to adjust pagination when I add or remove slide?

- You will need to change width of #thumbNav according to number of slides (20px / slide) to bring pagination to center.
- You can find css for #thumbnav in 'anythingslider.css', right at the top.
- If 3 slides width should be 60px, if 5 it should be 100px.

     #thumbNav {
    	width: 80px; /*80px as there are four slides in demo template*/
    	top: 373px;
    	position: relative;
    	margin: 0 auto;
    	z-index: 99;
     }

# Take me to index

# prettyPhoto - top

- Needs...
  - prettyPhoto.css
  - jquery.prettyPhoto.js
  - function
  These are attached in html head section of page including prettyPhoto.
- You can choose theme of your choice, change animation speed etc. in function of prettyPhoto.

# Jcarousel - top

- Needs...
  - jcarousel.css
  - jquery.jcarousel.min.js
  - function
  These are attached in html head section of page including jcarousel.
- Images are listed in li as shown below.

       Image
       Image

- In this template jcarousel is used in combination with prettyPhoto.

# Cycle plugin for testimonial - top

- Needs...
  - jquery.cycle.all.js
  - function in custom.js
  These are attached in html head section of all pages included with template.
- Transition type, speed etc. can be adjusted in fuction of cycle plugin for testimonial.

## How to add more testimonials?

Testimonial are enlisted as, each in separate 'div'...inside div class entitled as 'testimonial_style1'.

     First testimonial
     Second testimonial
     Third testimonial
     ...and so on..

# Accordion & tabs - top

- Needs...
  - jquery-ui-1.8.17.custom.css
  - jquery-ui-1.8.17.custom.min.js
  - function in custom.js
  These are attached in html head section of all pages included with template.
- Just copy html code for tans and accordion given with default template and paste where ever you need those.

## How to set desired content div open in accordion?

You can set it in custom.js, in function for accordion.

     $(".accordion_wrapper").accordion({ header: "h3", autoHeight: false, collapsible: true, active: 1});

Here second content div kept open, so 'active: 1'.

To keep first div open 'active: 0', for third 'active: 2', and so on.

# Cufon - top

- Needs...
  - cufon-yui.js
  - Arimo_400.font.js
  - classes assigned in custom.js

         Cufon.replace('h1, h2, h3, h4, h5, h6, #pricing table h2');

  Jqueries are attached in html of all pages included with template.
- Incase you don't need cufon, remove above mentioned jqueries and code for cufon in cutom.js.
- Assign new font to headings etc. in CSS and adjust font sizes according to your font.

# Twitter - top

- Twitter id, tweet count, username and link to it can be changed in "twitter.js" right at the bottom (approx. line no. 11 ~ 15).

     getTwitters('twitter', {
            id: 'envato',
            count: 2,
            enableLinks: true,
            template: '@softone ~ %text%
    ',
            newwindow: true
    });

# Customization tips - top

- ## How to remove nivo slider and attach anything slider in its place and vice versa?

  - You will need to copy jquery library, css and function for slider you want, and paste it in head section of page.
  - Remove jquery library, css and function of previous slider from head section.
  - Add html of slides.

- ## While removing any jquery library attached...

  If you are removing any jquery library attached, remember to remove its function form custom.js (if any), otherwise it will affect page display in many browsers esp. IE. If you need to attach some jquery element to particular page only, it is best practice to add its jquery, css, function etc. in head section of that page (as it is done for sliders, forms in this template).

- ## Refer to some useful classes...

  Classes like first, last are used whenever necessary, to maintain padding / margin in the page, like
  .......... first - makes margin left '0'
  .......... last - makes margin right '0'.
  .......... top_padding - adds padding of 15px at top

  Other such classes are written in '1.4 Basic columns and div styles' section of css.

  Going through this will be helpful while page customization.

- ## Some notes while using grid system

  - Some times we need to use grid inside grid. Use classes 'first' and 'last' in such cases.
    Example: Features on home pages
  - Also useful when we need to use tabs / accordion / table of specific grid inside other grid. Inner grid has 10px left margin, which can be adjusted by giving class 'first'.
  - General grid layout to explain above

# Take me to index

# Credits and sources - top

- Jqueries used
  - prettyPhoto - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
  - Nivo slider - http://nivo.dev7studios.com/
  - Jquery validation - http://bassistance.de/jquery-plugins/jquery-plugin-validation/
  - Anything slider - http://proloser.github.com/AnythingSlider/
  - Jcarousel - http://sorgalla.com/jcarousel/
  - Cycle plugin - jquery.malsup.com/cycle/
- Font used
  - Lucida Grande
  - Georgia
  - Arimo - http://www.fontsquirrel.com/fonts/arimo
- Images for demo purpose
  - http://creattica.com/mobile/bzzy-app/57623
  - http://creattica.com/mobile/rental-engine/62182
  - http://creattica.com/mobile/oz-for-ipad/57521
  - http://creattica.com/mobile/kidoodle-apps-pirate-scribblebeard-s-treasure/67613
  - http://creattica.com/mobile/where-to-for-iphone/59140
- Icons used
  - http://www.iconfinder.com/icondetails/22643/16/
  - http://www.iconfinder.com/icondetails/11460/32/arrow_right_icon
  - http://www.graphicrating.com/2009/06/19/quartz-icon-pack/
  - http://www.iconfinder.com/search/?q=iconset%3Aoxygen
  - Vector Social Media Icons by IconDock.com & Double-J Design (http://www.doublejdesign.co.uk)
  - Card icons by http://www.zeusboxstudio.com/blog/

# Take me to index