Oyster HTML Photo Template

• By: GT3 themes
• gt3themes.com

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 my support forum. Also you can find a lot of useful information right there. Thanks so much!

How to change the logo?

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

The curren logo image is located in img/logo.png folder. The required size is 80 × 25(px). Note, You have to upload the retina logo in retina/img/logo.png folderin 2 sizes bigger to look great on tablets and mobile devices.

For example, your site logo is 80 × 25px the retina version will be 160x50.

How to set up Striped Page?

To change the stripes section, please use vertical_striped.html or horizontal_striped.html files. For example, open vertical_striped.html and find the line: 153 <div class="strip_template">
Under the line you will find all required items. You can easily change the titles and background images, add/edit or delete them from the code. Please check the example below:

               <figure class="strip-menu horizontal" data-count="3">
                       <div class="strip-item strip_hor1" data-href="gallery_kenburns.html"><div>
                       <div class="mobile-hover"><div>
                       <div class="strip-fadder"><div>
                       <div class="strip-text"><div>
                                  <h1 class="strip-title">Kenburns</h1>
                                  <h3 class="strip-caption">Fullscreen Image Gallery</h3>
                       </div>
                       <a href="gallery_kenburns.html"</a>
                       </div>

• all the images in stripes can be changed in img/striped/ folder.
• <a href="gallery-kenburns.html"is the path to the page.
• h1 class="strip-title"-the title of the stripe.
• h3 class="strip-caption"- displays the description text below the title.

How to change Menu items?

Let's take a look how to do change current menu items. Please open required page file to change the code under the line with <div class="menu-main-menu-container">:

           <ul id="menu-main-menu" class="menu">
                   <li class="current-menu-parent menu-item-has-children">
                                 <a href="#"><span>Home</span></a>
                                 <ul class="sub-menu">
                                        <li><a href="index.html"><span>Slider</span></a></li>
                                        <li><a href="portfolio_masonry.html"><span>Masonry Portfolio</span>
                                        </a></li>
                                        <li class="current-menu-item"><a href="horizontal_striped.html">
                                            <span>Horizontal Striped</span></a></li>
                                        <li><a href="vertical_striped.html"><span>Vertical Striped</span></a></li>
                                        <li><a href="revolution_slider.html"><span>Revolution Slider</span></a></li>
                                        <li><a href="bg_image.html"><span>Image BG</span></a></li>
                                        <li><a href="bg_video.html"><span>Vimeo BG</span></a></li>
                                        <li><a href="bg_youtube_video.html"><span>YouTube BG</span></a></li>
                              </ul>
                           </li>

How to add/manage Portfolio?

The template contains the Portfolio section.

• There are 5 different Portfolio layouts presented in Oyster template: Grid Style1, Grid Style2, Masonry, Isotope and Columns. You can find the required one in templates files (portfolio_standard.html, portfolio-grid1.html, portfolio-grid2.html, portfolio-masonry.html, portfolio-masonry-listing.html, portfolio_1col.html, portfolio_2col.html, portfolio_3col.html, and portfolio_4col.html ). Below you can check for example, how to manage portfolio items in Portfolio Maonry layout. Please open portfolio-masonry.html, under the line 173 find the following code:

                       <div class="grid-port-cont">
                           <h6><a href="simple_fullwidth_image_post.html"> Lorem ipsum dolor</a></h6>
                                   <div class="block_likes">
                                        <div class="post-views"<i class="stand_icon icon-eye"</i><span>7715</span></div>
                                        <div class="gallery_likes gallery_likes_add already_liked">
                                            <i class="stand_icon icon-heart">
                                            <span>129</span>
                                          </div>
                                   </div>
                       </div>
                       <div class="blogpost_preview_fw element advertisement">
                           <div class="fw_preview_wrapper">
                               <div class="gallery_item_wrapper">
                                   <a href="simple_fullwidth_image_post.html"> Lorem ipsum dolor</a></h6>
                                       <img src="img/portfolio/masonry/2.jpg" alt="" class="fw_featured_image"
                                       width="540>>
                                       <div class="gallery_fadder">
                                       <span class="gallery_ico"><i class="stand_icon icon-eye" </i> </span>
                                   </a>
                               </div>

• src="img/portfolio/masonry/2.jpg"is the path to the image.
• <a href="simple_fullwidth_image_post.html"is the path of the portfolio item.
• Integer nec odio- is a title.
• post-views- is a number of views the portfolio item.
• gallery_likes gallery_likes_add - is a number of likes.

How to add/manage Gallery?

As you can see this template comes with different gallery types: Grid, Masonry, Kenburns, Flow, Ribbon, Slider and Photo Listing.

Let's try to manage one of the gallery examples. Please open gallery-masonry.html file and find line: 153

  <div class="fullscreen-gallery hided pb0 pl0">
      <div class="fs_grid_gallery is_masonry">
          <div class="grid-gallery-item pr0 pt0">
                <a href="img/gallery/masonry/zoom/1.jpg" class="prettyPhoto"
                data-rel="prettyPhoto[gallery99]" title="">
                        <img src="img/gallery/masonry/1.jpg" alt= "" class="fw_featured_image" width="540">
                        <span class="gallery_fadder"> </span>
                        <span class="gallery_ico"> <i class="stand_icon icon-eye" </i></span>
                </a>
          </div>

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

• <a href="img/gallery/masonry/zoom/1.jpg"": is the path to the image;
• <img class="gallery-stand-img" src="img/gallery/grid/thumbs/1.jpg>: is the image source of the thumbnail, its width should be 540px
• title="" - add the text to the title;
• Note, change only details indicated above.

How to use Modules?

In case you need to use one of the existing shortcodes on your page you should simply open shortcodes.html page and copy the existing shortcode

For example in shortcodes.html you want to copy Partners. In this case copy the code starting from line 896-973 and then past it in your page where you need and then edit it.

               <div class="row">
                      <div class="span12 module_number_27 module_cont pb55 module_partners" >
                        <div class="bg_title"><h3 class="headInModule">Partners</h3></div>
                        <div class="module_content sponsors_works items5" >
                              <ul>
                                  <li>
                                      <div class="item_wrapper">
                                         <div class="item">
                                             <a href="http://themeforest.net/item/frame-photography-minimalistic-wp-theme-/5358164?ref=mad_dog" target="_blank"><img src="img/partners/frame1.png""alt="Frame" title="Frame" /></a>
                                         </div>
                                      </div>
                                  </li>

How to change the color of the theme?

You can do that easily, in two ways:

• Manually. Simply open the theme.css file and edit each instance of the color.

Contact Form Setup

In case you need to use the contacts page with the form where customer can send mail, simply open one of the files: contacts-fullscreen.html, contacts-fullwidth.html, contacts-with-sidebar.html page and find the form:

        <form id="ajax-contact-form" action="#" >
                   <div class="w50 pr7"><input type="text "name="name" value="" placeholder="Name *" ></div>
                   <div class="w"> <input type="text "name="email" value="" placeholder="Email *" > </div>
                   <div class="clear"></div>
                    <input type="text "name="subject" value="" placeholder="Subject" >
                    <textarea name="message" id="message" placeholder="Message *">
                            </textarea>
                    <input type="submit" value="Send message!">
       </form >

Please open mail.php file and find test@test.com on line 3, simply replace to your email address. All the requests will be sent to the adress you indicated. That's all ;)

Source files included

Oyster comes with 26 PSD and 49 HTML 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.

All .js files are located in the /js/ folder.