### StonedThemes

hybrid - business & portfolio theme

theme documentation v 1.0

change logs

theme subjects

- Theme Info
- Features
- >>Install Theme
- Options
- Main
- Branding
- Head
- Footer
- Home 1
- Home 2
- Home 3
- About Template
- Contact Template
- Blog posts & blog Template
- Work posts & Work Templates
- Testimonials posts & Templates
- Service posts & Templates
- Short codes
- Widgets (Sidebars)

### Theme Info

# HYBRID

### business & portfolio theme

Created: 07/12/2013

latest Update: 07/12/2013

By: StonedThemes

Email: stonedthemes@gmail.com

#### Hybdid is a business & portfolio wordpress theme.

Build on a clean design, and in a good thought funcionality Hybrid can be your best choice for a horizontal blog, portfolio, gallery, presenting your work or photographies. Hybrid is a simple to use and it's branding features gives you a great and powerful options to customize colors and fonts so you can simply make your own style. Also three different types of home page templates and 8 theme skins gives you opportunity to be more unique.

### Features

- Responsive Design
- Retina Ready
- Fully Customable Style
- MasonryJS
- IsotopeJS Sorting
- 4 Home Pages
- 2 Service Page
- 2 Portfolio Pages
- 1 Blog Page
- 1 Contact Page
- 1 About Page
- 1 Testimonial Page
- 3 Custom Posts (Galleries, Testimonials & Services)
- Font awesome with up to 316 icons
- Translation Ready
- Shortcodes (up to 14)
- 500+ Google Fonts
- Ajax
- Social Share Buttons
- Comments per Post
- Social Network Links
- 8 theme skins
- Background Image Styles
- Google Map
- Widget Ready
- 3 Widget Area (2 home sidebars & a right sidebar)
- 11 custom Widgets (about/simple html,advertising,3 blogpost widgets,flickr,instagram,twitter,facebook,testimonials,contact us)

### Install Theme

Just upload hybrid.zip via theme uploaded on your wp-admin and you're ready to go. If you get any error after you installed the theme than this could happen :

1.Because you uploaded the theme as a Folder and you where using FTP Text Mode, use Binary Mode instead

2.Or delete the Theme folder and install .zip file which is in this package

### Options

Main Options

- Custom CSS
- Custom JS
- Headings and paragraphs fonts
- Disable Blog Social Shares
- Disable Work Social Shares
- Social Shares

Branding Options

- Background Image
- Background Color
- Theme Skins (Default, Black,Blue, Black & White, Green, Nemo, Orange, Yellow)
- Advertising
- Contact Us

Header Options

- Site Favicon
- Logo
- Text Logo
- Text Logo Color
- Text Logo Font
- Text Font Size

Footer Options

- Copy Right Text
- Social Networks

### Main

Main Options

- Custom CSS
  Write your custom CSS without touching the existing code
- Custom JS
  Write your custom JS without touching the existing code
- Headings and paragraphs fonts
Choose a google font for headings and another google font for paragraphs(if none than questrial is default)
- Disable Blog Social Shares
  Check it if you don't want to give right to visitors to share your blog posts
- Disable Work Social Shares
  Check it if you don't want to give right to visitors to share your work posts
- Social Shares
  Choose which share buttons to appear, these share buttons will apear in blog and work posts

### Branding

Branding Options

- Background Image
  Add a background image to your website!
- Background Color
  Choose your background color.
- Theme Skins (Default, Black, Blue, Black & White, Green, Nemo, Orange, Yellow)
  Choose one of the skins for your web
- Advertising
  Add advertising which will apear on Adv custom widget (use a unique name with that name you link the adv widget)
- Contact Us
  Add contact info which will apear on Contact Us custom widget

### Head

Header Options

- Site Favicon
  Choose a favicon for your website!
- Logo
  Add your logo here
- Text Logo
  Add Text as logo. Note: this text only shows if you do not insert a logo image!
- Text Logo Color
  Choose a color to the text logo
- Text Logo Font
  Choose the text logo font (Google fonts)
- Text Font Size
  Choose the size of the text logo

### Footer

Footer Options

- Copy Right Text
  Add The copy right text (wysiwyg)
- Social Networks
  Add Social Networks

### Home 1

Latest Works

- Latest Work Title
- Items on slider (select how many items to display on slider)

Header

- Disable Header
if checked disable this header
- Header Title
  Add a header title which will be displayed below the menu
- Header Desc
  Add a header description which will be displayed on header
- Header Link
  Add a header link
- Header Backgroud Color
  Choose header background color
- Text Color
  Choose text color
- Font
  Add a font for header
- Icon
  Choose a font awsome icon

### Home 2

Page Options

- Page Title
  Add a title for home 2 page Note: if this field is empty the Menu Title will be displayed!
- Article Title
  Add a title for articles
- Disable Homebar
  Check it if you don't want to show a sidebar on this page

Accordions

- Accordions Title
  Add a title for accordions
- Accordions
  Add a title and a description for accordions

As in home 1 template you can add a big header on home 2 too.

Header

- Disable Header
if checked disable this header
- Header Title
  Add a header title which will be displayed below the menu
- Header Desc
  Add a header description which will be displayed on header
- Header Link
  Add a header link
- Header Backgroud Color
  Choose header background color
- Text Color
  Choose text color
- Font
  Add a font for header
- Icon
  Choose a font awsome icon

Prefered image size for works on slider is 285 x 341 (these are featured workposts images)

### Home 3

To setup the Home 3 Page just create a Page and select the template as Home 3

Slider options

- Image
  Add an image to display on slide
- Big title
  Add a big title to display on image
- Small title
  Add a small title to display on image
- Description
  Add a description to display on image
- Disable text
  If you don't want to display text on image just check this field
- Link
  You can link this image with any page
- Animation
  Choose one animation for the text (there are more than 20 of them)

### About Template

About Options

- In tab one About Title as you see in the picture you add the page title
  Note: if this field is empty the Menu Title will be displayed!
- In tab two Gallery
  Add gallery title (Add text which will be displayed above the gallery)
  and on gallery items add images to display on gallery.

  Prefered gallery image size is 570 x 320

- In tab three Team you can add team title

  In the Team section you will need to add team member images, full name, position and Social networks.

  Add as many team members as you want.

  Prefered team member image size is 270 x 150

### Contact Template

Contact Options

The contact options have two tabs : Contact Info and Map info

Contact Info

- Contact Title
  Add the page title. Note: if this field is empty the Menu Title will be displayed
- Address Title
  Add text to display as address title
- Address Description
  Add address info (you can add more than one address).
- E-mail Title
  Add e-mail title
- E-mails
  Add emails info (you can add more than one email).
- Telephones Title
  Add the telephones title
- Telephones numbers
  Add phone numbers (you can add more than one phone number).
- Schedule Title
  Add the schedule title
- Schedule Description
  Add schedule description

Map Info

- Disable Map
  If you don't want to use a map and show your location, simply disable it!
- Map Title
  Add the title for the Map
- Map Grayscale
  Display map on grayscale if checked
- Map Zoom
  Add the level how deep the map should go. Note: anything under 0 will be 0.
- Google Map
  Search for your location and pick the exact area you want!

### Blog posts & blog Template

Blog Posts Options

You will need to add the featured image. This featured image will present that blog post and also will be shown inside the blog page (single.php)

Tab 1 - Post Type

With blog posts we gave you the options to choose between three different post type

- None - which means a default wordpress post
- Video - a video post with three different options: youtube,vimeo and self hosted
  - Youtube and Vimeo just need to add the video id.
  - Selfhosted video you add the video file.
- Slider - a slider image, add as many images as you want

Tab 2 -Post Options

If you have a live demo for the post add the url as in the below picture

### Blog template

Blog Options

- Page Title
  Add the page title. Note: if this field is empty the Menu Title will be displayed!
- Posts on page
  Display Posts on page load and on load more click. Note: negative numbers will display 3 blog posts.

### Work posts & Work Templates

To setup a work post, you have to click on the work pots in the option panel and then add a new work.

You need to add a featured image to present your work.

Work Posts Options

Tab 1 - Post Type

Choose one of three work post options:

- None - which means a default post with a featured image
- Video - a video post with three different options: youtube,vimeo and self hosted
  - Youtube and Vimeo just need to add the video id.
  - Selfhosted video you add the video file.
- Slider - a slider of images, add as many images as you want

Tab 2 -Post Options

If you have a live demo for the post add the url as in the below picture

### Work1 & Work2 template

Work Options

- Page Title
  Add the page title. Note: if this field is empty the Menu Title will be displayed!
- Posts on page
  Display Posts on page load and on load more click. Note: negative numbers will display 3 blog posts.

Work template 1 has 4 column design

Work template 2 has 2 column design

### Testimonials posts & Templates

Testimonials Posts Options

- Write the name of the testmonials author on the post title.
- Link - Add a link for testmonial.
- Position - Position of the testimonial author.

### Testimonial Templates

There are two ways to show these post on your website:

- First by creating a page and assinging the testimonial template to that page,
  where you can specify how many posts per page you want
- and second by adding a widget to your homebars or sidebars

### Service posts & Templates

To create a Service is easy, is just the same like creating a post. Just go to the admin panel and click Services.

Service Posts Options

- Font awesome
  Choose the service icon. We support Font awesome so you can choose between 316 icon for you service.
- Font awesome color
  Choose a color for the font awesome you choosed like in image
- Otherwise set a custom image for the service

### Service Templates

To show your services posts creat a page and assinging the service template to that page

On page options set the column type you can choose between 2 and 4 columns layout

### Short codes

On every page you can use shortcodes! On WYSIWYG (What You See Is What You Get) area you can an simply pres shortcode buttons on the toolbox and write the content of it.

Heading tags are simply to use, just click on the Heading tag you want and write your text inside [Hn]tags[/Hn]! (n-represents hedings number, like H1 is bigger and H6 is smaller one).

Alerts Choose one from toolbox (Alert info,Alert error,Alert success and Alert Warning) and on the title atribute add add alert Title and between opened and closed brackets write the message.

Videos can be added in the same way for youtube and vimeo.

Here is the sample:

the ID is the last part on the link, like this:

[youtube width="300" height="300" id="8ptfyhBjXj8" ][/youtube]

vimeo example:

Accordions have a construction like this.

[accordion]
[accordion_item title="Title1"]For at least 40,000.[/accordion_item]
[accordion_item title="Title2"]A highly developed[/accordion_item]
[/accordion]

Just replace the “Title1” with your title and the text with your content.
To add more accordions just copy one of the existing and change the title and conent. Careful with the starting & ending tags [accordion][/accordion]

Tabs has a similar structure with tags too:

[tabgroup]
[tab title="Tab1"]The earliest.[/tab]
[tab title="Tab2"]A highly.[/tab]
[/tabgroup]

Just replace the “Tab1” with your title and “the earliest” with your content and you're done. To add more tabs, just copy one of the lines ex. [tab title="Tab1"]The earliest.[/tab] and edit the data in it.

Font Awesome is a shortcode to add icons with up to 316 icons.

It's easy to add an icon anywhere you want, just like this:

[fontAwesome name="icon-name" size="icon-size"] [/fontAwesome]

You can use 3 different sizes, like: `icon-large,` `icon-2x,` `icon-3x,` `icon-4x, or leave it blank for normal size.`

here they are a list of icons you can use:

icon-glass
icon-music
icon-search
icon-envelope-alt
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file-alt
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-bar-chart
icon-twitter-sign
icon-facebook-sign
icon-camera-retro
icon-key
icon-cogs
icon-comments
icon-thumbs-up-alt
icon-thumbs-down-alt
icon-star-half
icon-heart-empty
icon-signout
icon-linkedin-sign
icon-pushpin
icon-external-link
icon-signin
icon-trophy
icon-github-sign
icon-upload-alt
icon-lemon
icon-phone
icon-check-empty
icon-bookmark-empty
icon-phone-sign
icon-twitter
icon-facebook
icon-github
icon-unlock
icon-credit-card
icon-rss
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen
icon-group
icon-link
icon-cloud
icon-beaker
icon-cut
icon-copy
icon-paper-clip
icon-save
icon-sign-blank
icon-reorder
icon-list-ul
icon-list-ol
icon-strikethrough
icon-underline
icon-table
icon-magic
icon-truck
icon-pinterest
icon-pinterest-sign
icon-google-plus-sign
icon-google-plus
icon-money
icon-caret-down
icon-caret-up
icon-caret-left
icon-caret-right
icon-columns
icon-sort
icon-sort-down
icon-sort-up
icon-envelope
icon-linkedin
icon-undo
icon-legal
icon-dashboard
icon-comment-alt
icon-comments-alt
icon-bolt
icon-sitemap
icon-umbrella
icon-paste
icon-lightbulb
icon-exchange
icon-cloud-download
icon-cloud-upload
icon-user-md
icon-stethoscope
icon-suitcase
icon-bell-alt
icon-coffee
icon-food
icon-file-text-alt
icon-building
icon-hospital
icon-ambulance
icon-medkit
icon-fighter-jet
icon-beer
icon-h-sign
icon-plus-sign-alt
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-desktop
icon-laptop
icon-tablet
icon-mobile-phone
icon-circle-blank
icon-quote-left
icon-quote-right
icon-spinner
icon-circle
icon-reply
icon-github-alt
icon-folder-close-alt
icon-folder-open-alt
icon-expand-alt
icon-collapse-alt
icon-smile
icon-frown
icon-meh
icon-gamepad
icon-keyboard
icon-flag-alt
icon-flag-checkered
icon-terminal
icon-code
icon-reply-all
icon-mail-reply-all
icon-star-half-empty
icon-location-arrow
icon-crop
icon-code-fork
icon-unlink
icon-question
icon-info
icon-exclamation
icon-superscript
icon-subscript
icon-eraser
icon-puzzle-piece
icon-microphone
icon-microphone-off
icon-shield
icon-calendar-empty
icon-fire-extinguisher
icon-rocket
icon-maxcdn
icon-chevron-sign-left
icon-chevron-sign-right
icon-chevron-sign-up
icon-chevron-sign-down
icon-html5
icon-css3
icon-anchor
icon-unlock-alt
icon-bullseye
icon-ellipsis-horizontal
icon-ellipsis-vertical
icon-rss-sign
icon-play-sign
icon-ticket
icon-minus-sign-alt
icon-check-minus
icon-level-up
icon-level-down
icon-check-sign
icon-edit-sign
icon-external-link-sign
icon-share-sign
icon-compass
icon-collapse
icon-collapse-top
icon-expand
icon-eur
icon-gbp
icon-usd
icon-inr
icon-jpy
icon-cny
icon-krw
icon-btc
icon-file
icon-file-text
icon-sort-by-alphabet
icon-sort-by-alphabet-alt
icon-sort-by-attributes
icon-sort-by-attributes-alt
icon-sort-by-order
icon-sort-by-order-alt
icon-thumbs-up
icon-thumbs-down
icon-youtube-sign
icon-youtube
icon-xing
icon-xing-sign
icon-youtube-play
icon-dropbox
icon-stackexchange
icon-instagram
icon-flickr
icon-adn
icon-bitbucket
icon-bitbucket-sign
icon-tumblr
icon-tumblr-sign
icon-long-arrow-down
icon-long-arrow-up
icon-long-arrow-left
icon-long-arrow-right
icon-apple
icon-windows
icon-android
icon-linux
icon-dribble
icon-skype
icon-foursquare
icon-trello
icon-female
icon-male
icon-gittip
icon-sun
icon-moon
icon-archive
icon-bug
icon-vk
icon-weibo
icon-renren

### Widgets (Sidebars)

Sidebars

You have three options for widgets:

To display them on a main sidebar, on home1 template footer sidebar and hom2 template footer sidebar.

Main Sidebar will be displayed in the right side.

Main sidebar will be displayed on: blog page, single page, default pages, search and archive.

Home1 Footer Sidebar will be displayed on home1 page template.

To set them up just go to Appearance > Widget and drag and drop the widgets by your wish.

Home2 Footer Sidebar will be displayed on home2 page template.

Same as for Home1 sidebar to set them up just go to Appearance > Widget and drag and drop the widgets by your wish.

Widgets

We offer 11 custom Widgets

- About
- Advertising
- Blogpost image slider
- Blogpost no image slider
- Blogpost sidebar
- Flickr
- Instagram
- Twitter
- Facebook
- Testimonials
- Contact us

About

Is a custom widget you need to add a Widget title, Title, Category and text description

Advertising

As descriped earlier you add advertises on Branding options page, here you just conectid with unique name and add the widget title.

Blogpost image slider (designed only for Home1 and Home2 footer sidebars)

Is a widget wich shows blogposts in a slider with featured images and descriptions. Drag and drop and simply add widget title.

Blogpost no image

Is a widget wich shows blogposts in a slider with post descriptions. Drag and drop and simply add widget title.

Blogpost sidebar

Is a widget wich shows blogposts title categories and a link to redirect to post. Drag and drop and simply add widget title.

Flickr

Just drag and drop the Flickr widget, add a widget title flickr user id and API KEY.

Instagram

Just drag and drop the Instagram widget, add a widget title insagram user id and Access Token.

Twitter

Just drag and drop the Twitter widget and add the follow link without an @ ... ex: for @9GAG just add 9GAG

Facebook

Just drag and drop the Facebook widget than add Title, App Id, Page name (http://www.facebook.com/[page_name]) and Width
you also have three checkboxes : Show Faces , Show Stream, and Show Header.

Testimonials

This widget displays testimonials custom posts, add widget title.

Contact us

As described earlier you add contact info on Branding options page, than drag and drop the Contact Us widget and fill the widget title

Here we will display updates info!