Welcome To Crevision Theme Documentation

Created: 23/9/2012 - By: Jozoor Team - Contact Us
Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to create a support thread on our support forum.. Thanks so much!

Theme Preview

Theme features :

- HTML5 & CSS3
- Responsive Design
- 30 HTML Files
- Ajax Contact Form
- Custom Shortcodes
- Icons Shortcodes
- 5 Home Layouts
- 3 Sliders
- Dark & White Styles
- 5 colors
- Twitter & Flickr Widget
- Layered PSD Files
- & much more...

Installing Theme

→ After unzip Theme Files, you will found HTML Folder have 2 Theme styles Drak and White all this files you will upload ( Dark or White ) or two to your site.
→ You can view this Theme in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the Theme.
→ The exception is the contact form which functions based on the PHP coding language and requires a server to send messages.
→ Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
→ Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
→ Locate the domain folder you wish to upload your Theme files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .php, .js into your FTP client.
→ Once the files are done uploading, rename the file you want to be your home page as 'index.html'.

HTML Structure

This Theme has a Responsive layout with a variation of column layouts depending on the page. This theme uses the 960 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 960 grid system, be sure to go to full_width.html, you will see the Grid system with divs, below the code for that :

		
      
      
        1/2 Column 
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere vel vitae nibh.
        
      
      
      
        1/2 Column 
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere vel vitae nibh.
        
      
      
      
      
      
      
      
        1/3 Column 
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas.
        
      
      
      
        1/3 Column 
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas.
        
      
      
      
        1/3 Column 
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas.
        
      
      
      
      
      
      
      
        11 Columns
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere vel vitae nibh.          Proin id condimentum sem. Morbi vitae dui in magna vestibulum suscipit vitae vel nunc. Integer ut risus nulla. malesuada tortor, nec          scelerisque lorem mattis.
        
      
      
      
        5 Columns
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus aliquet mollis. 
        
      
      
      
      
      
      
      
        1/4 Column 
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus. 
        
      
      
      
        1/4 Column 
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus.
        
      
      
      
        1/4 Column 
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus.
        
      
      
      
        1/4 Column 
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus. 
        
      
      
      
      
      
      
      
        12 Columns
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere vel vitae nibh.          Proin id condimentum sem. Morbi vitae dui in magna vestibulum suscipit vitae vel nunc. Integer ut risus nulla. malesuada tortor, nec          scelerisque lorem mattis.
        
      
      
      
        4 Columns
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam . 
        
      
      
      
      
      
      
      
        16 Columns
        
          Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in          purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere vel vitae nibh.          Proin id condimentum sem. Morbi vitae dui in magna vestibulum suscipit vitae vel nunc. Integer ut risus nulla. malesuada tortor, nec          scelerisque lorem mattis.

Structure of Included Files in HTML :

Color Options in Theme, you can let theme more colors or define on color only by :

             
   --- this color is active only ---
  
  
  and .....
  
  hidden Or delete this code

CSS Structure

I'm using one main CSS file (style.css) in this theme which you are free to modify depending on the customization you require. There are also six additional style sheets that I do not recommend changing. Those style sheets reside in the 'CSS' folder. The six additional style sheets are:

          
          /* Site Styles
================================================== */

/* header */

/* slider */

/* main container

/* footer */


@import url("fonts.css");               /* Custom Fonts */
@import url("base.css");                /* Reset & Basics */
@import url("skeleton.css");            /* Base 960 Grid */
@import url("javascript.css");          /* Css Styles for js scripts */
@import url("shortcodes.css");          /* Css Styles for shortcodes */

and you can add or modify colors and include new color file like :

Javascript Settings

Here you can modify any settings for ( Sliders, Twitter & Flickr Widget, Count Down of Under Construction, progress bar and more..)

           
# File : ( js/custom.js )
           
           // Flex Slider
(function($) {
  $(window).load(function() {
  $('.flexslider').flexslider({
	animation: 'fade',
	animationLoop: true,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
	slideshow: true,                //Boolean: Animate slider automatically
	slideshowSpeed: 4500,           //Integer: Set the speed of the slideshow cycling, in milliseconds
	animationSpeed: 700,             //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
	pauseOnHover: true, 
	pauseOnAction:false,
	controlNav: true,
	directionNav: false,
	controlsContainer: '.flex-container'
		});
  
  $('.flexslider2').flexslider({
	animation: 'slide',
	animationLoop: true,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
	slideshow: true,                //Boolean: Animate slider automatically
	slideshowSpeed: 4500,           //Integer: Set the speed of the slideshow cycling, in milliseconds
	animationSpeed: 700,             //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
	pauseOnHover: true, 
	pauseOnAction:false,
	controlNav: false,
	directionNav: true,
	controlsContainer: '.flex-container'
		});
  
  $('.flexslider3').flexslider({
	animation: 'slide',
	animationLoop: true,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
	slideshow: false,                //Boolean: Animate slider automatically
	slideshowSpeed: 4500,           //Integer: Set the speed of the slideshow cycling, in milliseconds
	animationSpeed: 700,             //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
	pauseOnHover: true, 
	pauseOnAction:false,
	controlNav: false,
	directionNav: true,
	controlsContainer: '.flex-container'
		});
  
  
	});
})(jQuery)

-------------------------------------------

// Progress Bar
$(function() {
$(".meter > span").each(function() {
$(this)
	.data("origWidth", $(this).width())
	.width(0)
	.animate({
		width: $(this).data("origWidth")
	}, 1200);
});
});

---------------------------------------------


// Alert Boxes
$(document).ready(function() {
// Closing notifications 
// this is the class that we will target
$(".hideit").click(function() {
//fades the notification out	
  $(this).fadeOut(600);});
});	

// Tooltips
$(document).ready(function(){

	/* Adding a colortip to any tag with a title attribute: */

	$('[data]').colorTip({color:'yellow'});

});

---------------------------------------------------


// Elastic Slider
$(function() {
  $('#ei-slider').eislideshow({
	  animation			: 'center',
	  autoplay			: true,
	  slideshow_interval	: 3000,
	  thumbMaxWidth       : 188,
	  titlesFactor		: 0
  });
});
           
           
           
# Files : ( js/twitter-flickr-options.js )
            
            
// twitter options
jQuery(function($){
  jQuery(".tweet").tweet({
	join_text: false,
	username: "envato", // Change username here
	avatar_size: false, // you can active avatar
	count: 2, // number of tweets
	seconds_ago_text: "about %d seconds ago",
	a_minutes_ago_text: "about a minute ago",
	minutes_ago_text: "about %d minutes ago",
	a_hours_ago_text: "about an hour ago",
	hours_ago_text: "about %d hours ago",
	a_day_ago_text: "about a day ago",
	days_ago_text: "about %d days ago",
	view_text: "view tweet on twitter"
	});
});

--------------------------------------------------------

// flickr options
$(document).ready(function(){

	$('#sidebar').jflickrfeed({
		limit: 6,
		qstrings: {
			id: '52617155@N08' // Flickr Id form feed Rss in your photostream in flickr profile
		},
		itemTemplate: ''
	});
	
	$('#footer').jflickrfeed({
		limit: 4,
		qstrings: {
			id: '52617155@N08' // Flickr Id form feed Rss in your photostream in flickr profile
		},
		itemTemplate: ''
	});

});

            
# Files : ( js/under-construction.js )   

/*  Change the items below to create your countdown target date and announcement once the target date and time are reached.  */
var current="Message After Time End!";        //—>enter what you want the script to display when the target date and time are reached, limit to 20 characters
var year=2012;        //—>Enter the count down target date YEAR
var month=12;          //—>Enter the count down target date MONTH
var day=21;           //—>Enter the count down target date DAY
var hour=18;          //—>Enter the count down target date HOUR (24 hour clock)
var minute=38;        //—>Enter the count down target date MINUTE
var tz=-5;            //—>Offset for your timezone in hours from UTC (see http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location)

//—>    DO NOT CHANGE THE CODE BELOW!    <—
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

function countdown(yr,m,d,hr,min){
theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
var today=new Date();
var todayy=today.getYear();
if (todayy < 1000) { todayy+=1900; }
var todaym=today.getMonth();
var todayd=today.getDate();
var todayh=today.getHours();
var todaymin=today.getMinutes();
var todaysec=today.getSeconds();
var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
var dd=futurestring-todaystring;
var dday=Math.floor(dd/(60*60*1000*24)*1);
var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
document.getElementById('count2').innerHTML=current;
document.getElementById('dday').style.display="none";
document.getElementById('dhour').style.display="none";
document.getElementById('dmin').style.display="none";
document.getElementById('dsec').style.display="none";
document.getElementById('days').style.display="none";
document.getElementById('hours').style.display="none";
document.getElementById('minutes').style.display="none";
document.getElementById('seconds').style.display="none";
document.getElementById('spacer1').style.display="none";
/*document.getElementById('spacer2').style.display="none";*/
return;
}
else {
document.getElementById('count2').style.display="none";
document.getElementById('dday').innerHTML=dday;
document.getElementById('dhour').innerHTML=dhour;
document.getElementById('dmin').innerHTML=dmin;
document.getElementById('dsec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
}
}

countdown(year,month,day,hour,minute);

Shortcodes System

Shortcodes System : you can use any shortcode in any page in your site , it is simple to inlcude it in you html structure below Examples :

           
            
    
      
      
      
        Alert Boxes
        
        
        Error Message. Your Message Goes Here.
        
        

        
        
        Error Message. Your Message Goes Here.
        
        

        
        
        Error Message. Your Message Goes Here.
        
        

        
        
        Error Message. Your Message Goes Here.
        
        

        
      

       
      
      
      
      
      
        Accordion
        
        
          Accordion-1
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 
          dummy text ever since the 1500s, when an unknown printer took a galley of type.
          
          
          Accordion-2
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 
          dummy text ever since the 1500s, when an unknown printer took a galley of type.
          
          
          Accordion-3
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 
          dummy text ever since the 1500s, when an unknown printer took a galley of type.
           
         
         

       

       
       
       
       
       
       
      
       
        Progress Bar
        
        
          
            Web Design ( 40% )
            

          
          
            Wordpress ( 80% )
            

          
          
            Branding ( 100% )
            

          
        
        
       

       
       
       
       
      
       
        Buttons
        
        Small Button
        Small Button
        Small Button
        
        


        
        Medium Button
        Medium Button
        Medium Button
        
        


        
        Large Button
        Large Button
        Large Button
        
        
       

       
       
       
       
       
       
      
       
        Tabs 1
        
        
        
          
            Tab 1
            Tab 2
            Tab 3
          
          
          
          
          
          1 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          the industry's standard dummy  text  ever since the 1500s, when an unknown printer took a galley of type.
          


          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          the industry's standard dummy  text  ever since the 1500s, when an unknown printer took a galley of type.
          
           
          
          
          2 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          the industry's standard dummy  text  ever since the 1500s, when an unknown printer took a galley of type.
          


          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          the industry's standard dummy  text  ever since the 1500s, when an unknown printer took a galley of type.
          
           
          
          
          3 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          the industry's standard dummy  text  ever since the 1500s, when an unknown printer took a galley of type.
          


          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          the industry's standard dummy  text  ever since the 1500s, when an unknown printer took a galley of type.
          
            
          
          

          
        

        
       

       
       
       
       
      
       
        Tabs 2
        
        
        
          
            Tab 1
            Tab 2
            Tab 3
          
          
          
          
          
          1 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          the industry's standard dummy  text  ever since the 1500s, when an unknown printer took a galley of type.
          


          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          
           
          
          
          2 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          the industry's standard dummy  text  ever since the 1500s, when an unknown printer took a galley of type.
          


          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          
           
          
          
          3 : Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          the industry's standard dummy  text  ever since the 1500s, when an unknown printer took a galley of type.
          


          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          
            
          
          

          
        

        
       

       
       
       
       
       
       
      
       
        Dropcaps
        
        
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has 
          been the industry's standard dummy 
          text ever since the 1500s, when an unknown printer took a galley of type.
          


          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has 
          been the industry's standard dummy 
          text ever since the 1500s, when an unknown printer took a galley of type.
        
        
       

       
       
       
       
       
      
       
        Toggle
        
        
        
            Title 1
            +
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus 
                neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
            
        
        
            Title 2
            +
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus 
                neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
            
        
        
            Title 3
            +
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus 
                neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
            
        
        
        
       

       
       
       
       
       
       
      
       
        Blockquote
        
        
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
          text ever since the 1500s, when an unknown printer took a galley of type.
        
        
       

       
       
       
       
      
       
        Highlight & Tooltips
        
        
          Sed at odio ut ToolTip Black 
          dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. 
          Nunc [ Normal link ] nisi.  aliquet mollis. Fusce elementum velit
          in purus ToolTip Yellow 
           vel dolor iaculis egestas. Maecenas ut nulla quis eros 
          ToolTip White scelerisque  vel 
          vitae nibh.  
        
        
       

       
       
       
       
      
       
        Info Box
        
        
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been. 
          Some Button
        
        
       

       
       
       
       
       
       
      
       
        List Styles
        
        
          Square List - Lorem Ipsum is simply text
        

        
        
          Check List - Lorem Ipsum is simply text
        

        
        
          Plus List - Lorem Ipsum is simply text
        

        
        
          Arrow List - Lorem Ipsum is simply text
        

        
        
          Cross List - Lorem Ipsum is simply text
        

        
        
          Star List - Lorem Ipsum is simply text 
        

        
        
          Minus List - Lorem Ipsum is simply text
        

        
        
          Arrow2 List - Lorem Ipsum is simply text
        

        
        
          Circle List - Lorem Ipsum is simply text
        

        
       

       
       
       
       
       
      
       
        Pagination
        
        
          previous
          1
          2
          3
          4
          5
          6
          7
          8
          9
          ...
          50
          51
          52
          Next
        

        
        
        
        
          previous
          1
          2
          3
          4
          5
          6
          7
          8
          9
          ...
          50
          51
          52
          Next
        

        
       

       
       
       
       
      
       
        Breadcrumbs
        
        
          
          Home »
          Shortcodes
        

        
        
          
          Home »
          Shortcodes
        

        
       

       
       
       
       
       
       
      
       
        Videos
       
        
       
       
       

       Youtube
       
       
       
       
       

       
       
       
       

       
       
       
       
        
       Vimeo
       
       
      
       
       

       
       
       
       

       
       
       
       
       
       
       
      
       
        Light Box & Frame
        
        

        
        
          
          
            
          
            

          Image Lightbox
        
        
      
        
        
          
          
            
           
            

          Video Lightbox
        
        
        
        
        
       

       
       
       
        
      
       
        Table
        
        
          
            
              Title 1
              Title 2
              Title 3
              Title 4
            
            
              item
              item
              item
              item
            
            
              item
              item
              item
              item
            
             
              item
              item
              item
              item
            
            
              item
              item
              item
              item
            
             
              item
              item
              item
              item

Title 1	Title 2	Title 3	Title 4
item	item	item	item
item	item	item	item
item	item	item	item
item	item	item	item
item	item	item	item

Icons Shortcodes using :

you can go to page ( icons.html ) and find you icon name you want and using code below :

     
     
     # Social Icons :
     
     To use this icons, put icon code anywhere in your page : 
color icon code :   [    ]   -   gray icon code :   [    ] 
black icon code :   [    ]  -   transparent icon code :   [    ]


# Small Icons :

To use this icons, put icon code anywhere in your page :   black icon code   [    ]

To use this icons, put icon code anywhere in your page :   gray icon code   [    ]

To use this icons, put icon code anywhere in your page :   color icon code   [    ]

To use this icons, put icon code anywhere in your page :   white icon code   [    ]

Contact Form

Contact Form : is PHP Script for sending messages to your email to be connected with your visitors or clients , you should edite email default to your email to start receive messages , now do this below :

            
 Go To File ( config.php ) in main folder and change email :
 
 
 
// Where will you get the forms' results?
define("WEBMASTER_EMAIL", 'mandooox@gmail.com'); // change this email to your new email

Photoshop Files

20 PSD Files : included which you can you psd elements for your site or pages example files :

- Homepage
- About Us
- Services
- Process
- Pricing Table
- Under Construction
- Portfolio
- Blog
- & much more... to 20

Scripts

Scripts :

Credits :

# Images :

# Fonts :

- titillium-text font

# Icons :

- iconsweets2
- glyphicons

Once again, thank you so much for purchasing this Theme. !!