Clean Responsive Retina Ready Template

Clean Multiple Pages / One Page Template


Clean 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 come with two different layout and skin :

1-First layout : a one page layout that display all the information in the same page exept for the blog post details page is separated.This layout come with a three option :

  1. One page template with a fixed header image.
  2. One page template with a slider images
  3. One page template with a dark skin to give a various option for this site that can be customized easly.

2-Second layout : a multiple page that display evrey section of the site in it's own page.

 

 

The template is responsive, sow you can view it also in the mobile/tablets devices and it looks very in thoose devices.


All the html ,css, javascript code are well organized and commented to make any change easy to do without any problems.

 

The template have :

  1. Responsive layout
  2. Retina Ready
  3. One page / Multiple pages
  4. Html 5 & CSS3
  5. Unique design
  6. Twitter feed
  7. Slideshow
  8. Light skin
  9. Dark skin
  10. Shortcodes
  11. Under construction page
  12. And much more ......
  1. Responsive layout
  2. Retina Ready
  3. One page / Multiple pages
  4. Html 5 & CSS3
  5. Unique design
  6. Twitter feed
  7. Slideshow
  8. Light skin
  9. Dark skin
  10. Shortcodes
  11. Under construction page
  12. And much more ......

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

  1. HTML folder this is the folder that contain all the file of the template : the one page versions with the light and the dark skins, the one page version with a slider images, and the multiple page version
  2. LICENSES folder this folder contain the licenses of the elements used
  3. PSD folder contain the layout of the one page light version of this template, because i only did the  one page layout of the template and the other pages and section of the pages i did thoose directly true HTML/CSS

 

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

 

Note the images are not included in the main download file due to licensing purposes. I have used thoose images for the preview only.

This section of the documentation is very important so read it carefully.

The theme uses two different font  : roboto, and fontello font  for the icons.

 

When you download and istall the site the first time you are going to notice that the all the icons used don't display and the font of the site will be set to the default font . Don't worry, you just need to read the line below to understand how to install the font and every thing will work.

As authors we do not able the right to put the font in the main download file, so you have to downalod this fonts to display the content and the layout  correctly .

 

Here is what you need to do download the font from this link and replace the font folder with the folder that contain the font that you have downloaded from this link  Fonts that  i have used  those are the font that i have used in the theme.

 

Fontello icons fonts :  if you want to use another set of icons go to this site and choose the icons that you want http://fontello.com/

Elements :

The PSD file included with this template dont contain all the page of the site because i find myself doing a lot of elements and pages of the site directly with HTML/CSS.

Images : not included due to licensing.

The template 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.

The template have a flickr stream widget located in the footer section. The setup is very easy, you have to do one change in the code to display you flickr stream. To do that open script.js locate the flickr stream section then put your flickr id, you will find a comment that says (/*put your flickr id here*/). that's it and your are done.

The setup of the map is very easy , you have only to change the coordinate of the location to do that :

For the one page versions the map setup is located in the index.html file so open this file and you will find a the end of it the setup of the map displayed as below you have to change the lat, and lng values to  yours .

 

For the multiple pages versions its the same thing , exept for the gmap setup location , you will find it in the contact.html page.

 

   $(document).ready(function(){
var map;
	  
      map = new GMaps({
        div: '#mapHolder',
 		lat: 51.506486,
 		lng: -0.109185,
 		zoom: 13,
 		zoomControl : true, 
        zoomControlOpt: { style : 'SMALL', position: 'TOP_RIGHT' },
 		panControl : false,
 		scrollwheel: false
      });


	map.addMarker({
		lat: 51.506486,
 		lng: -0.109185,
		title: 'London Stamford St',
		infoWindow: {
		content: '<p>You can put your address description details here</p>'
		 }
	});
	
	
	map.addMarker({
		lat: 51.506572,
		lng: -0.134601,
		title: 'London Pall Mall',
		infoWindow: {
		content: '<p>You can put your second address description details here</p>'
		 }
	});


});

Clean Template 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 30 and change the adress by your adresse.

If you don't have enough html skills to do the changes that you want please send me an email via my profile page http://themeforest.net/user/Benaissa and i will help you as soon as i can.

 

Thanks
Benaissa Ghrib.