# YA Framework Documentation

Another Framework for Wordpress created by The Youtech Company

Simple, flexible and responsive theme framework for developer, blogger.

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!

Author: | Author Name
Contact: | contact@ytcvn.com

Author URL: | http://www.smartaddons.com/
Item URL: | http://smartaddons.com/demo/templates/wordpress/framework

Current Version: | 1.0.0
Documentation Version | 1.0.0

Created: | 2013-07-24
Modified: | 2013-07-24

# Markup Markup customization and highlights

× Warning! Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur..

This theme is a fixed layout with two columns. All of the information within the main content area is nested within a div with an id of "primaryContent". The sidebar's (column #2) content is within a div with an id of "secondaryContent".

### General Markup

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <meta name="author" content="Ivor Padilla">
    <!-- Date: 2012-03-08 -->
    </head>
    <body>

    </body>
    </html>

### How To Edit Color

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

    #primaryContent a {
      color: #someColor;
    }

### Change Structure

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

    #wrap #primaryContent a {
      color: #someColor;
    }

# Styles Styles customization and highlights

Heads up! I'm using two CSS files in this theme. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. 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.

### Stylesheets

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name | Description
--- | ---
`app-default.css` | Framework default stylesheet
`app-black.css` | Black color stylesheet
`app-green.css` | Green color stylesheet
`app-responsive.css` | Reponsive works

### CSS Structure

The second file contains all of the specific stylings for the page. The file is separated into sections using:

    /* === Header Section === */

    some code

    /* === Main Section === */

    some code

    /* === Sidebar Section === */

    some code

    /* === Footer === */

    some code

    etc, etc.

# JavaScript JavaScript customization and highlights

### JavaScript Files

These are the various attribution links to the Javascript files included or modified to work with in this theme.

Tag | Description
--- | ---
`bootstrap.js` | http://twitter.github.io/bootstrap/javascript.html
`bootstrap.min.js` | http://twitter.github.io/bootstrap/javascript.html
`bootstrap-image-gallery.min.js` | http://twitter.github.io/bootstrap/javascript.html
`jquery.cslider.js` | Cslider powers the responsive slider on the homepage
`load-image.min.js` | jQuery is a Javascript library that greatly reduces the amount of code that you must write.
`main.js` | The theme's main JavaScript file, heavily commented
`modernizr-2.6.2.min.js` | Modernizr provides feature detection, HTML5 support for old browsers
`photobox.js` | Photobox powers the gallery lightbox
`plugins.js` |
`ya_googlemap.js` |
`ya_shortcodes_tinymce.js` |

### Customize Slider

If you want to change the slider's speed transition, open up the file `scripts.js` and change the following code:

    /* ---------- @ SlidesJS -----------*/
    $('#banner').slides({
      preload: true,
      generateNextPrev: true,
      autoHeight: true,
      effect: "slide",
      play: 5000
    });

# Layout Builder Here positions in this framework where you can control how your website display

With 6 available layouts and 7 expands for slidebar, your site will be configured easier without wasting time.

# Installation How to Install the Template

### 1. Install Theme

Here's a brief information about how to install your WordPress theme from scratch

1.1) Install WordPress

- Sign up for web hosting if you do not already have hosting (recommended hosts).
- Make a new installation of the latest version of WordPress on your hosting
account. If you're new to all this, see Installing WordPress and New to WordPress. Some hosts have an auto-install feature.
- If you will be replacing a WordPress site, make a complete backup first.

1.2) Upload and Activate Theme

- Log into your WordPress dashboard and navigate to Appearance > Themes > Install Themes > Upload.
- Choose the zip file you downloaded then click install. If you receive an error saying the file is too big.
- After installation, click Activate.

1.3) Installing simple content
To install the Sample Content

- Go Dashboard > Tools > Import > WordPress
- Install the plugin.
- Use it to upload the sample content XML file .

# Shortcodes

Shortcodes make it simple to insert elements like buttons, boxes, columns etc. without any knowledge how to code HTML. Shortcodes work in posts and pages .

### Icon

Use Font Awesome, the iconic font designed for Bootstrap. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Get the code: `[icon name="icon-glass" type="icon-4x" tag="i" color="red" ]`

- name: Name of icon or icon class, reference at http://fontawesome.io/icons/. Accept “ICONNAME” without prefix “icon-”.
- type: icon-4x/icon-3x/icon-2x
- tag: html tag name to render icon
- color: color of icon, if not set, default text color of site style will effected.

### Button

The [button] shortcode can be used to make small and large buttons of various colors.
Get the code: `[button id="" class="btn" type="primary" target="" href="#" tag="span"]link[/button]`

- type: size and color of button; large, small, mini for sizing; primary, danger, warning, success, info, inverse for color.
- tag:html tag name to render button
- target và href: Use when tag="a"

Size

Utilize the extra button types type="large", type="small", or type="mini " for sizing.

### Alert

Alerts Styles for success, warning, and error messages

Get the code: `[alert class="alert" type="success" dismiss="true" tag="div"][/alert]`

- type: block/success/error/infomation.

- dismiss: true/false

Default alert `[alert class="alert" type="block" dismiss="true" tag="div"]Wrap any text and an optional dismiss button in .alert for a basic warning alert message.[/alert]`

Dismiss buttons `[alert class="alert" type="block" dismiss="false" tag="div"]Wrap any text and an optional dismiss button in .alert for a basic warning alert message.[/alert]`

### Google maps

You can embed a custom Google Map using the [googlemaps] shortcode.
Get the code: `[googlemaps title="Envato Office" location="Hoan Kiem District, Hanoi, Vietnam" zoom="10" Width="100%" height=350]`

### Slideshow

With the built-in, you can insert awesome image everywhere, just use the Code provided when Adding a Slideshow.

- Get the code: `[slideshow ids="" caption="" size="" interval="" event="" class=""]`
- ids: id of attachment.
- caption: true/false.
- size: thumbnail/medium/large.
- interval: The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
- event: slide/slid.
- class:

### Collapse

Get base styles and flexible support for collapsible components like accordions and navigation.

Get the code: `[collapses class="collapses" tag="div"] [collapse title="Section 1"]Accordion Content 1[/collapse] [collapse title="Section 2"]Accordion Content 2[/collapse] [collapse title="Section 3"]Accordion Content 3[/collapse] [/collapses]`
- class: as “name” above function.
- tag: html tag name to render icon.
- title: as name of each above content. [collapse]

### Tabs

Wrap multiple [tab] shortcodes with the [tabs] shortcode.
Get the code: `[tabs possition="top" class="tabs" tag="div"][tab title="Section 1"]Tab Content 1[/tab][tab title="Section 2"]Tab Content 2[/tab][tab title="Section 3"]Tab Content 3[/tab][/tabs]`
- position: top/right/bottom/left
- class: as “name” above function.
- tag: html tag name to render icon.
- title: title of tab

# Theme Options

- ### General

  Go to Apperance -> Theme options. And here the general setting that you to configure before your site ready to go

  #### Description

  1. Color Scheme: Select one of the many predefined schemes
  2. Favicon Icon: Use the Upload button to upload the new favicon and get URL of the favicon
  3. Responsive Support: Ya framework support reponsive layout, if you don't want to use this function, please uncheck.
  4. Logo Image: Use the Upload button to upload the new logo and get URL of the logo

- ### Navbar options

  If you got a big site with a lot of sub menus we recommend using a mega menu. Just select the dropbox to display a menu as mega menu or dropdown menu.

- ### Layout

  The Theme comes with a layout setting that allows you to build any number of stunning layouts and apply theme to your entries.

  #### Description

  1. Content Layout: Select layout display

     - No Sidebar
     - Left Main
     - Main Right
     - Left Right Main
     - Main Left Right
     - Left Main Right
  2. Left Sidebar Expand: Select width of left sidebar.
  3. Right Sidebar Expand: Select width of right sidebar.

- ### Typography

  We choose Google Web Fonts to bring quality typography to your website. You can select font family that we have already prepared. However, if you want to use other fonts, please follow description below.

  #### Description

  1. Use Google Webfont: Insert font style that you actually need on your webpage
  2. Webfont Weight: For weight, see Google Fonts
  3. Webfont Character Set: Choose the character sets you want
  4. Webfont Assign to: Select the place will apply the font style
     - Headers: Change font of heading(h1, h2, h3, h4, h5, h6)
     - Everywhere
     - Custom
  5. Webfont Custom Selector: This field will set area where is affected when choosing “Webfont Assign to = Custom”

- ### Social share

  Social sharing is ready to use and built in. You can share your pages with just a click and your post can go to their wall and you can gain vistitors from Social Networks. Check Social networks that you want to use.

- ### Advanced

  Change the font style of your blog.

  1. Show cPanel: Turn on/off Cpanel.
  2. Widget Advanced:
  3. Developer Mode:
  4. Google Analytics ID: Enter Google Analytics code.
  5. Custom CSS/JS: Insert your own CSS into this block. This overrides all default styles located throughout the theme

# Menus

Support 2 custom menu:

- ### Dropdown menu

- ### Mega menu

  Support to enhance the Wordpress default menu system, with a variety of useful features to edit menus and give theme a unique look.
  The advanced options allow the user to gain more control over the design of menus. The user can make several columns in menus, divide those columns and place their alignment as left and right as required by your website

  1. #### Creat menu

     YA Framework support for new Wordpress menu system, to manage your main menu items, please bellow step.
     Go to Apperance -> Menus, first you need to creat menu place for Main Navigation, for more detail please follow this image:

  2. #### Manage and ordering your menu items

     #### Description

     1. Icon:

        Using icon-* class to display Icon for any menu item with Font Awesome intergrated. Refercence Font Awesome for details

     2. Dropdown Size:

        - Only for menu items level 1
        - Validate values are span1, span2, …, span12. These are fully compatible with Bootstrap Style.
        - If ‘None’ is selected, default dropdown-menu (as Dropdown) will be display.
        - If this item has no child menu item, this config have no efftected for anything.

     3. Dropdown Align:

        - Only for menu items level 1
        - If you want dropdown (if have) align by right direction, config it to ‘Right’ instead of ‘Left’ or ‘Default’
        - ‘Default’: no class be add to dropdown, everything are nature by default css.
        - ‘Left’ / ‘Right’: add to dropdown an utility class for float it left/ right. Make it align as you want.

     4. Show Description as Subtitle

        - Mean as the name.
        - Description is core attribute of menu item. You may need check to show it in the metabox screen.

     5. Hide Title

        Sometime you need hide the title of menu, select ‘Yes’ value please. In this case, Icon or Subtitle or Advanced Content are need to show as replacer.

     6. Advanced

        - Some advanced functions are placed here.
        - ‘Default’: NOOP, do nothing. Sure, it is not advanced
        - ‘Use as Divider’: Show any icon, title, subtitle, content. Divider style only.
        - ‘Append Advanced Content’: Append content after menu title block (icon+title+subtitle)
        - ‘Append Advanced Content with Shortcode’: as above, but ‘do_shortcode’ with this before append.

     7. Advanced content

        Insert content follow Advanced.

     8. Span

        - Only for menu items level 2
        - Only effect if parent item have validate size (span1-span12).
        - Important: This should not be greater parent dropdown-size

# Widgets

To employ a widget, simply go to your Widgets editor (located in your WordPress Dashboard in the “Appearance” menu) and drag your widgets into the specified widget areas.

- ### Widget Social

  Widget Social take a simple, excendable approach to displaying links to your social media profiles in Wordpress. There's no frills and no fanciness, making it easy to style to your website's look.

  Widget options:

  1. Classname for Icon or Title:
  2. Link: Insert the social link

- ### Widget Advanced

  Widget options:

  1. You can choose the available styles for each widget for no wasting your time
  2. Specially, you can set show/hide widget follow Menu Item

- ### Widget Categories

  Allows the user to insert a index of posts and categories on page/post. It can produce a list categories include category name, the post title and parts of the post excerpt.

  Widget options:

  1. Title
  2. Template: default, taste
  3. Categories name: select categories to show, allows select multi categories
  4. Order by: Name, author, date, title, modified, parent, id, rand, comment count
  5. Order: ASC, DES
  6. Number of categories
  7. Exclude categories by ID
  8. Counts posts
  9. Number display
  10. Number of categories
  11. Exclude posts by ID
  12. Excerpt length: in words

- ### Widget slider

  Allows the user to add slider to your website with a lots of custom features and styles from Bootstrap Carousel

  Widget options:

  1. Title
  2. Template: Bootstrap carousel, Bootstrap carousel 1, Bootstrap carousel 2
  3. Categories name: select categories to show, allows select multi categories
  4. Order by: Name, author, date, title, modified, parent, id, rand, comment count
  5. Order: ASC, DES
  6. Number of posts
  7. Include posts ID
  8. Counts posts
  9. Excerpt length: in words.

- ### Widget gallery

  Allows the user to add gallery to any position with CSS3 image gallery Jquery plugin.

  Widget options:

  1. Title
  2. Template: default
  3. Select gallery

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.

### Changelog

    Legend:
    +   Addition
    ^   Change
    -   Removed
    *   Security Fix
    #   Bug Fix
    !   Note

    <p>Sample text here...</p>

### Credits

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

### JavaScript

1. jQuery — Nullam quis risus eget urna mollis ornare vel eu leo.
2. jCarousel — Nullam quis risus eget urna mollis ornare vel eu leo.
3. CodeCanyon — Nullam quis risus eget urna mollis ornare vel eu leo.

### CSS

1. 960.gs — Nullam quis risus eget urna mollis ornare vel eu leo.

### Images

1. PhotoDune — Nullam quis risus eget urna mollis ornare vel eu leo.