# Glammy Modern

## HTML5 & CSS3 Template

- By: annabalashova
- themeforest.net/user/annabalashova

Thank you for purchasing my theme. Our theme has an extensive documentation with easy to setup. If you still have some questions that you could not find in the scope of this help file, please contact me through email via my user page contact form here. You can also follow me on Themeforest to keep track of all my future themes, that you might be interested in. Thank you very much!

### HTML Files & Structure

Site consists of 27 html pages.

- `index.html` - Home slider
- `index2.html` - Home men promo
- `index3.html` - Home kids
- `index4.html` - Home video
- `sale.html` - Home Sale
- `shoes.html` - Home shoes
- `women.html` - Shop
- `men.html` - Shop
- `shoes.html` - Shoes
- `about.html` - About Us
- `product-page.html` - Product Page
- `love-list.html` - Love List
- `shopping-bag.html` - Shopping Bag
- `my-account.html` - My Account
- `product-catalog.html` - Product Catalog
- `brands-list.html` - Brands List
- `update.html` - Site Update
- `contacts.html` - Contacts
- `shortcodes.html` - Shortcodes
- `404.html` - 404 Page
- `articles.html` - Articles
- `article-single.html` - Article Single
- `checkout.html` - Checkout
- `faq.html` - FAQ
- `blog.html` - Blog
- `blog-post.html` - Blog Post
- `sale.html` - Sale

To hange the styles, colors, and other options in the site you can in css/style.css file. Configurations of all plugins are in the file js/myscript.js

Each major section of HTML code is marked with special labels for the convenience of code search and altering them.

### CSS Files

Below there are lists of the files, used in template styles.

- `style.css` - Main stylesheet. This file also contains some general styling, such as anchor tag colors, font-sizes, etc.
- `bootstrap.min.css` - bootstrap styles
- `flexslider.css` - FlexSlider styles. Here main slider Styles are enclosed, that are used on the main page
- `fancySelect.css` - Here styles of drop-down list enclosed, they are used in all drop-down lists of this template.
- `animate.css` - Main animation of blocks appearance, when scrolling the page down.
- `flipclock.css` - Styles of watches with countdown.

Mind that these values might be overridden somewhere else in the file.

`style.css` file contains all of the specific stylings for the page.

Also with marks properties in the main css/style.css file, responsible for the style, are appropriated named. I'm using six CSS files in this theme.

    /*-----------------------------------------------------------------------------------*/
    /*	NAME OF BLOCK
    /*-----------------------------------------------------------------------------------*/

    etc.

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.

All images are found in the `images`. If you want to replace the image, just copy the folder with the same name as the original file with identical proportions.

### JavaScript

Eleven Javascript files are used in this site.

- `myscript.js` - User configuration file scripts. Most of the plugins in this site are run from the customizable file system. There are a few functions that you can look at.
  File contains all of the specific stylings for the page. The file is separated into sections using:

      /*-----------------------------------------------------------------------------------*/
      /*	NAME OF BLOCK
      /*-----------------------------------------------------------------------------------*/

      etc.

- `jquery.min.js` - jQuery v1.10.2
- `bootstrap.min.js` - bootstrap.js v3.0.0 by @fat and @mdo
- `jquery.sticky.js` - holds menu block at the top of the browser when scrolling down
- `parallax.js` - function is responsible for the parallax effect
- `jquery.flexslider-min.js` - flex slider script used on the front page (with additions)
- `jquery.jcarousel.js` - script responsible for carousel, used in new products, the list of brands
- `jqueryui.custom.min.js` - jQuery UI - v1.10.0
- `fancySelect.js` - responsible for the drop-down lists
- `animate.js` - responsible for the animation on the site when you scroll down

### Top Slider

In this template FlexSlider plugin is used (with additional effects of appearance). FlexSlider is easy to setup and convenient to use. For the emergence of the block with the specific effect, this external block is named after this effect

The names of the classes that are assign to an external block for animation

- `FromLeft` - emergence of the block from the left
- `FromTop` - emergence of the block from the top
- `FromRight` - emergence of the block from the right
- `FromBottom` - emergence of the block from the bottom

The addition of this class to the above effects can delay animation for a specified time (calculated in ms)

- `captionDelay1` - 1 millisecond
- `captionDelay2` - 2 milliseconds
- `captionDelay3` - 3 milliseconds
- `captionDelay4` - 4 milliseconds
- `captionDelay5` - 5 milliseconds
- `captionDelay6` - 6 milliseconds
- `captionDelay7` - 7 milliseconds
- `captionDelay8` - 8 milliseconds
- `captionDelay9` - 9 milliseconds
- `captionDelay10` - 10 milliseconds
- `captionDelay11` - 11 milliseconds
- `captionDelay12` - 12 milliseconds