1.1 Fonts

Font used in theme is:

- Open Sans
- Merriweather

Font has been taken from Google Fonts, so feel free to replace it with any Google Font.

To replace the default logo, you have to replace "<a href="#" target="_parent"><img alt="" src="images/logo.png"></a>" with your own image.

Example:

<img alt="" src="images/your-logo.jpg">

To rename the main menu links you have to open the html page that you want to change using some text editor software(notepad, wordpad, notepad++ etc.) and find
<ul class="menu-list"><ul> text. Beneath the text line you will find all of the menu items. Simply replace the text with your own.

Example:

Edit this: <li><a href="work.html">Work</a></li>

To change the page to where that item links open the html page that you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this: <li><a href="work.html">Work</a></li>


Change logo in menu

Example:

Edit this: <img src="images/menu-logo.png" alt="" />


Change text in menu

Example:

Edit this: <p> class="menu-text">We are a interactive digital agency. We create stuff so that you can sleep better.</p>


Change social icons in menu

Example:

Edit this: <li><a href="#"><i class="fa fa-facebook"></i></a></li>


You can use Font Awesome icons.

To change elements in footer, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this:

<!--Footer-->
<footer class="sticky">
  <div class="row no-margin">
      <div class="col-md-3 col-sm-12">
          <!--Logo-->
          <img src="images/footer-logo.png" alt="">
          <!--/Logo-->
      </div>
      <div class="col-md-6 col-sm-12">
          <!--Info text-->
          <p class="subfont text-center">42 Wallaby Way, Sydney 84523, Australia / Phone: 381.63.255.700 / Contact</p>
          <!--/Info text-->
      </div>
      <div class="col-md-3 col-sm-12">
          <!--Social icons-->
          <ul>
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>            
            <li><a href="#"><i class="fa fa-google"></i></a></li>
          </ul>
          <!--Social icons-->
      </div>                
  </div>
</footer>
<!--/Footer-->

You can use Font Awesome icons.

2.1. Index page

To change page elements, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this:

  <!--Full page slider-->
  <div id="fullpage">
    <!--Slide 1.-->  
    <section class="full-slide slide1">
        <div class="full-slide-content text-center">
            <span class="subtitle">Web Design & Development</span>        
            <h1><span>Orange website for <br/> shindiri studio</span></h1>
            <a href="#" class="btn"><span>View Project</span> <span class="icon-arrow"></span></a>
        </div>
    </section>
    <!--/Slide 1.--> 
   
    <!--Slide 2.-->  
    <section class="full-slide slide2">
        <div class="full-slide-content text-center">
            <span class="subtitle">Interior Design & Architecture</span>
            <h1><span>Bookshelf from <br/> the future</span></h1>
            <a href="#" class="btn">View Project<span class="icon-arrow"></span></a>
        </div>
    </section>
    <!--/Slide 2.-->  

    <!--Slide 3.-->  
    <section class="full-slide slide3">
        <div class="full-slide-content text-center">
            <span class="subtitle">Interior Design & Architecture</span>
            <h1><span>Bookshelf from <br/> the future</span></h1>
            <a href="#" class="btn">View Project <span class="icon-arrow"></span></a>
        </div>
    </section>
    <!--/Slide 3.-->  
  </div>
  <!--/Full page slider-->

To change background image in this slider, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this css part in Style.css file:

.full-slide.slide1{
	background:url("images/background/background1.jpg") repeat center top;
}
.full-slide.slide2{
	background:url("images/background/background2.jpg") repeat center top;
}
.full-slide.slide3{
	background:url("images/background/background3.jpg") repeat center top;

}

For more information about fullPage plugin, either visit Developer page.

2.2. Work page

To change page elements, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this:

  <!--Home-->
  <section class="home projects">
   <div class="home-text-content text-center">
     <div class="container">
      <div class="row">
        <div class="col-md-12"> 
          <span class="subtitle">Web Design & Development</span>        
          <h1><span>London Colorful Multicultural <br/> Life Posters</span></h1>
          <a href="single-project-1.html" class="btn"><span>View Work</span> <span class="icon-arrow"></span></a>                       
        </div>
      </div>  
     </div>
   </div> 
  </section> 
  <!--/Home-->
          

To change background image in this section, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this css part in Style.css file:

.projects{
	background:url("images/portfolio/main.jpg") repeat center top;
}

To change portfolio item, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

<!--Portfolio content-->
  <div class="portfolio-content">       
      <!--Portfolio item-->
      <div class="col-sm-6 portfolio-item wow showInUp fast" data-wow-offset="30">
          <img alt="" src="images/portfolio/portfolio-1.jpg">
          <div class="hover-item">
              <div class="hover-content">
                <div class="hover-content-alignCenter">
                    <span class="subtitle small">Web Design & Development</span>         
                    <h2>Mutation Informational <br>Technologies</h2>
                    <a href="single-project-2.html" class="btn fade-out"><span>View Work</span> <span class="icon-arrow"></span></a>
                </div>
              </div>
          </div>
      </div>
      <!--/Portfolio item-->
  </div>
  <!--/Portfolio content-->

To change the number of displayed elements, open custom.js and:

Example:

Edit this part in file:

/*********************************************************************************************************/
/* -------------------------------------- Work - load more ------------------------------------------ */
/*********************************************************************************************************/
$(function(){
    $(".portfolio-content").slice(0, 6).show(); // select the first six
    $(".load-more-work .load-more").click(function(e){ // click event for load more
        e.preventDefault();
        $(".portfolio-content:hidden").slice(0, 6).show(); // select next six hidden divs and show them
		if($(".portfolio-content:hidden").length == 0){
           $(".load-more-work").fadeOut(800);
        }
    });
});

2.3. Single project pages

To change page elements, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this:

<!--Work info-->
<section class="project-info text-center">
      <div class="row">
        <div class="col-md-12 animated fadeIn">  
            <span class="subtitle small">Branding</span> 
            <h2>London Colorful Multicultural <br>Life Posters</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>   
            <a class="btn dark" href="#"><span>View Project</span> <span class="icon-arrow"></span></a>      
        </div>
      </div>  
</section> 
<!--/Work info--> 

<!--Portfolio--> 
  <section class="portfolio">
      <!--Portfolio container--> 
      <div class="row portfolio-container">        
          <!--Portfolio item-->
          <div class="col-md-6 col-sm-6 col-xs-12 portfolio-item animated fadeIn">
              <img alt="" src="images/single-work-1/Main-Portfolio-a.jpg">
          </div>
          <!--/Portfolio item-->
          
          <!--/Portfolio item-->
          <div class="col-md-6 col-sm-6 col-xs-12  portfolio-item animated fadeIn">
              <img alt="" src="images/single-work-1/Main-Portfolio-b.jpg">
          </div>
          <!--/Portfolio item-->   
          <!--Portfolio item-->
          <div class="col-md-6 col-sm-6 col-xs-12 portfolio-item wow animated fadeIn">
              <img alt="" src="images/single-work-1/Main-Portfolio-c.jpg">
          </div>
          <!--/Portfolio item-->
       
          <!--/Portfolio item-->
          <div class="col-md-12 col-sm-12 col-xs-12  portfolio-item wow animated fadeIn">
              <img alt="" src="images/single-work-1/Main-Portfolio-d.jpg">
          </div>
          <!--/Portfolio item--> 
      </div>
      <!--/Portfolio container-->
  </section>   
<!--/Portfolio--> 

<!--Next and Prev project-->
<section class="project-pagination">
        <div class="row no-margin">
            <div class="col-md-6 col-sm-6 col-xs-6 no-padding text-center">
            	<div class="project-pagination-content">
				<a href="#" class="prev-project subfont"><i class="fa fa-angle-right fa-rotate-180"></i>Previus Project</a>
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6 no-padding text-center">
                <div class="project-pagination-content">
				<a href="single-project-2.html" class="next-project subfont">Next Project<i class="fa fa-angle-right"></i></a>
                </div>
            </div>           
        </div>
</section>
<!--/Next and Prev project--> 

2.4. Services

To change page elements, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this:

<!--Services text-->
<div class="text">
        <h2>Our services</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
<!--/Services text-->

<!--Services image-->
<div class="services-image"></div>
<!--Services image-->

To change services image in this section, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this css part in Style.css file:

.services-image{
    background: url("images/services/service1.jpg") no-repeat center;
}
<!--Service-->
<div class="col-md-4 col-sm-12 col-full-height service-content border">
        <span class="icon"><i class="fa fa-pencil"></i></span>
        <h3>Web Design</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit mauris a convallis sagittis. Praesent et leo sapien. Pellentesque rutrum sem felis, eget faucibus nibh cursus id. Nunc dui felis, interdum et est nec.</p>
</div>
<!--/Service-->

2.5. About us

To change page elements, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this:

<!--About text-->
<div class="text">
        <h2>About us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
<!--/About text-->

<!--About image-->
<div class="about-image"></div>
<!--About image-->

To change about image in this section, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this css part in Style.css file:

.about-image{
    background: url("images/about/about1.jpg") no-repeat center;
}
<!--Team text-->
<div class="team-text">
    	<h2>Our creative team</h2>
   		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
</div>
<!--/Team text-->

<!--Team item-->
<div class="col-md-3 col-sm-6 col-xs-12 no-padding team-item">
    <img src="images/team/1.jpg" alt="" />
    <div class="hover-team-item">
        <h3>MARK JOHNSON</h3>
        <span class="job-position subfont">CEO at Shindiri Studio</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <ul class="social">
          <li><a href="#"><i class="fa fa-facebook"></i></a></li>
          <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
          <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        </ul>
    </div>               
</div>
<!--/Team item-->

2.6. Single Post

To change page elements, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this:

<!--Blog post image-->
<section class="blog-post-image">
      <div class="row no-margin">
     	 <img src="images/blog-post/blog-post-1.jpg" alt="" />
      </div>
</section> 
<!--/Blog post image--> 

<div class="col-md-12">
  <!--Post info-->
  <p class="post-info subfont">October 23, 2014 <i class="fa fa-circle"></i> 11:23h</p>  
  <!--Post title-->     
  <div class="post-arch-title">This is an example of a sticky post</div>
  <!--Social share-->
  <div class="social-share subfont text-right">
        <p><span class="share-title">Share on:</span> <a href="#">Facebook</a> <a href="#">Twitter</a> <a href="#">Pinterest</a> <a href="#">LinkedIn</a></p>
  </div>
  <!--Post text-->
  <p class="post-text intro-text subfont">Post text...</p>
</p>  
</div>

<!--Post author-->
<div class="post-author">
   <!--Author image-->
   <div class="col-md-1 col-sm-1 col-xs-12 author-image no-padding">
      <img src="images/blog-post/author1.jpg" alt="">
   </div>
   <!--/Author image-->
   <!--Author info-->
   <div class="col-md-11 col-sm-11 col-xs-12 author-info">
      <span class="author-name subfont">James McAwoy</span>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.</p>
   </div>
   <!--/Author info-->
   <div class="clearfix"></div>
</div>  
<!--/Post author--> 

<!--Comment-->
<li class="comment">
    <span class="comment-title">This is a comment</span>
    <p>Nullam eget ipsum nec justo rutrum sodales. Duis non metus sem. Nulla egestas venenatis augue quis vestibulum. Phasellus suscipit feugiat enim. Fusce laoreet felis ac tellus maximus varius.</p>
    <div class="comment-author">
        <div class="comment-author-image">
            <img src="images/blog-post/author2.jpg" alt="">
        </div>
        <div class="comment-info">
            <span class="comment-author-name subfont">Sarrah Smithsonian</span>
            <span>Nov. 26</span>
        </div>
    </div>
</li>
<!--Comment-->

<!--Comments form-->
<div class="comments-form-content">
    <span class="post-subtitle subfont">Write a comment</span>
    <form id="comments-form">
       <div class="row">
        <div class="col-md-12 no-padding">
            <div class="col-md-6 required">
              <input id="name" class="subfont" type="text" placeholder="Your name here" name="name">
            </div>
            <div class="col-md-6 required">
              <input id="subject" class="subfont" type="text" placeholder="Your subject here" name="subject">
            </div>
        </div>
        <div class="col-md-12 required">
            <textarea id="message" class="subfont" placeholder="Your message here" cols="40" name="message"></textarea>
        </div>               
       </div>
     
       <div class="row">              
        <div class="col-md-12 col-xs-12">
          <button type="submit" class="btn dark pull-right"><span>Send Message</span> <span class="icon-arrow"></span></button>
        </div>
       </div>
       
       <div class="row">               
        <div class="col-md-12 col-xs-12">
          <div class="notification"><span class="highlight"><i class="fa fa-check-circle"></i> Email successfully sent!</span></div>
        </div>
       </div>                                  
   </form>                       
</div>
<!--/Comments form-->

<!--Recommended-post-->
<div class="recommended-post">
  <p class="post-info subfont"><a href="#">October 23, 2014</a> <i class="fa fa-circle"></i> 11:23h</p>        
  <div class="post-arch-title"><a href="#">This is an example of a sticky post</a></div>
  <p class="post-text subfont">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris, <br/> nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
  <p class="post-category subfont">in <a href="#" class="highlight">Post Types</a> by <a href="#" class="highlight">Shindiri Studio</a></p> 
</div>
<!--/Recommended-post-->

<!--Right sidebar-->  
<div class="col-md-3 col-sm-4 right-sidebar post-sidebar">

  <!--Search-->
  <div class="widget">
    <form class="search-form">
        <input type="text" class="search subfont" placeholder="Search our blog">
        <button class="search-button"><i class="fa fa-search"></i></button>
    </form></div>
  <!--/Search-->    
                 
  <!--Recent post-->
  <div class="widget">		
    <span class="widget-title">Recent Post</span>
    <div class="widget-post">
        <p class="post-info subfont"><a href="#">October 23, 2014</a> <i class="fa fa-circle"></i>11:23h</p>
        <span class="widget-post-title"><a href="#">THIS IS A POST WITH "QUOTE" <br/> CONTENT</a></span>
        <p class="subfont">Lorem ipsum dolor sit amet, usu postea posidonium te...</p>
    </div>                             
  </div>  
  <!--/Recent post-->      

  <!--Categories-->
  <div class="widget">	
    <span class="widget-title">Categories</span>
    <ul>
      <li><a href="#">Web Design</a></li>
		...
    </ul>
  </div>  
  <!--/Categories-->   
         
  <!--Tags-->
  <div class="widget">	
    <span class="widget-title">Popular Tags</span>	
    <a href="#" class="tag-link">web <span class="highlight">/</span></a>
	...
  </div>  
  <!--Tags-->                              
</div>
<!--/Right sidebar-->   

2.7. Blog archive

To change page elements, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this:

<!--Home-->
<section class="home blog-archive">
   <div class="home-text-content">
      <div class="row no-margin">
        <div class="col-md-12">    
          <p class="post-info subfont"><a href="#">October 23, 2014</a> <i class="fa fa-circle"></i> 11:23h</p>        
          <h1><span>This is an example <br/> of a sticky post</span></h1>
          <p class="post-text subfont">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris, <br/> nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
          <p class="post-category subfont">in <a href="#" class="highlight">Post Types</a> by <a href="#" class="highlight">Shindiri Studio</a></p>            
        </div>
      </div>  
   </div>
</section> 
<!--/Home--> 

To change home image in this section, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this css part in Style.css file:

.blog-archive{
    background: url("images/background/background4.jpg") no-repeat center;
}

<!--Blog post content-->
<div class="blog-post-content">   
      <!--Blog post-->
      <div class="col-sm-6 no-padding">
          <!--Blog post wrapper-->
          <div class="post-wrapper">
              <div class="post-wrapper-text">
                  <p class="post-info subfont"><a href="#">October 23, 2014</a> <i class="fa fa-circle"></i> 11:23h</p>        
                  <div class="post-arch-title"><a href="#">This is a post with audio <br/> content</a></div>
                  <p class="post-text subfont">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris, <br/> nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
                  <p class="post-category subfont">in <a href="#" class="highlight">Post Types</a> by <a href="#" class="highlight">Shindiri Studio</a></p> 
              </div>
          </div>
          <!--/Blog post wrapper-->      
      </div>
      <!--Blog post-->
</div> 
<!--/Blog post content-->

To change the number of displayed elements, open custom.js and:

Example:

Edit this part in file:

/*********************************************************************************************************/
/* -------------------------------------- Blog archive - load more ------------------------------------------ */
/*********************************************************************************************************/
$(function(){
    $(".blog-post-content").slice(0, 6).show(); // select the first six
    $(".load-more-work .load-more").click(function(e){ // click event for load more
        e.preventDefault();
        $(".blog-post-content:hidden").slice(0, 6).show(); // select next six hidden divs and show them
		if($(".blog-post-content:hidden").length == 0){
		   $(".load-more-work").fadeOut(800);
        }
    });
});

2.8. Contact

To change elements in this part, open the html of the page you want to change using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this:

<!--About text-->
<div class="text">
        <h2>Our address</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br/><br/> <strong>Hackins Hey 34</strong>,  15800 Liverpool United Kingdom</p>
</div>
<!--/About text-->

To change map location and map marker, open google-map.js (../js/google-map.js) using some text editor software (notepad, wordpad, notapad++ etc) and:

Example:

Edit this:

 var image = 'images/map-marker.png'; //Map marker - image location
 var myLatlng = new google.maps.LatLng(53.407928, -2.990489); //Your location

To view more options about this part, please visit Google Maps.

<!--Contact text-->
<div class="text contact-text">
    <h2>Contact us</h2>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. Excepteur sint occaecat.<br/><br/></p>
    <p class="contact-information">
        E-mail: <a href="mailto:office@onionagency.com" class="highlight"><strong>office@onionagency.com</strong></a><br/>
        Telephone: <strong>(+1) 255 700 123</strong><br/>
        Fax: <strong>(+1) 255 700 124</strong><br/>
        Web: <a href="#" class="highlight"><strong>http://www.onionagency.com</strong></a>
    </p>
</div>
<!--/Contact text-->

<!-- Contact form -->
<div class="form">
        <form id="form" method="post" action="action.php">
           <div class="row">
            <div class="col-md-6 no-padding">
                <div class="col-md-12 required">
                  <input id="name" class="subfont" type="text" placeholder="Your name here" name="name">
                </div>
                <div class="col-md-12 required">
                  <input id="email" class="subfont" type="email" placeholder="Your e-mail here" name="email">
                </div>
                <div class="col-md-12 required">
                  <input id="subject" class="subfont" type="text" placeholder="Your subject here" name="subject">
                </div>
            </div>
            <div class="col-md-6 col-xs-12 required">
                <textarea id="message" class="subfont" placeholder="Your message here" cols="40" name="message"></textarea>
            </div>              
           </div>

           <div class="row">                
            <div class="col-md-12 col-xs-12">
              <button type="submit" class="btn dark pull-right"><span>Send Message</span> <span class="icon-arrow"></span></button>
            </div>
           </div>
          
           <div class="row">                
            <div class="col-md-12 col-xs-12">
              <div class="notification"><span class="highlight"><i class="fa fa-check-circle"></i> Email successfully sent!</span></div>
            </div>
           </div>                                  
       </form>
</div>
<!-- /Contact form -->