Johnblack Premium Photo Template

Johnblack Premium Photo Template / template documentation

  1. How to change the logo
  2. How to change Menu
  3. Fullscreen Slider
  4. Revolution Slider
  5. Creating Blog Pages
  6. How to manage Portfolio
  7. Creating Gallery
  8. How to add/manage modules
  9. Contact Form Setup
  10. Shop
  11. Files & Sources

Introduction

Thanks for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to submit your request to support forum. Also you can find a lot of useful information right there. Thanks so much!

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template.

Requirements

You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
  2. Web Browser for testing (eg: Google Chrome, Safari or Mozilla Firefox)
  3. FTP Tool to upload files to Server (eg: FileZilla)

Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.

How to change the logo

You can do that very easily, simply replace the current logo image with your own one.

The current logo image is located in img/logo.png folder and the dark sking version is in img/logo_dark.png. The required size is 85 x 105 (px).

How to change Menu

To change the menu section, please open index.html file and find lines 63-238 <nav class="menu-main-menu-container">.
Under the line you will find all required menu items. You can easily change the menu names, sub-menus, add/edit or delete them from the code.

Fullscreen slider

The Fullscreen slider is the one of the Home pages. You can find the lines, for example index.html file the lines 269-363. Please replace images with your own ones.

        
            

                

                    
 

                    
 

                

                
                
                

                    
                    
                    
                

                

                    
Thumbs

                    

                        
    
                            
  • 
                                Happy young people
                            
    • 
                            
  • 
                                Woman in white short
                            
    • 
                            
  • 
                                Vimeo Video
                            
    • 
                            
  • 
                                Two beautiful girls
                            
    • 
                            
  • 
                                Sporty beautiful woman
                            
    • 
                            
  • 
                                Happy young people
                            
    • 
                            
  • 
                                Young sexual woman
                            
    • 
                            
  • 
                                Sexy young woman
                            
    • 
                            
  • 
                                Sexy suntanned lady
                            
    • 
                            
  • 
                                Attractive sexy woman
                            
    • 
                            
  • 
                                A beautiful young girl
                            
    • 
                            
  • 
                                Sexy suntanned lady
                            
    • 
                            
  • 
                                Two happy girls
                            
    • 
                        

                    

                

                
                

                

                    
    
                        
  • 
                        
    • 
                        
  • 
                        
    • 
                        
  • 
                        
    • 
                        
  • 
                        
    • 
                        
  • 
                        
    • 
                        
  • 
                        
    • 
                        
  • 
                        
    • 
                        
  • 
                        
    • 
                        
  • 
                        
    • 
                        
  • 
                        
    • 
                        
  • 
                        
    • 
                        
  • 
                        
    • 
                        
  • 
                        
    •

Revolution slider

Revolution Slides are presented on Home pages: Home Creative 2 and Home Creative 3.

All the required scipt details you can find in js/extensions/revolution.extension.slideanims.min.js, js/extensions/revolution.extension.navigation.min.js, js/extensions/revolution.extension.parallax.min.js and js/extensions/revolution.extension.layeranimation.min.js files.

If you want to manage the slides data, please open one of the required pages.

You can find the lines, for example index-2.html file the lines 289-358.

Please note, if you open files locally on your computer the slider will not work. You will see the errors, please follow the steps that provided in Warning message .

Creating Blog Pages/Journals

There are 2 journal types in the Johnblack Photo Template. You can find 3 pages that come with this template in journal style. Please check some of them presented below.

Fullwidth Blog

You can find all required code in blog-fullwidth.html file. Please open the page in any code editor to change cover images, links to posts and add short description to style it according your needs.

Blog with Left or Right sidebar

We present ready-made blog layouts with the sidebar. There are several pages with different left or righ sidebars: blog-with-right-sidebar.html and blog-with-left-sidebar.html. Please open one of them to edit the content.

We want to show a code example of the simple blog listing, please see it below.

                                

                                            

                                                

                                                    

                                                        

                                                            
                                                        

                                                    

                                                

                                            

                                            

                                                

                                                    Sep 02 '16    
                                                    by gt3demo
                                                    Advertisiment, Cities, Stuff
                                                    
                                                        2
                                                    
                                                

                                                

                                                    
Post With Image

                                                    

                                                

                                                
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante.

                                                

                                                Read On
                                                

                                                    

                                                        share
  • src="img/featured_img-1404x840.jpg" is the path to an image.
  • <a href="#" class="learn_more">Read On is the path of a post item.
  • <a href="#">Post With Image - is a blog post item title.

How to add/manage Portfolio

There are 3 different Portfolio layout types presented in the template: Grid(columns 1,2,3, with Title(columns 2,3)), Masonry(columns 1,2,3, with Title(columns 2,3)) and Fullscreen(all Grid and Masonry types).

Portfolio Grid

Display Portfolio Posts listing in a grid layout style. The Portfolio posts featured images will create grid layout on a page. Every item is clickable, it will redirect you to a post page.

Portfolio Fyllscreen Style

Use popular fullscreen style to display Portfolio posts featured images in a flow without empty spaces. It's a good choise if you want to show Portfolio using a creative layout. It perfectly responds to various mobile devices screen resolutions.

Portfolio Columns

Portfolio Posts can be individually assigned to pages with 1 Column layout. It designed to keep a showcase minimal and clean.

You can find the required layout in templates files (portfolio-1-column.html, portfolio-fullscreen-style.html, portfolio-fullwidth-type.html, portfolio-grid-type1.html, portfolio-grid-type2.html, portfolio-grid-with-page-title.html, portfolio-with-left-sidebar.html, portfolio-with-right-sidebar.html). Below you can check how to manage portfolio items, for example in Portfolio Grid layout (portfolio-grid-type1.html from the line 285):

                    

                        

                            
                            Donec blandit egestas
                            

                        

                        

                            

                                
Donec blandit egestas

                            

                            

                                

                                    

                                        share
  • src="img/img10-960x632.jpg" is the path to an image.
  • <a href="#" class="portfolio_grid_href"> is the path of a portfolio item.
  • Donec blandit egestas - is a portfolio item title.

Creating Gallery

As you can see this template comes with different gallery types: Albums, Flow, Grid, Masonry and Ribbon.

Shift Slider

This is a template page that displays few slides that you can shift up/down easily. It provides non standard view your inque pictures. You can only click an arrow to move the slides..

Flow

This template helps to create a slider with images in a flow. It displays all images, sliding it with special effect.

Grid

Gallery Grid layout allows to display a gallery in preset layout. Grid units are the primary locations on a page where the gallery images will be placed..

Kenburns

This is special fullscreen slider template. It displays every image separately, sliding it with automaticall zoom effect using transition..

Packery

The Packery creates different types of dynamic grid layouts easily. All the gallery items fit in a specific spot..

You can find the required Gallery layout in templates files ( flow-gallery.html, gallery-grid-type1.html, gallery-grid-type2.html, gallery-ribbon.html, gallery-kenburns.html, gallery-ribbon.html, packery-gallery.html). Let's try to manage one of the gallery examples. Please open gallery-grid-type1.html file and find line 281. 

            

                

                    

                        

                            

                                
                                

                            

                            

                                

                                    
Hot Girl

                                

                                

                                    

                                        

                                            share

Every gallery item starts and ends with <div></div>

  • <a href="img/img15-960x632.jpg"": is the path to the image;
  • <a href="img/img15.jpg>: is the image source of the thumbnail.
  • Note, change only details indicated above.

How to add/manage modules

In case you need to use one of the existing shortcodes on your page you should simply open modules.html page and copy the existing shortcode. For example in modules.html you want to copy Counter. In this case copy the code from lines 318-410 and then past it in your page where you need and then edit it.

                           

                                

                                    

                                        

                                            
COUNTERS

                                        

                                    

                                

                                
                            

                            

                                

                                    

                                        

                                            

                                                

                                                    

                                                        

                                                            
                                                        

                                                        

                                                            
PHOTOGRAPHERS

                                                            
0

                                                        

                                                        

                                                    

                                                

                                            

                                        

                                    

                                

                                
                                

                                    

                                        

                                            

                                                

                                                    

                                                        

                                                            
                                                        

                                                        

                                                            
projects done

                                                            
0

                                                        

                                                        

                                                    

                                                

                                            

                                        

                                    

                                

                                
                                

                                    

                                        

                                            

                                                

                                                    

                                                        

                                                        

                                                        

                                                            
followers

                                                            
0

                                                        

                                                        

                                                    

                                                

                                            

                                        

                                    

                                

                                
                                

                                    

                                        

                                            

                                                

                                                    

                                                        

                                                        

                                                        

                                                            
happy custommers

                                                            
0

Contact Form Setup

If you want to use the contacts page with the form where customer can send mail, simply open contact.html and find the form:.

You can setup your contact form in 2 clicks, please open mail.php file and find yourname@yourdomain.com on line 3, simply replace to your email address. All the requests will be sent to the adress you indicated. That's all.

Shop

Shop page allow to create online store page. You can simply add items listing usign shop.html file. Please open it and find the lines with details beginning from the 283.

                    

                        

                            
Advertisement Poster

                        

                        

                            

                                Add to cart  
                                
                                    
                                        
                                            $18.00
                                        
                                    
                                    
                                        
                                            $14.00
                                        
                                    
                                
                            

                        

                            

                    

                
                
  • 
                    
                        Sale!
                        shop6

    • Every shop item starts and ends with <div></div>

    • <a href="#">Advertisement Poster": is the path to the page and title area;
    • <a href="img/shop6-500x330.jpg>: is the image source of the thumbnail in listing.

    Files & Sources

    Included Stylesheets

    These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All files are included under johnblack/css/

    Included JavaScript

    These are the various attribution inks to the Javascript files included or modified to work with in this theme. All included JavaScript codes under johnblack/js/

    Included PSD

    The theme comes with 26 PSD files. Some PSD files can include different pages inside, and can have hidden layers. Please note that the images are not included in the package.