Welcome to Pluton Theme Documentation.
Thank you for buying our theme.
We hope this document will help you to prepare theme.If you have any question please feel free to Contact Us.
Pluton is modern one page theme,fully repsonsive.Pluton will look great weather you use pc,tablet or phone.Our code is clean and easy to customize.
When you finish downloading package from themeforest.The following folders will be in the unzipped file:
Before you upload the theme, make sure you change content (logo,text,images) according to your requirements.
You can view this Theme in any web browser from your computer. Because the files are written in HTML, you do not need an internet connection in order to display theme.
To make theme available online you must upload files that you purchased to server,so others can find them online. Server space can be purchased at many different places around the internet.
How to Upload:
After unziping file,you will find 'Html' folder,this is most important folder.Inside you will find 'index.html' file,if you open index.html file in browser like Google Chrome or Firefox it will display your Theme.You need to change text in index.html (Html) file,you can change by opening index.html (Html) file in some text editor and then find proper line of code and make changes
After changing file you will need to upload index (Html) file to your web server with other files from Html folder (css,js,images,php)
You can change title in browser tab by changing this line of code in index (Html) file:
<title>Pluton theme</title>
You can find all CSS file in css folder into Html folder.Main css file is style.css
In Css folder you have 6 files:
In Js (javascript) folder you have 9 files:
Main font in theme is Google's Roboto font.
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
We generated icon font using http://fontello.com/. Icon font named porta and is located in forlder fonts.
LOGO - Make sure your logo is in png format have name 'logo' and dimension should be 240x80,then put your logo in images folder into html folder.If you want to change dimension of logo,file type or name,you can do that by changing this code in index (Html) file:
<a href="#" class="brand">
<img src="img/logo.png" width="120" height="40" alt="Logo" /> <!-- This is website logo -->
</a>
NAVIGATION - If you want to remove some section from page and navigation menu,remove code from navigation menu like this in html file:
<li>
<a href="#service">Services</a>
</li>
Dont forget after to remove the whole section from html page.
BACKGROUND - Make sure to prepare background image for slider,dimension shuld be something like 1948x520,name Slider and file type png.Put background image in images folder into Html folder.If you want to change name or file type find this line of code in jquery.cslider.css in css folder into html folder:
background: transparent url(../images/Slider.png) repeat-x 0% center;
IMAGES - Images are in "images" folder into html folder,have name Slider01,Slider02,Slider03 and they are png file type
TEXT - To change text in slider,find this lines of code in html file:
<!-- Start first slide -->
<div class="da-slide">
<h2 class="fittext2">Welcome to pluton theme</h2>
<h4>Clean & responsive</h4>
<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
<a href="#" class="da-link button">Read more</a>
<div class="da-img">
<img src="images/Slider01.png" alt="image01" width="320">
</div>
</div>
TITLE: - You can change title and description by changing this code:
<div class="title">
<h1>What We Do?</h1> <!-- Section's title goes here -->
<p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p><!--Simple description for section goes here. -->
</div>
SERVICE ICON - Icons for services have name Service1,Service2,Service3 they are in png format and dimension are 360x360.Icons are in images folder,into Html folder.To change icon name or file type,change code in html like this:
<div class="centered service">
<div class="circle-border zoom-in primary-background">
<img class="img-circle" src="img/Service1.png" alt="service 1">
</div>
<h3>Modern Design</h3>
<p>We Create Modern And Clean Theme For Your Business Company.</p>
</div>
PORTFOLIO NAVIGATION - Find code like this in html to change portfolio navigation:
<li class="filter" data-filter="web">
<a href="#noAction">Web</a>
</li>
IMAGES - for portfolio are in 'Images' folder into Html folder,have name Portfolio01,Portfolio02 etc.Prepare your images in png format with dimension of 640x400,put images into 'images' folder in html folder.You want to change title and description for images,find code like this in html file:
<div class="thumbnail">
<img src="images/Portfolio01.png" alt="project 1">
<a href="#single-project" class="more show_hide" rel="#slidingDiv">
<i class="icon-plus"></i>
</a>
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
<div class="mask"></div>
</div>
CLICK INFO - Find code like this to change info for single project in portfolio:
<div class="span6">
<div class="project-description">
<div class="project-title clearfix">
<h3>Webste for Some Client</h3>
<span class="show_hide close">
<i class="icon-cancel"></i>
</span>
</div>
<div class="project-info">
<div>
<span>Client</span>Some Client Name</div>
<div>
<span>Date</span>July 2013</div>
<div>
<span>Skills</span>HTML5, CSS3, JavaScript</div>
<div>
<span>Link</span>http://examplecomp.com</div>
</div>
<p>Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.</p>
</div>
</div>
TEAM - Images for team are in png file,have name Team1,Team2,Team3,dimension 400x400,replace them with you images in folder 'images' in html folder.You want to change name,description and link social icons,find code like this in Html file
<div class="span4" id="first-person">
<div class="thumbnail">
<img src="images/Team1.png" alt="team 1">
<h3>John Doe</h3>
<ul class="social">
<li>
<a href="">
<span class="icon-facebook-circled"></span>
</a>
</li>
<li>
<a href="">
<span class="icon-twitter-circled"></span>
</a>
</li>
<li>
<a href="">
<span class="icon-linkedin-circled"></span>
</a>
</li>
</ul>
<div class="mask">
<h2>Photographer</h2>
<p>When you stop expecting people to be perfect, you can like them for who they are.</p>
</div>
</div>
</div>
ABOUT US - To change text for 'About Us' find code like this in Html file:
<div class="about-text centered">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
SKILLS - To Change text and percent in skill bar,find code like this:
<ul class="skills">
<li>
<span class="bar" data-width="80%"></span>
<h3>Graphic Design</h3>
</li>
<li>
<span class="bar" data-width="95%"></span>
<h3>Html & Css</h3>
</li>
<li>
<span class="bar" data-width="68%"></span>
<h3>jQuery</h3>
</li>
<li>
<span class="bar" data-width="70%"></span>
<h3>Wordpress</h3>
</li>
</ul>
JOIN US - To change text in 'We're Hiring' find code like this:
<div class="highlighted-box center">
<h1>We're Hiring</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed...</p>
QUOTE - To change text and link for quote,find code like this:
<div class="section secondary-section">
<div class="triangle"></div>
<div class="container centered">
<p class="large-text">Love does not begin and end the way we seem to think it does. Love is a battle, love is a war; love is a growing up.</p>
<a href="#" class="button">Purshase now</a>
</div>
</div>
CLIENT - Images for Clients have name Client1,Client2 etc.have dimension of 200x200,they are in png file type.Replace them with your images in folder 'Images' into Html folder.To change name and quotes,find code like this in Html file:
<div class="span4">
<div class="testimonial">
<p>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."</p>
<div class="whopic">
<div class="arrow"></div>
<img src="images/Client1.png" class="centered" alt="client 1">
<strong>John Doe
<small>Client</small>
</strong>
</div>
</div>
</div>
QUOTE - Replace quote by changing code like this in html document
<p class="testimonial-text">
"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away"
</p>
OUR CLIENTS - Images (Logos) for 'Our Clients' have dimension 400x200,name ClientLogo01,ClientLogo02 etc.They are in png file.Replace them in folder Html/Images/Clients
Background - To change background for client logo section,find code like this in "style.css"
/* Third section use bacground image */
.third-section {
padding-bottom: 70px;
background: #A1AAB7 url(../images/brand-bg.png) no-repeat center;
border-top:6px solid #FECE1A;
}
TEXT - To change text nad link button in Price labels,find code in Html file like this:
<div class="span4 price-column">
<h3>Basic</h3>
<ul class="list">
<li class="price">$19,99</li>
<li><strong>Free</strong> Setup</li>
<li><strong>24/7</strong> Support</li>
<li><strong>5 GB</strong> File Storage</li>
</ul>
<a href="#" class="button button-ps">BUY</a>
</div>
Mail from site visitors in newsletter will go in newsletter.txt in php folder into html folder.you must set write permision for newslatter.txt flie.You can use newsletter service like mailChimp for massive newsletter sending.
If you want to change where mail from site visitors will go,find and change this line of code in newsletter.php in php folder into html folder.
$fileName = 'newslatter.txt'; //set 777 permision for this file.
MAP - We use Google Map for displaying map.Please make sure to set your location and address.To set location you will need to find Latitude and Longitude numbers,you can find in this site then find and change this line of code in app.js in js folder int html folder:
function initializeMap() {
var lat = '-31.971436'; //Set your latitude.
var lon = '115.903873'; //Set your longitude.
CONTACT - To make contact form work,you will need to change this lines of code in mail.php in php folder into html folder:
//your email adress $emailTo = "yourmail@yoursite.com";
//from email adress $emailFrom = "contact@yoursite.com";
//email subject $emailSubject = "Mail from Porta";
INFO - Make sure you change info text and link social icons in contact by changing this code in Html file:
<div class="span9 center contact-info">
<p>123 Fifth Avenue, 12th,New York,NY 10010</p>
<p class="info-mail">ourstudio@somemail.com</p>
<p>+11 234 567 890</p>
<p>+11 286 543 850</p>
<div class="title">
<h3>We Are Social</h3>
</div>
</div>
<div class="row-fluid centered">
<ul class="social">
<li>
<a href="">
<span class="icon-facebook-circled"></span>
</a>
</li>
<li>
<a href="">
<span class="icon-twitter-circled"></span>
</a>
</li>
<li>
<a href="">
<span class="icon-linkedin-circled"></span>
</a>
</li>
<li>
<a href="">
<span class="icon-pinterest-circled"></span>
</a>
</li>
<li>
<a href="">
<span class="icon-dribbble-circled"></span>
</a>
</li>
<li>
<a href="">
<span class="icon-gplus-circled"></span>
</a>
</li>
</ul>
</div>
IMAGES : In our demo we use this images:
1. Aleksey Baydakov Behance
2. Regina Pagles Behance
2. Andrés Nieto Porras Flickr
3. PeopleImages PeopleImages
Copyright©2013 GraphBerry.com All Right ReservedJADOGAR