PIXEL : Multipurposes Creative Template

Multipurposes Creative Template

Description

PIXEL Template is a modern multipurposes template. It can be used by a creative agency, a coorporate compagny or as personal portfolio for a freelancer.The template has unique and modern pages layout, that offers a range of variety for a lot of design and layout choices.
 

 

The template have :

Theme installation

When you download the main download file you finde several folder  :

  1. HTML folder this is the folder that contain all the files of the template.
  2. LICENSES folder this folder contain the licenses of the elements used.
  3. DOCUMENTATION : this folder contain the documentation of the theme ,please read the documentation carefully for further information

 

You are concerned with the HTML folder because it contain the main files of the site.You can upload it to your server and start work with it, by doing the customization that you need, color , layout , content, image ......

Features

Features

Slider setup

The template has a slider section to display images your project ,what ever you want, the code that setup the slider is described below :

 

<!--Main slider holder-->
	<div class="mainSliderHolder">
		
		<!--Main slider-->
		<div class="mainSlider flexslider">
			
			
			<!--Slides-->
			<ul class="slides">
				<li class="overlay"><img src="images/sliderImages/slide1.jpg"  alt=""/></li>
				<li class="overlay"><img src="images/sliderImages/slide2.jpg"  alt=""/></li>
			</ul>
			<!--End slides-->
			
			
			<!--Slides inner-->
				<div class="slidesInner">
						<img src="images/logoL.png" alt=""/>
						<p>A Creative Agency Crafting modern and unique
						<span>Web Templates &amp; Print Support</span></p>
				
				
				
				<!--Socials slider-->
					<ul class="socialsSlider">

						<li><a href="#"><i class="icon-facebook"></i></a></li>
						<li><a href="#"><i class="icon-linkedin"></i></a></li>
						<li><a href="#"><i class="icon-twitter"></i></a></li>
						<li><a href="#"><i class="icon-instagram"></i></a></li>

					</ul>
				<!--End socials slider-->

				</div>
				
				<!--End slides inner-->
				

		</div>
		<!--End main slider-->
	</div>
	<!--End main slider holder-->

To add a slider images to the list just add this line of html to the ul list :

<li class="overlay"><img src="images/sliderImages/slide1.jpg"  alt=""/></li>

 

The same thing for all the slider in the template, they have the same structure and you can add items the same way.

Css Structure

PIXEL use Skeleton  : Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

 

The css file structure is described blow :

<link href="css/base.css" rel="stylesheet" type="text/css">

 

The base.css contain the default css rules of the site.

 

<link href="css/skeleton.css" rel="stylesheet" type="text/css">

The skeleton.css file contain the css rules of the skeleton framework, you don't need to modifie anything there.
  1. <link href="css/main.css" rel="stylesheet" type="text/css">

 

The main.css contain all the css rules that style the entire site.

 

Images

The images  used in this template are not included with the main purchased files, but there are freebies and you can download them from the link below :

http://unsplash.com/

http://www.pixeden.com/

Icons

PIXEL uses fonttello icons , the template come with a set of icons that you can use as you want, and change the default icons to fit your needs.

You can find the list of the icons in the fontello.css in the css  folder then you can choose the icon that you want and change it in the html code.

 

Twitter setup

PIXEL come with a twitter feed section to display the last tweet from you twitter account. By default i set the twitter feed the display my own twitter feed for the preview purposes. To change the twitter feed to display your own feed open script.js and locate the twitter section then change the user name there " username: "BenaissaGhrib", // Change username here"  to your's.

Important note : Since Twitter now requires every request to be authenticated due the new version 1.1 of twitter API, it needs some private informations and settings. I recommend that you open the index.php file in the twitter folder and fill in with your own API settings. You can create a Twitter app here: https://dev.twitter.com/

The index.php is located in the twitter folder if you open it there is a config section from line 24 you are only interested in this four lines below :

You have to change this information to yours , when you create your twitter app here https://dev.twitter.com/ you get this information unther OAuth tool tab.

 

Instagram setup

PIXEL come with instagram feed section to display user, popular or tags photo feeds inside your  site, by default this area in the footer display a default set of images for demo purposes, but od cours you can display your own instagram fee, popular or tags photo feeds....

 

To change the instafeed widget located in the footer to display the images that want(you user feed, popular or tags photo feeds), simply open script.js located in the js folder then located the instagram feed setup section look for the line of codes below then change  the query variable into you user name if you want to dsiplay a specific user feed or popular or tags photo feeds

  1. query: 'insideenvato', //Change the instagram feed user to display the feed that you want.

 

More info about instgram feed option can be found here :

 

http://lab.adrianquevedo.com/jquery-spectragram/

 

Contact form setup

PIXEL come whith a good to go ajax contact form ready to use, you have to replace the adress of the recipient in the send.php file by your adresse.

To do that open the send.php file located in the main download file in any editor of your choice and go to the line 34 and change the adress by your adresse.