“Avelanche” Documentation by “WebDezyner Solutions ” v1.0

---

“Avelanche”

---

Table of Contents

1. HTML Structure
2. CSS Files and Structure
3. JavaScript
4. PSD Files
5. Sources and Credits
6. Any additional unique features that need an overview

---

A) HTML Structure - top

This theme is a fixed layout with two columns. All of the information within the main content area is nested within a div with a class of "main-content" It can be edited through templated editor. The featured and latest products also reside with in the Index.liquid file. The sidebar's (column #2) content is within a div with an id of "secondaryContent". The general template structure is the same throughout the template. Here is the general structure.

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;
	} 

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.

I.E.

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

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

---

B) CSS Files and Structure - top

We have used many CSS files to make the style appealing and paid attention to every tiny element in the theme. However the main.css is the default style sheet for the theme. All the CSS and JS files used to make the Homepage main slider are included in the header section. Theses files are attached through snippet called "header". Bootstrap.min.css in the header section is responsible for the fluid display and responsive design. We will recommend to avoid any changes in Bootstrap.css or any other Jquery file attached.

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.

Any blog article that are placed within the blog page have 10px worth of padding and a white background. If you would like to edit the display of these posts, find the following section in the style sheet:

    .articles_blog
  {
      padding:10px; 
      border:1px solid #ccc;
      margin-bottom: 20px;
      background:#fff;
  }

---

C) JavaScript - top

This theme imports a number of Javascript files.

1. Slitslider.jQuery.js
2. Bootstrap.js
3. Fancybox.jquery.js

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.

4. In order to change the default values of the slider,navigate to slidslider.js

5.  in the assets folder and scroll down to this function.

6. 	[$.Slitslider.defaults = {
           // transitions speed
           speed : 800,
           // if true the item's slices will also animate the opacity value
           optOpacity : false,
           // amount (%) to translate both slices - adjust as necessary
           translateFactor : 230,
           // maximum possible angle
           maxAngle : 25,
           // maximum possible scale
           maxScale : 2,
           // slideshow on / off
           autoplay : true,
           // keyboard navigation
           keyboard : true,
           // time between transitions
           interval : 4000,
           // callbacks
           onBeforeChange : function( slide, idx ) { return false; },
           onAfterChange : function( slide, idx ) { return false; }
       
   

7. In addition to the slit slider, we have used fancybox and scrolltotop plugins create the effects. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method. For example:

   	scrollup:function(){
           if (!this.cssfixedsupport) //if control is positioned using JavaScript
               this.$control.css({opacity:0}) //hide control immediately after clicking it
           var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
           if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
               dest=jQuery('#'+dest).offset().top
           else
               dest=0
           this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
       },

8. The code is well commented and it allows you to hide the controls immediately after you have clicked them.

---

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.

Webdezyner

Go To Table of Contents

---