AMY - Creative WP Theme

Type: WordPress Theme / CSS3 / jQuery
Version:1.0
Author: Andrey Boyadzhiev / Cray.bg
Support: Support Tickets

Further below you will find a brief documentation that will facilitate you during the installation process. Please be so kind to read it carefully before you start. I remain on your disposal for any questions you may have. ‘Njoy!
Please take a time and rate my file I’ll appreciate it

Changelog

Requirements

  • Installed WordPress 3.9+ - WordPress.org
  • AMY Theme Visual Composer - Included(essential)
  • LayerSlider Plugin – Included
  • Breadcrumb NavXT Plugin – Not included
  • Contact Form 7 – Not included
  • WooCommerce 2.1+ if you going to use it as online store - WooCommerce
  • Facebook developer account and SSL certificate if you going to use it as facebook tab - RapidSSL
  • You should have PHP and MySQL installed on your server (PHP 5+)


Support

If you find a bug or need support please let us know trough our Support Ticket System and we will do our best to help you out.

1) Getting started

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

Please see the screencast on how to install and setup the provided demo content

You can find the latest demo content here or in "demo content" folder

How to work with AMY WP theme

Setting up Menu
Setting up footer
Footer Settings


Homepage Slider
Page Builder Slider
One Click Styles


Parallax levels
Background video
Post settings


Creating FB App

2) Installing the theme

After you finish setting up your WordPress installation, you have to install AMY theme. You can do it in two ways:

FTP Upload: Unzip the “amytheme.zip” file and upload the contents into the /wp-content/themes folder on your server.
Wordpress Upload: Navigate to Appearance > Add New Themes > Upload. Go to browser, and select the “amytheme.zip” located in “Wordpress theme” folder. Hit “Install Now” and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate AMY theme.


3) Setting up theme options

After activating theme, You need to install the requiered plugins. There will be notifications.

3.1) AMY Settings -> General

In this area you can change general settings for entire site. You can select your site width, menu and footer position and other important settings.

3.1.1) Site width

Select your stie style boxed or full width.

3.1.2) Menu position

Choose menu position fixed or scrollable

3.1.3) Menu width

Select menu width.

3.1.4) Footer position

Choose footer position fixed or scrollable

3.1.5) Footer width

Select footer width.

3.1.6) Posts in future

Enable this option will ebable you to publish posts with future date instead of shedule them

3.1.7) Disqus ID(shortname)

Enetr your Disqus shortname to enable the disqus comments. Just go http://disqus.com/admin/settings/wordpress/ and copy your shortname.

3.1.8) Menu search field

Enable/Disable search filed in menu header

3.1.9) Select Logo

Select your logo. The dimensions must be 200x70 in order to fit right.

3.1.10) Section favicon

Select your site favorite icon. You can visit www.favicon.cc to generate your own favicon

3.1.11) Welcome message

Enable/disable welcome/info message to new visitors.

3.1.12) Select 404 page

Custom 404 page. You need to create custom 404 page and then select it here.

3.1.13) Custom CSS Code

You can add your custom CSS code to overight existing class or to add new ones.

3.1.14) Custom JS Code

You can add your custom JavaScript scrept here

3.1.15) Google Analytics Code

Add your Google Analytics code here

3.2) AMY Settings -> Homepage Slider

In this section you can configure home page slider. You can choose between 8 scrolling styles, different colors and hover styles. You can select how to load next page by choosing infinite scroll or pagination style and more... In this area you can activate background slideshow, set delay between slides, select background overlay. If you want to have 1 background witout slideshow upload image in the first position.

3.2.1) Slider style

Here you can select 1 from 8 different scrolling styles for your default home page and categories

3.2.2) Slider post type

Select which post type to be used for content. You can slect WooCommerce porduct or custom post types

3.2.3) Slider categories

Select only specific category to be displayed

3.2.4) Slider color cheme

You can choose between dark and white color chemes

3.2.5) Slider hover style

Select between 3 svg hover styles

3.2.6) Slider parallax effect

Enable this option will add a mouse parallax effect to the slider

3.2.7) Slider tile excerpt

Set the number of symbols to display in post excerpt. Don’t set too larger number because in smaller screens it may be cut off.

shortname.

3.2.8) Order posts

Select post order ASC or DESC by post date

3.2.9) Pagination style

You can select how to load next page by choosing infinite scroll or pagination style

3.2.10) Slider first tile

Select number of the slider tile to be on focust first

3.2.11) Slider slideshow

Enable slider slideshow. On mouse hover the slideshow will pause.

3.3) AMY Settings -> Footer

In this section you can configure footer settings. You can select number of rows, credentilas and socilal links

3.3.1) Date widget

Enable/disable footer date widget which displays current date + has tooltip widget area where you can add widgets.

3.3.2) Select layout

Select footer number of rows. You can add footer content trough widgets

3.3.3) Credits

Add your site credits text

3.3.4) Social icons

Add your social linsk

3.4) AMY Settings -> Background

In this section you can configure site background color/image you can set slidehsow or video background.

3.4.1) Full width site background

This option will set the entire site background. Including the background of pages post etc. If your site is set to boxed style this will be outsied background color/image

3.4.2) Boxed site background

This option will set the entire site background. Including the background of pages post etc. This options works only if your site is set to boxed style

3.4.3) LayerSlider background

Add LayerSlider for background. Make sure that your slider height is bigger then 1000px.

3.4.4) Video background

Enables YouTube video background. If your site is set to full width the video will be displayed only at default homepage and categories. If your site is set to boxed the vide will be displayed on all pages.

3.4.5) Youtube ID

Enter only the YT video ID

3.4.6) Video controls

Show or hide video controls in bottom right corner

3.4.7) Mute video

Mute video on start

3.4.8) Rpeat video

Auto repead video

3.4.9) Start video at second

Set video start second.

3.4.10) Activate bacgkround slideshow

Activate background slideshow. Use web optimized images because you can increase your site loading speed. You can use single image or as amany as you want.

3.4.11) Display on

Select where to display the background slideshow

3.4.12) Bacgkroudn overlay

Set video start second.

3.4.13) Slideshow delay in miliseconds

Select delay time between slide change

3.4.14) Fade out speed in miliseconds

Select fadeout animation speed

3.4.15) Vertical alignment

Vertical alignment position of the image

3.4.16) Horizontal alignment

Horizontal alignment position of the image

3.4.17) Add background images

Add image slides

3.5) AMY Settings -> Styling

In this section you can change color schemes, fonts, colors, borders etc...

3.5.1) Main color scheme

Select the color shceme of the header and footer

3.5.2) Body Font

Select body font, size, weightn, and color

3.5.3) Headings

Select headings font and weightn

3.5.4) Titles

Select titles font and weightn

3.5.5) Coustom font

Add custom font style which you can use it trough the site

3.5.6) Menu background color

Select menu background color

3.5.7) Menu background shadow

Turn off the menu background shadow. Useful if you going to set menu background color to transperant.

3.5.8) Menu typography

Select menu font, size, weightn, and color

3.5.9) Sub-menu background color

Select sub-menu background color

3.5.10) Sub-menu borders

Select sub-menu border style

3.5.11) Sub-menu borders color

Select sub-menu border color

3.5.12) Sub-menu typography

Select sub-menu font, size, weightn, and color

3.5.13) Widget titles

Select widget titles font, size and weightn

3.5.14) Widgets bottom borders

Select widghets border style

3.5.15) Widgets bottom borders color

Select widgets border color

3.5.16) Page padding

Select default top and bottom page padding

3.5.17) Comments background color

Select the background color of the facebook, disqus and default WP comments

3.5.18) Input fields background color

Select input fields background color

3.5.19) Input fields border

Select input fields border style

3.5.20) Input fields border color

Select input fields border color

3.5.21) Footer sitepath background color

Select sitepath bacground color

3.5.22) Footer background color

Select the background color of the first part for the footer

3.5.23) Footer text color

Select titles font and weight

3.5.24) Footer widget area background color

Select footer background color

3.5.25) Footer widgets bottom borders

Select widgets border style

3.5.26) Footer typography

Select footer font, size, weightn, and color

3.5.27) Loading bacground color

Select loading background color

3.5.28) WooCommerce mssages backround color

3.5.29) WooCommerce messages text color

3.5.30) WooCommerce input fields background color

3.5.31) WooCommerce input fields border

3.5.32) WooCommerce input fields border color

3.5.33) WooCommerce forms border color

3.6) AMY Settings -> Translation

In this section you can translate all custom theme texts

3.7) AMY Settings -> WooCommerce

In this section you can configure WooCommerce plugin color scheme, rows, styles etc...

3.7.1) Woocommerce color cheme

Select color scheme for your shop thumbnails.

3.7.2) Default WooCommerce grid rows

Choose WooCommerce row nubmer.

3.7.3) Slider hover style

Select thumbnails hover style

3.7.4) Woo thumb style

This options is for selecting the style of the thumbnails.

3.7.5) Show footer cart

Enable/disable footer cart

3.8) AMY Settings -> One click styles

Here you will find preset theme styles. You can change your theme style with 1 click and the configurate the rest.

3.9) AMY Settings -> Import / Export

Import or export your options with one click

4) Setting up menu

Go to Appearance > Menus and you will see a panel where you can create new menus. Create one, add your created pages to it(from the left side panels) and save it. After this, in the left side you have a drop down box where you can select the Primary Navigation. Choose your newly created menu, hit “Save” and you’re all set.


5) Adding content

5.1) Adding Posts

  1. Go to Posts > Add New
  2. Enter a title and some content
  3. Select a post category
  4. Click on “Set featured image” to upload a preview image for this post(this is not necessary). Once the image is uploaded, click “Use as featured image”.
  5. After dealing with all content you can customize the post

In Post Settings section you can select posts style, one of the 19 color styles, sidebar position, show or hide title, show or hide post info and more. In Image Settings you can add image title (Important! If you add image title you will switch to “image content mode” which disable full size link to the image ), add image content (Important! If you add image content you will switch to “image content mode” which disable full size link to the image), add button link, add button title and add more then one image which will activate image slider (Important! Your post has to have “featured image selected”). I encourage you to experiment with different settings there are lots of possible combinations

5.2) Post settings

5.2.1) Custom page color

You can select custom page color only for that page.

5.2.2) Color style

Slect the main post color cheme form 18 available colors

5.2.3) Sidebar

Select sidebar position or hide it

5.2.4) Title

Show or hide page title

5.2.5) Post info

Show or hide post info

5.2.6) Tile custom url

Open custom link when the post is displayed in slider

5.2.7) Custom top margin in pixels

You can add or remove top margin

5.2.8) Custom bottom margin in pixels

You can add or remove bottom margin

5.2.9) Disqus comments

Enable/disable Disqus comments

5.2.10) Facebook comments

Enable/disable Facebook comments

5.2.11) Header Image

Select the source image for the parallax header

5.2.12) Parallax FX

Enable/disable parallax effect

5.2.13) Parallax speed

Set parallax speed 1 - will move the same speed as scrolling pseed, 0.1 - will not move

5.2.14) Parallax cover ratio

The height size of the image

5.2.15) Parallax minimum height

Minimum parallax height

5.2.16) Parallax extra height

Parallax extra height

5.2.17) Zoom out FX

Enable summ out parallax effect

5.2.18) Add Youtube video id

Add YouTube video to the header.
Importat "Header image" must be set to "Featured image" and you need to set featured image(this image is used in recent post, next or previews buttons etc.) and you have to set "Parallax FX" to off in order to work best

5.2.19) Add Vimeo video id

Add Vimeo video to the header.
Importat "Header image" must be set to "Featured image" and you need to set featured image(this image is used in recent post, next or previews buttons etc.) and you have to set "Parallax FX" to off in order to work best

5.2.20) LayerSlider shortcode id

Enter your custom made slider id here if you want to use LayerSlider

5.2.21) Select header parallax image

This image will be used for parallax header if you set the "Header Image" to "Custom image". Example scenario: You want one image to be displayed in the slider(featured image) but another in the header (Custom image)

5.2.22) Slider

Add more then one featured images as header slideshow.

5.2.23) Select background image

Add custom background image wich will override the theme baclgroumd color/background/slideshow.

5.3) Adding Pages

The process of adding pages is quite similar to adding posts.

5.4) Adding page builder templates (portfolio, tabs, contact us… etc)

You can find more info on how to add page builder templates in page builder templates section.

6) Color Schemes

Turquoise
Green sea
Emerald
Nephritis
Peter river
Belize hole
Amethyst
Wisteria
Wet asphalt
Midnight blue
Sun flower
Orange
Carrot
Pumpkin
Alizarin
Pomegranate
Concrete
Asbestos
Glass

8) AMY Theme Important Files

  • ======PHP======
  • header.php - theme header
  • index.php - displays sticky posts, archives and search results
  • footer.php - theme footer
  • category.php - page template for displaying all posts in a category
  • single.php - post template
  • page.php - page template
  • loop.php - loop functions for archives and search results
  • 404.php - 404 not found page template
  • comments.php - functions that display the comments form
  • functions.php - various functions that control theme’s settings and some visual parts
  • pagination.php - pagination function
  • ReduxFramework/admin.php - theme settings
  • sidebar.php - sidebar template
  • inc/vc - page builder templates
  • inc/add_meta_box.php - functions for post and page settings
  • inc/java-fun.php - changes css and javascript functions
  • inc/post-settings.php - holds post vars
  • inc/amy-slider.php - home page slider function
  • inc/def-style-1.php - slider tile template
  • inc/woo-style-1.php - woocommerce slider tile template 1
  • inc/woo-style-2.php - woocommerce slider tile template 2

  • ======CSS======
  • styles.css - main css styles
  • css/font-awesome/css/font-awesome.css - icon based font
  • css/prettyPhoto.css - prettyPhoto light box
  • css/jquery.vegas.css - vegas background slideshow
  • css/flexslider.css - flexslider slider
  • css/reset.css - resetting default browsers styles
  • css/styleIE.css - IE9
  • css/responsive.css - responsive design styles
  • css/opentip.css - tooltip

  • ======JAVASCRIPTS======
  • js/ddsmoothmenu.js - contain functions for theme menu
  • js/modernizr.custom.79639.js - checking for browsers support
  • js/classList.js - enables partial slider support for IE9
  • js/jquery.imageScroll.js - image parallax effect
  • js/jquery.mCustomScrollbar.js - footer custom scrollbars
  • js/jquery.prettyPhoto.js - prettyPhoto light box
  • js/jquery.flexslider.js - flexslider slider
  • js/jquery.parallax.js - mouse/slider parallax effect
  • js/jquery.tubular.1.0.js - Youtube api
  • js/jquery.vegas.js - background slideshow
  • js/opentip-jquery.js - tooltips
  • js/admin_js.js - admin options functions


Creating Facebook tab

Creating FB App

Page Builder templates

Here you can find some page builder templates (you can install the provided demo content with all of them). Just copy and paste them in your text editor(in Text mode) then you can switch to visual

8) AMY Theme Important Files

Standart Homepage
Blog Grid Homepage
Blog Slider Homepage
Portfolio Slider Style


Portfolio Grid
Image Grid
Portfolio Parallax Style
About Us


About Us - Video
Team Style 1
Team Style 2
Services


Contact Us
Shop Style 1
Shop Style 2
Shop Style 3


Font Awesome

For full list of icons please visit: Font-Awesome




Recommendations

Avoid to add more then 2-3 parallax backgrounds in one page. It may scroll smoooth on fast developer pc but there are users with less powerful computers

Avoid to add more then 20-30 tiles per page in the slider. It may scroll smoooth on fast developer pc but there are users with less powerful computers

Before runing WP update please check the theme page for version incompatibility warning

If you find a bug or need support please let us know trough our Support Ticket System and we will do our best to help you out.




I remain on your disposal for any questions you may have. Thank you for purchasing this product.